Design Tokens take center stage in our 10th Hands-on Demo! Laura Kalbag, educator, designer, and developer at Penpot, will demo the first design tool to natively include design tokens. She will discuss why Design Tokens improve designer and developer collaboration and how they enhance design workflows, all while showcasing practical use cases and how to implement design tokens for yourself and your team. The session will be hands-on and interactive, giving everyone a chance to jump in and take part in the Q&A.

The penpot projects are now available in our community! 👉 https://community.penpot.app/t/design-tokens-live-sessions-in-april/8403/5

00:00 welcome to the live stream 01:20 Intro 02:57 What is a design token? 14:49 Types of design tokens 17:10 Creating and naming design tokens 27:12 Using design tokens 36:00 Using design tokens for themes and modes 43:40 Design tokens doctor (Q&A)

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.