Design
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.
Design
Variants add an extra level of flexibility to your components, as well as providing better documentation and making designs even more developer-friendly.
Beginners
Prototypes keep design teams aligned, cutting rework and wasted effort. They act as a shared source of truth that unites designers, developers, and stakeholders—whether refining a complex flow or pitching a bold new idea.
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.
This piece explains some of Penpot's relevant findings around AI and UI Design, what we’re building (and why) and what you should expect from us in the future.
In this guide, we’ll walk through creating a token system that works intuitively for both designers and developers.
Design tokens create a single source of truth for design decisions, making your design system more maintainable, scalable, and consistent.
Improve your design’s accessibility with this quick reference checklist and Penpot plugin.
Learn how to create effective hover effects in different ways and how they help designers provide a better user experience
Learn about Design and Code: our insights on collaboration and more.
Having a basic knowledge of CSS can really benefit your skills in web and UI design. Let’s start with these answers for the top CSS questions asked by beginners today.
SVG files use mathematical formulas to create graphics, allowing infinite scaling without losing quality, and making them perfect for high-res displays and responsive design.
When you think of iconic brands, a few instantly come to mind: the golden arches of McDonald's, the sleek simplicity of Apple. These companies have mastered the art of brand identity, crafting visual and emotional connections with consumers worldwide.
From reducing human error to creating more harmony between teams, let’s explore the benefits of design tokens and why you might want to consider using them in your next project.
Learn how to use @font-face to embed custom fonts in your website. Includes practical examples, performance tips, browser compatibility, and common mistakes to avoid.
Discover 8 practical ways to design intuitive navigation that guides users effortlessly through your website or app. From clear labels to responsive layouts, these best practices will help you create smoother, more engaging user experiences — and avoid the pitfalls of confusing design.
This piece explains some of Penpot's relevant findings around AI and UI Design, what we’re building (and why) and what you should expect from us in the future.
By focusing on accessibility in UX design from the very first sketch of your app or site, you can get everyone thinking about the best way to serve every user. Find out how!
In this guide, we’ll walk through creating a token system that works intuitively for both designers and developers.
We read thousands of words on our mobile devices and computers daily, but not all of these words get the same attention. How do we decide which words to stop for?
In this comprehensive guide, we'll roll up our sleeves and get into exactly those steps, equipping you to confidently lay the groundwork for your first mobile app. Let's get building!
With Adobe XD only falling more out of date, you may be thinking about moving your files to a different design platform, such as Penpot. Designers making the switch to Penpot often find it a practical move, with low costs, flexibility, and long-term control benefits. However, there are a few
