Learn how to use Penpot with step-by-step tutorials created by the Penpot team. Explore core features, workflows, and best practices for designing and collaborating in open-source.
Curated by: Penpot (95 videos)
The wait is over. Variants are finally here!🎉. The feature that changes everything for your components and design systems. In this video, Ester Latorre, Product Designer at Penpot, explains what's new on Variants as well as new typography tokens & more. 👉 Try them now at penpot.app ---- 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/ * Bluesky: https://bsky.app/profile/penpot.app *X: https://x.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's a Component 00:56 - Penpot Variants overview 01:29 - How to create a Variant and how to use them 02:32 - Properties and values. Components area 03:10 - Properties and values. Layers area 03:37 - Applying Flex layout in Variants 03:56 - Adding properties to Component Variants 05:42 - Using Variants 06:43 - Switch between Variants 07:01 - Overrides in Penpot Variants 08:09 - Variants into components 09:22 - Combine components as Variants 11:01 - New typography Design Tokens 11:35 - Select your board size upfront 11:58 - Show distances while moving layers