2024
2023
Written by Andre Molnar 12/5/2024
figma
figma variables
design systesm
plugins
style dictionary
transform
Assumptions about a design system Well organized atomic design system Primitives, atoms, molecules, organisms, templates, pages Primitives are stored in Figma variables There are multiple layers of semantic variables that allow for easy theming All design decisions about a component have specific variables
You 'get' the power of design tokens You want to use the spec Token spec has lots of types There are good conventions for organizing core concepts like colors Some types have $values are objects with value and unit
Four types of variables Collections and groups You're going to have to export There's some tools like token studio - its worth looking into But, there may be some reasons why you can't use it and need to craft your own exporter API route - only if you have enterprise licenses Plugin route - full control, but it's finicky work Talk to your customer success reps Lots of good videos and stuff
Exporting to design token spec You have to do a bit of work to get things exactly to spec You can use tools like token studio - but it's export format doesn't seem to conform to the spec