Tutorial - Penpot Blog

Design

Tutorial: Creating and using component variants in Penpot

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.

Applying a design token as the fill color in Penpot.

Tutorial

Design Tokens with Penpot

Design tokens are the smallest repeatable elements of your design that can be reused consistently across your Penpot projects and teams.

Tutorial

Design systems best practices with Penpot

If you want to create a design system using Penpot, I’ve got some tips, tricks, and best practices for you.

Tutorial

Tutorial: Creating Penpot color palettes and libraries

Learn how to use color and save reusable colors for your design system with Penpot’s color palette and shared libraries.

A password input component being dragged into a design.

Tutorial

Tutorial: How to use components and shared libraries

Learn about components and how to use your team’s shared components for your design system in Penpot.

A collection of buttons in a design system. In the Assets panel, a focused medium primary button component is selected.

Tutorial

Tutorial: Create and share components in Penpot

Learn about creating components and libraries of shared components in Penpot for your team’s design system.

A moon icon component being added to a dark mode toggle design in Penpot.

Tutorial

Tutorial: How to use icons from a shared icon library in Penpot

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.

A Penpot file with some abstract graphic shapes, some text, and an arrow path.

Tutorial

Tutorial: How to navigate a Penpot file

You’ve been sent a Penpot file or downloaded a template from the Community. This tutorial will help you find your way around.

A flex layout and a grid layout on one board in Penpot. The flex layout’s items are split across two lines. The grid layout i

Tutorial

Why you should use Penpot’s flexible layouts for your responsive designs

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.

Editing the main grid area in a sales dashboard UI. The content is laid out in cards in a bento box-style layout.

Tutorial

Tutorial: How to create responsive CSS Grid layouts in Penpot

With Penpot, you can create CSS Grid layouts without any code. This tutorial explores creating a bento grid layout for a sales dashboard UI.

The leaderboard component featuring list of people with their avatars, names, sales revenue and percentage.

Tutorial

Tutorial: How to create CSS Flex layouts in Penpot

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.

Grid layout components shown on the canvas and as reusable components in Penpot.

Tutorial

Tutorial: How to create CSS Flex and Grid layout components in Penpot

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.

Wireframes in Penpot created using the Wireframing Kit components.

Tutorial

Tutorial: Creating wireframes with Penpot

Learn how to design, present, and share wireframes with Penpot using our Wireframing Kit library to get started quickly.

The light mode and dark mode boards on the canvas, connected by prototype lines.

Tutorial

Three top tips for designing interactive prototypes with Penpot

Find out the top three tips to help you make great prototypes with Penpot every time. Use the following tips to level up your Penpot skills.

Three views of a poster store website design, connected between their navigation links with prototype lines.

Tutorial

Tutorial: Creating interactive prototypes with Penpot

As UI and UX designers, we’re pretty limited by how much we can convey in static visuals. Interactive prototypes are a handy way to show exactly how our designs should behave.