Design tokens in Figma — Source of truth for Design and Development
Today we are exploring the idea to use Figma as the source of truth for the design and development activities with the help of design tokens. Design tokens are an integral part of any design system and a very important part of the product. It helps to keep the design consistent and solid.
A note before we start: This solution which we are going to discuss here is NOT APPLICABLE to every use case. For short-term projects where we have to just build a small application means this solution is not recommended. This solution will help the team on long-term projects where we have to build a Design Language System (DLS) and different client applications have to consume the same DLS. Setting up design tokens in Figma and consuming into on the application is a time-consuming process and there is a learning curve as well.
In most of the development projects, the design handoff happens in a way that the design team will share the sketch or Figma files with the development team and they will start extracting the various properties like colors, font size, spacing, etc, and build components with all these common properties. But with this solution, once the design team has done with changes on Figma and after saving it will immediately reflect on the application!
Before discussing the solution, I would like to share about a popular tech stack that is currently been used for DLS development.
So for building the DLS we can use a framework called StencilJS along with a storybook. The web components which we are building can be consumed into client applications on any framework like Angular, Vue, or UI library like React JS.
Now let’s discuss the solution step by step:
1. To enable the Figma to generate design tokens we have to install the plugin called design token: Link
2. The next part is creating design tokens in Figma. This is not an easy one and has learning curves. You have to follow this documentation for creating design tokens: Link. Also, this is a sample Figma file with design tokens created. Link.
3. Post successful creation of the design tokens there are many ways we can export the token to developers. One simple way is directly exporting as JSON. An example for the token is — font-headline-3-font-weight: 500; and the developer will consume it on the CSS like:
font-weight: var( — font-headline-3-font-weight);. Another one is an automated way where we will be sending these design tokens to a server or GitHub and from there to the client application.
4. For the automated way, you have to configure your server or GitHub details on the Figma plugin. Post that the plugin has an option to export this to the server. That’s it! Few services will be running in the background which will push the latest design tokens into the application.
5. What is happening in the background for the automated one is, Figma will send all design tokens to the server and replace the old design token file with the new one. One problem here is any mistake on the design file will directly push into the production. To avoid this and to have better standards instead of directly pushing the changes to production, there are provisions where the development team can be notified when a new version of the design token is available and they can push the changes to the application.
That’s it! even though we tried to cover the key elements of the solution in just 5 points, it’s much more than that. The solution is also kept on evolving and we are also exploring the possibilities of this in-depth. Happy to share my explorations and feel free to correct it.
Happy Reading!
