Making Design Tokens for Figma Tool
Figma Token Proposal an alternative to styles. 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 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. 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. An example of spacing tokens All tokens will start showing as the values in related properties. Radius token as values Opacity token as values 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! 🙏🏻 » Read More
Like to keep reading?
This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.