Skip to main content

Does anyone have a good CSS export pipeline for text styles (i.e. plugins, Figma document setup, custom code/scripts)? I’d like to use Figma to export some particular CSS for our web projects, but our designers have tried a number of plugins and the export always seems to leave something to be desired. 

The two things we’d like to be able to export - before anything else - is variables and text styles.

Our variable export pipeline is now usable: we post-process Figma’s output to combine files from the format ‘Variables > Mode > Category.css’ into a single root CSS with a fair number of vars for colours, spacers, and a few other things.

But when it comes to Text Styles:

  • the color isn’t output
  • the font weight is outright wrong (always weight 400, when the text style pane has a different weight defined in the ‘Variable’ subpane)
  • uppercase/all-caps isn’t honoured (i.e. text-transform uppercase is not present in the export CSS)

We have a setup where we export a number of text styles that become CSS classes, e.g. heading-1, heading-2, body-1, body-2, uppercase-1, eyebrow-1. These are almost totally usable as CSS; we do post-process them slightly to combine xs-sm-md-lg variants of each, using mixins to tie them to breakpoints. But with some vital CSS rules missing, we’d still need to hand-pick those from Figma and add them to these files, which disrupts automation quality and re-introduces margin for error.

 

Thanks!

Does anyone have a good CSS export pipeline for text styles (i.e. plugins, Figma document setup, custom code/scripts)? I’d like to use Figma to export some particular CSS for our web projects, but our designers have tried a number of plugins and the export always seems to leave something to be desired. 

The two things we’d like to be able to export - before anything else - is variables and text styles.

Our variable export pipeline is now usable: we post-process Figma’s output to combine files from the format ‘Variables > Mode > Category.css’ into a single root CSS with a fair number of vars for colours, spacers, and a few other things.

But when it comes to Text Styles:

  • the color isn’t output
  • the font weight is outright wrong (always weight 400, when the text style pane has a different weight defined in the ‘Variable’ subpane)
  • uppercase/all-caps isn’t honoured (i.e. text-transform uppercase is not present in the export CSS)

We have a setup where we export a number of text styles that become CSS classes, e.g. heading-1, heading-2, body-1, body-2, uppercase-1, eyebrow-1. These are almost totally usable as CSS; we do post-process them slightly to combine xs-sm-md-lg variants of each, using mixins to tie them to breakpoints. But with some vital CSS rules missing, we’d still need to hand-pick those from Figma and add them to these files, which disrupts automation quality and re-introduces margin for error.

 

Thanks!