– article in partnership with Penpot –

After presenting you the Flex Layout, the CSS Grid Layout and the components in Penpot, I am delighted to make you discover today a new feature that will really change your way of designing interfaces: the Design Tokens. What is particularly remarkable is that Penpot is the first and unique design tool to integrate tokens design natively !

The design tokens are, what could be called, centralized design decisions. It is a key-key pairs system that define the visual characteristics of your interfaces such as colors, dimensions, spacings, rounded, etc. Moreover, Penpot follows the most standardized approach available for Tokens design (W3C DTCG))which guarantees compatibility with many tools and technologies!

This approach allows you to:

  • Centralize Your design choices
  • Maintain consistency Between all your projects
  • Quickly change The appearance of your interfaces
  • Export and import easily these parameters between different projects
  • Adapt your designs to different platforms
  • Manage versions of your design decisions
  • Harmonize multi-brand projects And support large -scale design systems

Like that, no more design inconsistencies and redundant decisions! With the Tokens design, you define once for all your visual standards and apply them uniformly to all of your interfaces.

In Penpot, the Tokens design is organized around two key concepts:

  1. Themes : they allow you to create different visual variations (clear theme, dark theme, mobile theme, etc.)
  2. The sets : They help you organize your tokens by categories (buttons, titles, cards, etc.)

And for the moment, Penpot offers 8 types of tokens:

  • Border Radius : for the corners district
  • Colors : for colors
  • Dimensions : for sizes
  • Opacity : for opacity levels
  • Rotation : for the orientation of the elements
  • Size : for dimensioning
  • Spacing : for spaces
  • Stroke Width : for the thickness of the lines

The use of tokens design is really intuitive. I also show you all this in this video:

https://www.youtube.com/watch?v=BFQ6FRWQADE


The Penpot tokens design therefore represent a nice advance for all those who seek to create coherent and easily maintainable interfaces. Of course, this functionality, still recent, is called upon to enrich themselves over time (I am waiting for the management of typography and the colors of text with impatient!).

In short, if you have not yet tested Penpot, this is the perfect time to get started! It’s free, open source, available directly via your browser at the address Penpot.app.

Good design to all!


Source link

Categorized in:

Technology