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.

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

1 Like