Design
Component variants are a way to create different variations of a component. Does your component need different sizes? Colors? Levels of elevation? Variants make it easy to define these properties, and choose between them when you’re using a component in your designs.
Tutorial
Design tokens are the smallest repeatable elements of your design that can be reused consistently across your Penpot projects and teams.
Tutorial
If you want to create a design system using Penpot, I’ve got some tips, tricks, and best practices for you.
Tutorial
Learn how to use color and save reusable colors for your design system with Penpot’s color palette and shared libraries.
Tutorial
Learn about components and how to use your team’s shared components for your design system in Penpot.
Tutorial
Learn about creating components and libraries of shared components in Penpot for your team’s design system.
Tutorial
I recently shared a css.gg icons library template in the Penpot Libraries & Templates collection. Here’s how you can use icons from this (and other) shared libraries in Penpot.
Tutorial
You’ve been sent a Penpot file or downloaded a template from the Community. This tutorial will help you find your way around.
Tutorial
Penpot uses CSS Flex and Grid layouts, so you can build modern and responsive layouts (without knowing how to code!) that will work the same on the web.
Tutorial
With Penpot, you can create CSS Grid layouts without any code. This tutorial explores creating a bento grid layout for a sales dashboard UI.
Tutorial
Create CSS Flex layouts without learning how to code. This tutorial shows you how to use Penpot’s flexible layout tools using our sales dashboard UI template.
Tutorial
To create consistency across your design system and help speed up the design process, you can save Penpot flex and grid layouts as reusable components.