Standardizing the Design Systems by tokenization: Integrating designers and developers workflows.
Aren’t you tired of having to manually update every element of your UI design? Don’t you find it hard to maintain consistency across your designs? Wouldn’t you wish to insert your changes on the design straight into the code? If so, you may want to consider integrating design tokens into your workflow.
Tokens Studio for Figma is a new Figma plugin that allows you to integrate the so-called design tokens into your designs on Figma. These design tokens, or Figma Tokens, are small pieces of data that define the design elements of a user interface. Such design elements can be colors, typography, spacing, and many more.
There is a list of supported tokens that is increasing and increasing with every new release of the plugin. Some examples are:
- Colors and Opacity: Primary color, secondary color, text color, theme displays, or background color.
- Box Shadow: one or many, drop/inner.
- Sizing: Width and height.
- Border radius: All corners, individual, All corners, individual, border-width: All, Top, Right, Bottom and Left.
- Typography: Font family, font size, font weight or line height.
- Spacing: Margin, padding or auto-layout.
Let’s understand these design tokens with an example. Suppose that you are using a specific shade of blue for your primary button in one design, but a slightly different shade of blue for the primary button in another design. If that is the case, then your designs are neither consistent nor cohesive. This leaves your designs a step back towards standardization.
Before you start working with Ant Design System for Figma, make sure to activate the Tokens Studio for Figma (Figma Tokens) plugin so that you can access and customize the UI kit easily. To install the plugin, click on the Try it out button in the top right corner of the Figma Community file.
To set up your design tokens, start by identifying the elements that you want to standardize, such as typography, color, and spacing. Once you have identified these elements, you can define your design tokens.
The potential of the design tokens goes even further. What about sharing your design tokens with your team? That’s where design token tools like Amazon’s style dictionary and Theo come in.
These tools integrate with the Figma Token plugin to transcript the design into variables embedded in known code formats (css, scss, ts, js and json). This is very useful to standardize the design and to facilitate data sharing.
All the features available in the plugin will work with the free version. However, you should definitely check out the pro version because it allows GitHub branch switching.
You can even integrate your workflow with Github. In the Tokens Studio for Figma plugin, go to the Sync tab and enter the GitHub credentials. You can follow the process down below:
After saving, it should prompt you to push your tokens. Push your tokens. Make sure you don’t click “Create Pull Request”, GitHub Actions will do this automatically for you!
What’s more awesome is that due to Backlight’s GitHub integration, your poll request will get a comment with a link to a visual diff view so you can see your changes visually in the coded components.
The integration of Figma Tokens with Github is actually a very important feature of this plugin. In fact, it directly integrates the designer team with the dev team since every change implemented by the former can be inserted straight into the code without having to communicate with the latter. This feature saves a lot of time and eliminates the typical back-and-forth between both teams whenever a change in the design is made.
As we have seen, using design tokens has therefore multiple benefits. Some of them are:
- Consistency: Design tokens ensure consistency across your designs, making it easier to maintain and update your designs. Additionally, design tokens promote not only consistency but also cohesiveness in your designs, which can help improve the overall user experience.
- Time-saving: By using design tokens, you can eliminate the need to manually update every element of your design, saving you time and making the whole workflow more efficient.
- Collaboration: Design tokens facilitate collaboration among teams since it standardizes the set of elements. This promotes even more consistency and ensures that everyone has access to the same elements.
- Design Automation: Design tokens can be used to integrate components with production code and make the designer able to change variables from a simple synchronization in the design system.
The Figma Token Team is working to improve these features. They are very active and have many interesting ideas on progress. You can follow up their developments on their website:
As an overall conclusion, integrating design tokens into your workflow can unfold important advantages for us designers. As I mentioned in a previous article about AI in design, I foresee the same conclusion: these tools are very important to help us save time and money.
Finally, as a particular conclusion, I am personally thrilled about the Figma Tokens plugin and the Amazon’s Style Dictionary add-on. These tools are shortening the gap between designers and developers and are on the way to integrate efforts.
