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

Ask the community
1

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…

1 Like
2

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.

1 Like
3

Good to know, and thanks for the tips.

1 Like
4

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?

5

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.