Sign up to save your podcasts
Or
Share Scalable UI design: tokens, components & variants | Penpot Hands-On
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Scalable UI design: tokens, components & variants | Penpot Hands-On
What makes a good component? How can design tokens help improve your design workflow? In this demo, Laura Kalbag, Penpot educator, will update her Penpot template "Prototype Examples", into a more modern, system-based setup. She'll convert the UI to rely on a component library, component variants, and design tokens, showing how these tools make designs easier to maintain, faster to scale, and better for team collaboration. Along the way, she'll explain when it’s worth creating components/variants, how to organize them into libraries, and how to set up tokens (color, spacing, typography), including themes.
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
04:08 Creating components
12:43 Catch up on component variants
23:09 Getting started with design tokens
35:24 Designing typography tokens
45:14 Building design token themes I
48:57 Sneak Peek: Color tokens in the design tab
49:49 Building design token themes II
View all episodes
By What makes a good component? How can design tokens help improve your design workflow? In this demo, Laura Kalbag, Penpot educator, will update her Penpot template "Prototype Examples", into a more modern, system-based setup. She'll convert the UI to rely on a component library, component variants, and design tokens, showing how these tools make designs easier to maintain, faster to scale, and better for team collaboration. Along the way, she'll explain when it’s worth creating components/variants, how to organize them into libraries, and how to set up tokens (color, spacing, typography), including themes.
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
04:08 Creating components
12:43 Catch up on component variants
23:09 Getting started with design tokens
35:24 Designing typography tokens
45:14 Building design token themes I
48:57 Sneak Peek: Color tokens in the design tab
49:49 Building design token themes II