Skip to main content
Question

Can CSS output contain all classes and properties for automated builds?

Rob4

Can anyone explain how to get Figma to output CSS that can be used unaltered in a build step to generate file(s) to send to the browser? I want this to prevent create a design twice, first in Figma, then in code.

To implement this I need Figma to:

  • include CSS class names in the export.
  • use CSS properties with relative units like ch, ex, %, vw and vh to set all sizes and distances.
  • use expressions as values, like for border sizes: calc(1px + .1ch) to shrink/grow the border with font size, but always have at least a 1 pixel border.
  • calculate colors, like a style with a fixed hue and saturation, and generate a set of shades with vary lightness. Preferable output as CSS variables.

As a software developer I might expect different things from Figma as designers. But nowadays in a project team everyone is a designer/analist/tester/programmer/sysadmin/etc…

K.ian
1 person likes this
  • K.ian
    K.ian

4 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • April 14, 2021

All of this is not possible, you need a different tool for this sort of thing. Maybe something like Webflow, Framer or, probably the closest one — Modulz.

K.ian
1 person likes this
  • K.ian
    K.ian
Rob4
  • Rob4
  • Author
  • 4 replies
  • April 14, 2021

Good to know, and thanks for the tips.

K.ian
1 person likes this
  • K.ian
    K.ian
Rob4
  • Rob4
  • Author
  • 4 replies
  • April 14, 2021

I’m curious to know how other users handle situations like:

  • describe values that require relative sizes or expressions
  • define variables and how they should be applied across element in the site
  • keep version changes of the design in sync with the site,
  • import CSS changes back into Figma

Or should I look at Figma as a tool to create clickable mockups?

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • April 15, 2021

Figma doesn’t have any tooling for these sort of things. You can probably partially achieve CSS export/import with plugins but not more. Figma is a visual design tool, and all of these things you are describing are more related to development. I think the tools that I mentioned above can achieve what you want. That is not to say Figma won’t have anything like this in the future, maybe it will, but at the moment this all is not possible.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings