The short answer is “not yet”. But the long answer needs a bit of context.
Context
Penpot supports various CSS generation options tied to our Layout features. Since we use open standards (SVG/HTML/CSS) to render our design, it’s trivial for us to give you an exact CSS representation of the layout rules that apply to your design as well as any SVG code that you require.
Same design showing Flex Layout CSS (left) and standard CSS layout (right)
We now support CSS Grid on top of CSS Flex, and other CSS rendering methods will follow.
Going from a design artifact to its CSS representation is simple enough because you control the means of which that design artifact (ie: a board with multiple elements arranged in a particular way) is created. The design activity uses discrete Penpot options to produce a valid result, like padding input or alignment choices.
The other way round is tougher, though. Getting ANY CSS code and inferring a no-loss deterministic design representation would require processing the input and pushing it through a CSS rendering engine, like browsers have. We would need to work on a 1:1 representation between any CSS property and Penpot visual representation.
Answer to the question
Pasting code into Penpot is definitely something that would be supercool, but we need to understand the main use case for this. If the use case is “I prefer to directly edit CSS code for Flex Layout input rather than using Penpot UI” then we don’t see a very compelling use case given the complexity of the task.
For other use cases, we would like to listen to the community and understand what’s the ultimate goal for this, as well as the sacrifices they would be willing to take in exchange. This is a “live FAQ”, so please feel free to detail your use case so we can better gauge the benefits of having this.
Btw. on professional level in modern era of interface design, we don’t need everything generated by design tools. We (both designers and developers) need to understand more about how it works on both sides. Building (also both design and development) interfaces for decade, and I never use everything from generated code in Adobe XD, Sketch, Figma etc. Since this is really nice that you can copy and paste the whole code from design tools and it works, I think it’s not so much useful in most of the cases, because we use preselected variables, we have own system, we know how to define CSS and so on (I mean if you do it for a living).
Having something like code inspector, where I can see separated predefined styles like colors, typography, spacing, border radiuses, etc. is something where I see huge value. If design tool allow me define styles or layout properties like spacing (that are used across the design files), and then export e.g. in various formats (CSS, Sass, JSON etc.), then it starts to get quite interesting and no design tool has it yet. This transfers more responsibility to the designer, and the developer cannot then implement the designs incorrectly, because he simply has everything he needs.
Existing Design Systems, that run on SASS, LESS, or CSS could be incorporated into a library feature. The “Single Source of Truth”, for any Design System should live in the codebase/repo/NPM package itself, not in a design tool. Human error is introduced when a Dev tries to copy and paste hundreds of code snippets into their own SASS/LESS/CSS within the application codebase, and this removes governance.
On the other hand, if a CSS resource can be imported, and the Classes used within the GUI, this limits human error. Versioning becomes much easier as well, and would be comparable to an NPM package update that just “works”. If resource handoff is a priority for any enterprise team, this feature would be critical.
The Use Case I envision is this… I draw a square. Turn it into a component. Select a CSS “library” within s dropdown, and then apply classes to that portion of the component.
Eg. Class Field: [ abc-btn abc-btn—primary ]
The imported CSS styles the button in the Penpot interface, and matches what a Dev already has installed via NPM.
My use case for that is while using an AI tool to help me design. I want to get code (CSS/HTML) from an AI tool, import it in Penpot, and then be open to modify it graphicaly by my will or by code with suggestions from AI.
