Declarative design with Penpot

Declarative design means creating the rules your design should follow, instead of deciding exactly how it looks in every situation. This might seem like a radical way to do UI design, but it’s pragmatic in a world where we’re building products that have to work on so many devices and screen sizes. 

Declarative design helps us focus on the design intent rather than getting caught up in unrealistic pixel-precise renderings. And it helps designs translate so much better into code. You can read more on the declarative design approach compared to other approaches (with examples!) in What is declarative design and why is it the future?

But what has declarative design got to do with Penpot? As Pablo Ruiz-Múzquiz, Penpot’s CEO, wrote in his article on The missing ingredient in design tools: declarative design:

CSS has evolved to be a powerful declarative design language. Best of all, it’s ubiquitous. What if a design tool decided to express design concepts like alignment and layout using CSS as its foundational abstraction?

Penpot was created with declarative design in mind; it utilizes web standards, CSS properties and layouts so you can design as code, and your design looks exactly the same in the browser as it does in Penpot. Let’s have a look at the specifics.

CSS Grid and Flexbox

Penpot provides a visual way to design CSS Grid and Flexbox (Flex) layouts without needing to know the code. The properties (like direction, alignment, justification and flex-wrap!) are the same as CSS so your designs don’t just translate, you’re designing as code. You can even do complex grid layouts with cells spanning multiple columns and rows, and named grid areas.

Design tokens

Declarative design is a way to think in systems, creating rules and exceptions. Design tokens fit perfectly into these declarative systems. Giving names to reusable variables describes their design intent. Tokens can reference other tokens, creating interconnected systems where you can update multiple design decisions by changing a single value.

Design tokens use the Design Tokens Community Group (DTCG) format, an open standard created to work as code or in design.

Other CSS properties 

It’s not just layouts and tokens that are CSS in Penpot, each property in the Design panel maps directly to a CSS property or SVG object. Any Penpot user can open the Inspect tab to get the code for the element selected on the canvas.

The Styles and Computed options show the element’s relevant CSS properties in an easily readable (and copy-pastable) format. The Code option shows the element’s raw HTML, CSS, and SVG (great for vector shapes like icons).

Built to work with code

Penpot’s code is ready to use or build upon, you can create your own integration with Penpot’s API or Penpot’s MCP server (to connect Penpot to AI workflows), or use an existing Penpot plugin that provides the functionality you need. Here are a few of my favorite free Penpot plugins built for working with code:

Plugins for customizing code

If you want more customization or control over the code output, the following plugins are for you. They help you manipulate the code into your desired semantic structure or another framework:

Penpot Plugin | Semantic Tagger

An advanced plugin for Penpot that allows assigning semantic tags (HTML and UI components) to design elements, facilitating code export and collaboration between designers and developers.

Semantic TaggerKaleidos

Penpot Plugin | Code Layers

The open-source design platform for teams building digital products at scale.

Code LayersKaleidos

Penpot Plugin | Tailwind HTML

Generate Tailwind compatible HTML code from any layer.

Tailwind HTMLKaleidos

Penpot Plugin | Tailwind Styles

Use tailwind styles in your design. Add any tailwind color and text style in your library

Tailwind StylesKaleidos

Penpot Plugin | penpot2flutter

Transform your Penpot designs into Flutter code.

penpot2flutterKaleidos

Plugins for importing code

Want to bring an existing web-based design into Penpot? These plugins help you import HTML and CSS into Penpot with just a few clicks:

Penpot Plugin | HTML TO DESIGN

It convert a coded prototype or landing page into a Penpot design file for iteration - Import HTML email templates into Penpot for visual editing - Turn Tailwind CSS component libraries into reusable

HTML TO DESIGNKaleidos

Penpot Plugin | Ultimate HTML to Penpot

The open-source design platform for teams building digital products at scale.

Ultimate HTML to PenpotKaleidos

I find these particularly useful when I need to bring lots of text into Penpot!

Plugins for specific formats

There are also helper plugins for specific import and export tasks:

Penpot Plugin | DTCG Token Import

Import W3C DTCG (Design Tokens) files into a Penpot file as native token sets, in one click. Point it at any DTCG tokens JSON — for example the output of Mint’s `mint-ds export --target dtcg` — and it

DTCG Token ImportKaleidos

Penpot Plugin | Color styles to JSON file

Export your color styles and generate a JSON file in Penpot Design Tokens standard format. This file gives you a solid starting point for your color system - no need to recreate everything manually.

Color styles to JSON fileKaleidos

You can find even more plugins (as well as libraries and templates) on the Penpot Hub.

And, of course, you can create your own plugin to create an integration that does exactly what you and your team need. There’s loads of documentation on creating plugins in the Penpot user guide.

No more handoffs (please!)

Declarative design can really improve the process and relationship between design and development. Too often we’re faced with a “handoff,” where a designer throws a mockup at a developer, and a developer attempts to interpret it into code. The developer is irritated because the design choices are hard to translate into working code. The designer isn’t happy with the final output because it doesn’t look anything like their original design. There’s never enough time to iterate or collaborate on how to rectify this tension.

When designers use declarative design, it fits much better with coding practices, and takes advantage of the flexible medium of the web. It creates a shared language where no translation or handoff is needed.

With Penpot, developers get the unambiguous code they always wanted, and designers get their true design intent in the final product. Us designer-developers can work with a tool that reflects how we think in code. Nobody resents each other, collaboration gets faster, and everyone lives happily ever after. (Well, we can dream!)

Sign up for Penpot and start doing declarative design today.

Related Blogs

We’ve got plenty more articles and tutorials about Penpot, code, and UI design. Here are a few good places to start:

The developer’s guide to design tokens and CSS variables

Design tokens are a platform-agnostic representation of your design decisions, while CSS variables provide a way to implement these decisions in the browser.

Penpot BlogLaura Kalbag

The 5 best CSS frameworks (and why you should maybe go without)

What are the benefits of common CSS frameworks? We give you some reasons why you might want to consider designing in pure CSS.

Penpot BlogLaura Kalbag

How CSS and Media Query Breakpoints in Responsive Design

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

Penpot BlogLaura Kalbag