Making Design Tokens A Single Source of Truth for Figma tool.
Figma Token Proposal an alternative to styles.
Updates 15th July 2020
Finally! able to lunch this idea as a plugin with the help of another developer Jan Six.
It’s open-source! Feel free to contribute and raise suggestions at https://github.com/six7/figma-tokens
The Problem
Most of the design systems tokens are in code JSON files or XML hidden away from designers.
Design tokens are an integral part of any design system. Figma styles are not enough to create all design tokens, Figma support Colors, Typography, Shadows, and grids styles.
Start with Figma styles why stop there! Go all the way to add all and integrated back into Figma properties.
- Colors
- Spacing
- Font Families
- Font Sizes
- Font Weights
- Line Heights
- Letter Spacings
- Z-Index
- Border Radius
- Border Widths
- Shadows
- Opacity
Mostly I am working on the design system with multiple designers, developers, and product managers, to share a single source of tokens is mandatory to create a solid base for the design system.
Embedding design decisions in code isn’t valuable if designers and developers don’t know what the decisions are and how to access them. — Nathan
Solution
Giving a design decision back to the designer
Figma Tokens a place where a designer can add tokens manually, and use these tokens as the value for all the properties throughout design files in Figma e.g., Fill, Auto Layout, Radius and more.
A merge between styles and custom token values, including spacing, radius, z-index, borders….
Making design tokens A single source of truth for designers and developers using Figma.
Proposal
Introducing the tab for Token in the right-side panel of Figma. A place to merge between styles and custom token values, giving styles a home aka Tokens.
These Tokens start showing up in all the properties.
All tokens will start showing as the values in related properties.
Automation
This could include the quick API link to export these tokens in JSON or XML, similar to Salesforce opensource tool Theo.
No more hacking a code to read vectors and layer names to extract values.
Please share your ideas to take this topic further. These all are my ideas for a proposal I believe they can be improved.
Figma is a great tool for collaboration for teams, Last year I moved my all teams to Figma the more I use it more I love it. Thanks to Figma Team 🙏🏻
Hopefully, you enjoyed reading this story, if not, let’s discuss! 🙏🏻
