Penpot 2.10: Go your own way 🛤️

In this release we introduce what’s (probably) the top community request: Variants are a powerful way to bring order and flexibility to your design system in Penpot.

On top of that, Design Tokens now include more typography token types, plus the usual series of quality-of-life improvements.

Let’s dive in :diving_mask:

Note: Docker images are published shortly after the SaaS update: Why do self hosted versions lag behind new releases?

Variants are finally here

With Variants, you can group similar components (such as buttons, icons, or toggles) into a single, customizable component. An example would be a single button that can switch between primary, secondary, active, disabled, small, and big (or any other desired setting) without disrupting your workflow. Want more details? In the user guide, you’ll find a video demo and how to use them.

If you want to get an existing design file with components to use variants, you’ll find priceless advice in this clarifying post by @miryamgduque: How to prepare your files for the upcoming Variants release.

Huge shoutout to our community for the ideas and feedback that made Penpot Variants real, so much of it came from the beta test :green_heart:

New typography token types

No more, no less than six new token types, significantly boosting your ability to manage design decisions, particularly in typography: Font Family, Font Weight, Text Case, Text Decoration, Letter Spacing token, and Number token (for unitless values).

We’re continually building on Penpot’s native Design Tokens support. These tokens for single properties are in the critical path for something that we are already working on: a composite token to rule all the typography tokens.

Select your board size upfront

Now you can choose a board preset size before you begin, so you can start without needing to draw a board with a random size first.

Show distances while moving layers

You can now see distances between elements while moving them. Move a selected element with the arrow keys while holding Alt (or Option), and as you do, you’ll see the distance to whatever’s under your cursor.

Want more details?

If you’re really curious about it, here’s the changelog with the complete list of changes, including enhancements, config adjustments and bugfixes.

26 Likes

This is an absolutely great release. Congratualtions to everyone involved. :clap:

5 Likes

Bravo! Variants have been my number one need for Penpot. However, now, it would be awesome if we could bake hover/active/focus states into variants, so that no interaction setup is required each time components are used in prototypes. Perhaps it could be as simple as adding a “State” property with any of those values and they behave as expected in Prototypes?

3 Likes

Love to see variants! Thanks :star_struck:

I’d like to add another vote for adding hover/active/focus states too!

5 Likes

Congrats and thank you Penpot peops: an industry-significant release that will only get stronger. Got a busy time ahead rebuilding projects and design system with all the new variants and recent goodness like tokens. Going to enjoy the new Penpot training materials too before getting too click-happy. Woot!

3 Likes

Wow, this release looks great. Thank you for your hard work!

2 Likes

Thank you, Penpot team, for the variants and the typography token types.
This will unlock UI kits building and many more contributions.

2 Likes

OK… been working on variants and tokens in refactoring an existing design. Loving the new capability - thank you so much Penpot.app peops!

What I’m finding is it’s simplifying the design library significantly. Not just buttons but also found other uses like title bars and tables.

Tables made from variants is really cool and efficient. Create a 4 types of Row variants: Header, Odd, Even and Selected - each with 1, 2, 3, 4 up to 8 cell permutations. Couple this with judicious use of tokens and it becomes easy to create and maintain lots of tables:

  1. Drop the first Table Row variant, selecting row type and number of columns (which you can change later)
  2. Modify the table cell width behaviour (px or %).
  3. Duplicate the variant instance, setting them to the row type required.
  4. Select all the table rows and wrap them in a flex layout, changing the wrap to vertical. Rename the Flex object to ‘Table’.
  5. Populate your new table with example data.

If you need more columns, then just change the column property of each row. If you need to change adding, formatting or colours, then update the respective token values. More rows? Duplicate an existing table row.

Check out the example.

7 Likes

Hi, @mgregoire @jason_set This new initiative is set to develop. Stay updated in Taiga