Improvements on the components/variants system

Hi guys, I’ve been using the new variants a lot and have a couple of ideas that could make the feature even better. Here’s some feedback based on my experience so far.

Show/Hide properties on variants

Sometimes, a specific variant needs a property that the others don’t. For example, a dropdown in a set of form inputs might need an “is open” property. Right now, if I add that property, it shows up on every single component in the set, even where it’s not relevant.

To fix this, it would be great to have a way to show or hide properties for each variant. If a property is hidden for a specific variant, you just wouldn’t see it when using that instance in your project. This would make editing much cleaner, especially for components with lots of properties. The only catch would be to make sure at least one property is always visible, so we don’t accidentally hide everything.

Improvements to the component swap feature

With variants now in the mix, the swap component feature feels a bit overlooked. When you swap a component for one that has variants, there’s no way to pick which variant you want; it always uses the main one. You then have to manually select the correct variant afterward.

This gets a bit time-consuming with components that have many variants. Also, the thumbnails in both the assets panel and the swap panel can be slow to load. I’ve also noticed that sometimes it loads all variants of a component as separate items, all with the same name. The behavior isn’t consistent, but it’s definitely something worth looking into.

“Swap component” action for prototyping

This one is more of a question than a request, since the idea was suggested before. Now that we have components and variants fully integrated into Penpot, it would be great to have a way to add interactions to them.

This would be a huge step forward for Penpot as a professional prototyping tool. It would allow us to create prototypes with a much more dynamic and true interactive feel, going beyond just switching between screens or showing overlays.

4 Likes

All stated here is essential, I hope they see this too