# Help Shape Penpot Variants – Join the Beta Test!

**URL:** <https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242>\
**Category:** Help us improve Penpot\
**Created:** [July 7, 2025, 10:56am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242 "2025-07-07T10:56:59Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [July 7, 2025, 10:56am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/1 "2025-07-07T10:56:59Z")

</div>

> [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 🙌

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.

[![](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/0/05377505127d51f8c95f79e1af8e84925b38a816.jpeg "Penpot Variants Are Coming | Sneak Peek Demo") ](https://www.youtube.com/watch?v=3iWc-dwjA30)

_A sneak peek demo with lo-fi vibes 😃_

## Why are Variants Important?

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

⚡ **Faster design workflows**  
Quickly switch between states or styles using simple property controls.

🧑‍🤝‍🧑 **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.

> 👉 To become a Variants beta tester, email us at **[support@penpot.app](mailto: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!

---

<div class="post-metadata">

**Author:** ![Vitaly](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/vitaly/32/8134_2.png) [@Vitaly](https://community.penpot.app/u/Vitaly)\
**Post date:** [July 10, 2025, 5:24pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/2 "2025-07-10T17:24:03Z")

</div>

On/Off in dropdown… Really?

 ![grafik](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/9/9e62eaf937be010e0c7b14ab260eed047bd6d253.png)  
 ![grafik](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a8bf61124175ca5aa6f39bbc8e8190868066e7dc.png)

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.

---

<div class="post-metadata">

**Author:** ![diacritica](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/diacritica/32/5604_2.png) [@diacritica](https://community.penpot.app/u/diacritica)\
**Post date:** [July 16, 2025, 2:01pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/3 "2025-07-16T14:01:03Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![MarcinBauer](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/marcinbauer/32/8464_2.png) [@MarcinBauer](https://community.penpot.app/u/MarcinBauer)\
**Post date:** [July 31, 2025, 7:48am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/4 "2025-07-31T07:48:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![StefanoSL](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@StefanoSL](https://community.penpot.app/u/StefanoSL)\
**Post date:** [August 6, 2025, 9:52am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/5 "2025-08-06T09:52:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![azazy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/azazy/32/8438_2.png) [@azazy](https://community.penpot.app/u/azazy)\
**Post date:** [August 11, 2025, 9:39pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/6 "2025-08-11T21:39:04Z")

</div>

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. 🫡

---

<div class="post-metadata">

**Author:** ![tudorcelstan](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/tudorcelstan/32/6815_2.png) [@tudorcelstan](https://community.penpot.app/u/tudorcelstan)\
**Post date:** [August 12, 2025, 5:53am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/7 "2025-08-12T05:53:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Picorims](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/picorims/32/4897_2.png) [@Picorims](https://community.penpot.app/u/Picorims)\
**Post date:** [September 5, 2025, 3:51pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/8 "2025-09-05T15:51:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Arnaud\_S](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/arnaud_s/32/7862_2.png) [@Arnaud\_S](https://community.penpot.app/u/Arnaud_S)\
**Post date:** [September 17, 2025, 1:37pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/9 "2025-09-17T13:37:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![myfunnyandy](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/myfunnyandy/32/54_2.png) [@myfunnyandy](https://community.penpot.app/u/myfunnyandy)\
**Post date:** [September 17, 2025, 3:54pm UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/10 "2025-09-17T15:54:57Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![Arnaud\_S](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/arnaud_s/32/7862_2.png) [@Arnaud\_S](https://community.penpot.app/u/Arnaud_S)\
**Post date:** [September 18, 2025, 6:56am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/11 "2025-09-18T06:56:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![miryamgduque](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/miryamgduque/32/39_2.png) [@miryamgduque](https://community.penpot.app/u/miryamgduque)\
**Post date:** [September 22, 2025, 11:44am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/12 "2025-09-22T11:44:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [September 23, 2025, 8:30am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/13 "2025-09-23T08:30:41Z")

</div>

It works so well! You can try it out from [my variant example template](https://penpot.app/penpothub/libraries-templates/variant-examples). I used nested components on most of the UI components in the template.

---

<div class="post-metadata">

**Author:** ![Arnaud\_S](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/arnaud_s/32/7862_2.png) [@Arnaud\_S](https://community.penpot.app/u/Arnaud_S)\
**Post date:** [September 23, 2025, 8:31am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/14 "2025-09-23T08:31:33Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![Iskren\_Ivanov](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/iskren_ivanov/32/8362_2.png) [@Iskren\_Ivanov](https://community.penpot.app/u/Iskren_Ivanov)\
**Post date:** [October 8, 2025, 4:32am UTC](https://community.penpot.app/t/help-shape-penpot-variants-join-the-beta-test/9242/15 "2025-10-08T04:32:20Z")

</div>

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.
