Wireframes vs. mockups: How to use both for better design
Wireframes and mockups offer a tangible roadmap for refining your best ideas. Each has a unique role in the creation pipeline.
Latest
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.
9 UI design tips for smarter marketing project designs
To stand out from the crowd, you’ll want to focus on making your UI as usable and effective as possible — these design tips can truly separate you from your competition.
Transform Your Designs Into Code With Penpot
Used for everything from mobile apps to e-commerce sites, the design-to-code approach has helped teams turn out fantastic work in less time.
Accessible Design Checklist
Improve your design’s accessibility with this quick reference checklist and Penpot plugin.
7 ways Penpot empowers developers to do their best work
Read about how Penpot is changing the way developers work for the better. We’ve identified some of the ways they can see results right away from making the switch
Product designer skills: 5 skills employers are looking for in 2025
We've identified the five areas most likely for hiring teams to find valuable in 2025.
How to choose a color palette and use it to build your brand
Colors play a crucial role in shaping brand identity. Since the 15th century, color theory has guided designers worldwide in selecting the ideal combinations to enhance and elevate their designs.
How to make a mood board for your next app or website design
When you go through the process of creating a mood board, you get a better idea of the feeling your product should evoke for users. Here’s how to make a mood board you can be proud of.
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.
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
7 wireframing examples for better designs
Wireframes are an integral part of designing any app or website. These analog or very low-fidelity drawings have one purpose: to show the basic layout and navigation of your idea.
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: 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.
What is a component library?
Designers and developers create better products when they can collaborate easily and create consistent design decisions. One of the more practical ways to accomplish both aims is to employ a component library.
Creating a design system: A beginner’s guide in 7 steps
A design system guides every new project and helps designers, developers, and other teams stay unified in their workflows. Learn how to create a design system in 7 steps.
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.
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.
5 best Figma alternatives
When it comes to digital design tools, there are few bigger than Figma. However, Figma comes with drawbacks, whether it’s costs, UX issues, or privacy concerns with AI. For this reason, many people are wondering what Figma alternatives are out there and whether it’s time to make the
Beginners
The important role of design systems in modern UI
Customers want seamless experiences, fuss-free navigation, and the chance to be part of something meaningful and innovative. If your UI doesn’t reflect all of these things, you may be wondering how a design system can help.
Tools
How to make the switch from Figma to Penpot (Part II)
In this post, we’ll guide you through the practical steps to create a Penpot account, migrate your projects, and start customizing 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.
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.
Tools
How to make the switch from Figma to Penpot
There are many reasons designers or developers might migrate to Penpot. Penpot’s browser-based software is free and open-source, so you'll always own your work.
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.
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.
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.
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.
Open Source
Why Open Source?
Many companies are acknowledging the advantages of using Open Source software. One of the main characteristics in open source is that it can accelerate processes of innovation.
UX
What is the Double Diamond design process (and how to use it today)
The Double Diamond design process is a structured approach to product and UX design, dividing the creative journey into four phases: discover, define, develop, and deliver.
Design
5 ways design systems improve user experience
A design system is a defined library of visual elements, user experience components, documentation, and code snippets. A design system offers significant user experience benefits over the traditional design documentation of the past.
Design
7 crucial design system elements for teams and how to create them
Design systems offer numerous benefits for organizations, such as helping teams collaborate, reducing build time, and ensuring consistency. When used to create new products, design systems help even new team members get up to speed quickly.