Help Shape Penpot Variants – Join the Beta Test!

Help us improve Penpot
1

[UPDATE] Penpot Variants are already live! That means this beta test is officially closed, and we’re no longer taking new volunteers. We got a ton of super valuable feedback that helped us make key improvements. Huge thanks to everyone who took part :raising_hands:

One of the most anticipated features of the year is almost here: Penpot Variants. We’re inviting you to be part of the beta!

What are these Variants everyone is asking for?

Variants allow you to group similar components, such as buttons, icons, or toggles, into a single, customizable component. Rather than navigating through separate components for every possible state, size, or style, you can manage them all from one unified component using clearly defined properties.

Imagine a single button component that can switch between primary and secondary styles, active and disabled states, and small to large sizes. Useful, right? That’s the power of Variants.

A sneak peek demo with lo-fi vibes :smiley:

Why are Variants Important?

:sparkles: Cleaner libraries
Say goodbye to scattered duplicates. Variants streamline your components into tidy, manageable sets.

:high_voltage: Faster design workflows
Quickly switch between states or styles using simple property controls.

:people_holding_hands: Better team collaboration
Variants approximate coding paradigms by allowing different states of a component to be managed within a single structure, rather than as separate components. This promotes a consistent, shared framework for designers and developers, making collaboration, understanding, and maintenance much easier.

How to Join the Beta

We’re offering early access to a group of Penpot community members who are excited to explore, test, and help refine Variants. If you’re passionate about design systems and want to contribute, we’d love to have you on board.

:backhand_index_pointing_right: To become a Variants beta tester, email us at support@penpot.app with the subject line “Beta test volunteer.” In the email, kindly share a brief overview of your role and how you plan to use Variants in Penpot.

We anticipate starting the beta test in a few weeks. We’ll send detailed instructions to the testers when the time comes.

Know someone who would love to join the test?

Penpot is built not only for the community, but also with the community. Feel free to share this post with colleagues, friends, or community groups. The more voices we hear, the better this feature will be!

21 Likes
2

On/Off in dropdown… Really?

grafik
grafik517×264 8.97 KB

grafik
grafik517×264 8.93 KB

Why did you create something that could have been improved with a quick comparison to competitors — especially when certain features are already well-implemented in other tools?

Dropdown for 2 states its the shame.

3

Hi @Vitaly Rest assured, we have plans to add dropdown for 2 states already, but we have always preferred to ship new features and learn from the process instead of waiting to have everything finished. In this case, we know that the lack of an on/off switch is not a deal breaker and can be later added. We’re particulary eager to see of how people use design tokens and variants together, for instance.

As a separate note, I would like to ask that you remain respectful here in this forum, your tone feels aggressive. Thank you!

9 Likes
4

Variants are important, but at the same time using them in designs is equaly important. I’d love if Penpot would have a better way of slotting components into components. Right now Figma’s way of slotting is hacky at best, and it’s cumbersome for complex components that use local ones to prepare designs.

4 Likes
5

Absolutely agree. Of course, you also come from Figma, and there are features you simply can’t do without anymore.

6

Can’t wait to try it out, I think I should send an email for the request.. Thank you for your huge efforts guys!

Sounds exciting, and shout out to our fellow designers for their thoughtful comments. :saluting_face:

3 Likes
7

Don’t know if anyone here is familiar with Wordpress, but EtchWP is a new builder that has the best component system out there.

Variants are basically entirely props-based, while slots are a shadow element you insert into any component to signal an area where you can nest other components or any valid markup.

You should really take a look at it. Its UI/UX are really the best in the game.

8

I also think that a slotting system allowing composition would reduce friction a lot for sure. Slots could be just regular boards in disguise.

1 Like
9

Will the official version retain the functionality of the Beta version (https://design.penpot.dev/)?

10

This link is actually a pre-production environment, the link for the beta-test was a different one. In any case the answer is yes, users using the version deployed in our SaaS (https://design.penpot.app/) will be able to enjoy variants in their full extent. We intend to publish 2.10, which will include variants, very soon.

5 Likes
11

And what about the preservation of overrides on nested icons, for example inside buttons ?

12

We’ve paid special attention to managing overrides whenever you switch between variants, including when there are nested components. Even when you’re switching the nested variant itself. This should make a huge difference in how smooth everything feels.

2 Likes
13

It works so well! You can try it out from my variant example template. I used nested components on most of the UI components in the template.

1 Like
14

Thanks for your reply. I also reviewed Laura Kalbag’s document on variants. I arrived at the same approach for building icon buttons: defining a core icon set and creating color variants. It adds some overhead in terms of maintenance, but it provides clarity and consistency, which makes it worth it.

But will this approach be compatible in the long run with micro-interactions (such as a hover state on a button, for example)?

1 Like
15

For me the Variants here are better than Figma’s. I do hope the Label property is happening because it’s a great have to.

4 Likes