Sign up to save your podcasts
Or
Share Design Systems at Scale | Penpot ✕ Tokens Studio Hands-On Demo
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Design Systems at Scale | Penpot ✕ Tokens Studio Hands-On Demo
Do you ever feel overwhelmed by the number of design tokens you’re managing? To help you simplify, Marco-Christian Krenn from Tokens Studio joins us as a special guest for this hands-on demo. Together with Laura Kalbag, Penpot Educator, he’ll guide you through building complex design systems in Penpot using fewer design tokens, reducing complexity and maintenance. 🤓
They’ll cover:
There will be time for live Q&A — bring your toughest (and nerdiest) token questions.
00:00 Intro
02:00 Marco introduces himself
02:48 Tokens Studio and Penpot Collaboration
03:28 What are design tokens?
5:52 Responsive scales and typography with design tokens
8:26 Fluid type scale generator
10:25 Proportional type scale demo
20:20 Breakpoints
24:51 Accessibility text zoom
29:44 New release: Token groups and remap
31:39 Naming Scale tokens
35:58 Practical design token color palettes
37:29 Color theming. HSLA color palette token
39:30 Color Spaces.
44:02 Random color generator
48:54 Design token structure and performance
54:25 Q&A
New to Penpot? Start for free today! 👉https://design.penpot.app/#/auth/register
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.
View all episodes
By Do you ever feel overwhelmed by the number of design tokens you’re managing? To help you simplify, Marco-Christian Krenn from Tokens Studio joins us as a special guest for this hands-on demo. Together with Laura Kalbag, Penpot Educator, he’ll guide you through building complex design systems in Penpot using fewer design tokens, reducing complexity and maintenance. 🤓
They’ll cover:
There will be time for live Q&A — bring your toughest (and nerdiest) token questions.
00:00 Intro
02:00 Marco introduces himself
02:48 Tokens Studio and Penpot Collaboration
03:28 What are design tokens?
5:52 Responsive scales and typography with design tokens
8:26 Fluid type scale generator
10:25 Proportional type scale demo
20:20 Breakpoints
24:51 Accessibility text zoom
29:44 New release: Token groups and remap
31:39 Naming Scale tokens
35:58 Practical design token color palettes
37:29 Color theming. HSLA color palette token
39:30 Color Spaces.
44:02 Random color generator
48:54 Design token structure and performance
54:25 Q&A
New to Penpot? Start for free today! 👉https://design.penpot.app/#/auth/register
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.