JetBrains IDE Plugin

Flexible for Penpot: Penpot Design Tokens in Your IDE

Bring your Penpot design system into the IDE. Complete and inspect design tokens in CSS, SCSS and Less, browse components with their variants, and generate a stylesheet from the design.

Get It on Marketplace See pricing

IntelliJ IDEA · WebStorm · PhpStorm · PyCharm · + All JetBrains IDEs (2025.3 and newer). Completion, hover and inspections need CSS support, as in WebStorm or IntelliJ IDEA Ultimate.

Tokens: Completion, hover and inspections in CSS, SCSS and Less
Stylesheet: Generated CSS, Tailwind v4 theme or TypeScript
Linked: Source files tell you when the design changed

Token Completion and Hover

Use your Penpot tokens inside var(...) in CSS, SCSS and Less. Hover a token to see where it comes from.

Completion of Penpot tokens inside var(...)
Hover shows the resolved value, the alias chain, the token set and the value in each theme
A color swatch and a link to the Penpot file

Hover card on a color token in a CSS file with its value, token set and a link to the Penpot file

Inspections With Quick Fixes

The IDE tells you when a stylesheet and the design disagree. Each finding has a quick fix.

Hardcoded values: colors, spacing and radius values that match a token, with a fix to use var(...)
Drift: custom properties whose value differs from the Penpot token, with a fix to use the Penpot value
Removed tokens: var(...) references to tokens that were removed or renamed

Components and Variants

Browse the components of your Penpot library without leaving the IDE.

Folders, variant sets, a preview and a link to the component in Penpot
Variant pickers and the valid combinations
Variant properties as a list, TypeScript, JSON or attributes
Tokens used by a component or by all its variants

Penpot tool window with a text button component, variant pickers and the count of valid combinations

Code Linked to the Design

Link source files in Vue, React, Svelte, Angular, HTML and more to Penpot components. The links live in a file you can commit.

An editor banner with a link to the component and Copy CSS
A notice when the component changes in Penpot
An Implemented in list for each component, and suggestions for files named like a component

Vue button component with a Penpot banner above the code and the component panel with variants at the right

A Generated Stylesheet

Generate a stylesheet from the design with all themes.

CSS custom properties or SCSS variables
A Tailwind CSS v4 theme
Tokens as TypeScript
Component CSS from the Penpot shapes, with tokens as var(...) and variants as modifier classes

Generated penpot-tokens.css file with custom properties next to the token list in the Penpot tool window

Connect Your Penpot File

Works with design.penpot.app or your own Penpot server. Enter the Penpot URL and an access token, test the connection, then choose the team, project and files that hold your design tokens.