Whether you’re just getting started with design tokens or want to improve your existing workflow, these curated resources will help you get up and running quickly with Penpot.
Starter Kit Template
Use it as a starting point for your own design system and explore how different token types can be applied in the demos.
Color Token Plugin
Opinionated color palette generator for Penpot that creates consistent palettes with optional tints/shades.
Converter
Convert design token files & directories into a Penpot suitable format (created by Tokens Studio).
Design Tokens Webpage
Latest updates, practical guides, and best practices for working effectively with Penpot design tokens.
Videos & Tutorials
If you prefer a video format, these tutorials, from a hands-on demo to real-world applications, will help you get started!
- Intro to design tokens Hands-on Demo[Play]
- Key design tokens applications [Play]
- Import/Export tokens as .JSON [Play]
Blogposts
Step through Penpot design tokens with handy screenshots and short videos featured in these posts:
- Intro to Penpot design tokens [Read]
- Design tokens with Penpot [Read]
- Design tokens complete guide [Read]
Hands-On Demo, June 26
Don’t forget to mark your calendar for June 26th! Join @LauraKalbag, educator, designer, and developer at Penpot, for an interactive session. She’ll show you how to build a complete UI using Penpot design tokens.
Make sure you bring your questions to get them answered live during the Q&A
Start exploring and get the most out of these resources!
