Tutorial
If you want to create a design system using Penpot, I’ve got some tips, tricks, and best practices for you.
Code
Image hover effects are an ideal way to provide visual feedback. Let’s look at how to create a variety of hover effects to provide a polished user experience.
Beginners
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.
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.
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.
CSS grid layouts aren't new, but they're still incredibly powerful and allow you to do some truly amazing things with your web design. It's perfect for designers who want to form better working partnerships with the developers since it’s made for both professional
If users don’t find your product engaging or seamless to use, they may skip it for a competitor’s product. That’s where user interface (UI) and user experience (UX) design come in. These closely related disciplines help you build products that put users first.
UI design elements are the pieces that create an engaging website or app experience. Users can’t interact with a site to achieve their goals without them. From clicking links to submitting forms, each user action depends on fully functional and intuitive design elements to get the job done. However,
Looking for an open-source Figma alternative? Penpot offers unique features, collaboration tools, and flexibility that make it much more than just a design tool.
Articles and tutorials on design and code collaboration, Open Source, Penpot, and everything in between.
Responsive layouts “respond” to the size and resolution of the device they are presented on, and underpinning these layouts are CSS media query breakpoints.
Learn how to use color and save reusable colors for your design system with Penpot’s color palette and shared libraries.
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.
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.
Learn about components and how to use your team’s shared components for your design system in Penpot.
Learn about creating components and libraries of shared components in Penpot for your team’s design system.
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
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.
In this post, we’ll guide you through the practical steps to create a Penpot account, migrate your projects, and start customizing 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.
You’ve been sent a Penpot file or downloaded a template from the Community. This tutorial will help you find your way around.
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.
