This release comes with a very special new feature: Design Tokens! Penpot is the only tool to integrate native design tokens in its app. A single source of truth to improve efficiency and collaboration between product design and development. Learn more: https://penpot.app/collaboration/design-tokens

Penpot is the free open-source design tool for Design & Code collaboration.

Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more.

Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect.

Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster.

Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available.

Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org

Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *X: https://twitter.com/penpotapp ​​ *LinkedIn: https://www.linkedin.com/company/penpotdesign *Instagram: https://www.instagram.com/penpot.app/ *Github: https://github.com/penpot

Penpot: Design as code.

00:00 - Intro 00:40 - What are Design Tokens? | 01:23 - Token Naming | 02:34 - Color Theming | 02:57 - Multibrand 03:46 - Creating Design Tokens | 04:45 - Global Tokens | 07:18 - Alias Tokens | 08:12 - Semantic Tokens 10:44 - Import/Export Tokens as JSON | 11:23 - Invalid token | 11:55 - Export JSON | 12:40 - Import JSON 14:03 - Design Tokens Themes | 15:17 - Creating themes 16:58 - Outro