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!
