Laura Kalbag - Penpot Blog

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.

Design

Design systems with Penpot

Let’s walk through the Penpot features you can use to create your team’s design system, from shareable libraries to generated CSS and everything in between.

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.