Laura Kalbag - Penpot Blog (Page 3)

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.

What is CSS? Featuring the CSS panel in Penpot.

Code

What is CSS? A beginner’s guide

While learning CSS takes time, understanding how it works should be easy. In this guide, we’ll explain the basics of CSS to help you start your journey.

Code

What are design tokens? A complete guide

Design tokens create a single source of truth for design decisions, making your design system more maintainable, scalable, and consistent.

Design

Accessible Design Checklist

Improve your design’s accessibility with this quick reference checklist and Penpot plugin.

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.

Hovering over a space image on a web page morphs the image from a circle to a square.

Code

How to create interactive image hover effects with CSS

Learn how to create effective hover effects in different ways and how they help designers provide a better user experience

Code

How to use CSS and media query breakpoints to create responsive layouts

Responsive layouts “respond” to the size and resolution of the device they are presented on, and underpinning these layouts are CSS media query breakpoints.

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.

See all