Define updated Figma variables structure for expanded design token architecture
Problem to solve
We are defining more types of design token to improve support for existing initiatives, and extend support to new consumers.
Design tokens in Figma are have unique collections and modes taxonomy for optimum consumer experience and to enable desired functionality.
New and existing design tokens need to be mapped to a new taxonomy in Figma to maintain parity with our SSOT.
To date we've identified the following new design tokens:
- Spacing (margins, paddings, gaps, and so on)
- Typography (font size, weight, line height, and so on)
- Shape (border radius, height, width, and so on)
And the new paradigms to support in Figma:
- Container/viewport width
These should work alongside the existing Mode: light|dark collection, and be forward thinking for any user or system defined density changes.
Outcome
This issue should define the desired variable structure in Figma.
The outcome should be based in what we think is achievable, but is not required to figure out 'how'.