Managing Design Tokens with The Design Tokens Extractor for Figma API
Presenting a possibility to add design token management to your already existing tool chain
We, at Team Sketch2React, have created a design API that share the same design token engine, The Tropos Engine, as our popular Stratos Tokens App.
The design token engine is the core part of Stratos Tokens App that handles the extraction of design token data from your design documents.
Patience… the examples are further down in this article. You will not leave empty-handed ✨
We have been thinking for a long time about how we could somehow make the Tropos Engine stand-alone. Then it dawned on us! Let’s wrap the engine in a design API.
Because if we could make the design token engine stand-alone we could use it to add design token management to our automated workflows.
And if we could, then we guessed others would like to as well, given the opportunity.
This API is what we call the Design Tokens Extractor for Figma!
It became a design API that is universally compatible with all design token setups — Wether it’s your own structure or “standards” like MaterialUI theming, CSS-in-JS (like styled-components), Style Dictionary or Theo.
The Pros
Documentation
Since our design API is based on the same core functionality as the Stratos Tokens App every document, demo and tutorial made for Stratos Tokens App is applicable to our design api(!).
A great place to start is here:
No transformation, only extraction
Since our API “only” acts as a middle-man, extracting and returning what’s already setup in your design document, you get a 1:1 representation between you design document structure and the json data response from the tokens extractor api.
Then it’s up to you how you use that data. Maybe as input to Style Dictionary or as a theme for Material UI. Or if styled-components is more of your style. Go nuts! The sky and your imagination are the limits.
Build your own design token UI(!)
You could even go as far as to use our design API to build your own design tokens visualization.
It is freemium
You can try it out for free!
The Cons
Two step process
Since you only add Figma access token and document id to the API request, the request to retrieve your Figma document data is done by the design token extractor API before the design tokens can be extracted. This give additional latency since it’s actually a two-step process behind the scenes.
Great news!
We’ve actually solved that problem for you by adding the possibility to pass design data as an extra request parameter. This makes it possible for you to call Figma’s API and then, as a second step, use that data as payload for the request to the tokens extractor API.
Enough talking, show me the examples already!
Basic example
Advanced example
In this example we’re calling the Figma API locally and, as a second step, we call the design API. (I don’t know why I use both axios and fetch… I was probably very tired).
YouTube example
Listen to Juan from Team Sketch2React as he gives you an introduction to our API.
Implementing the design API in your own project
There are multiple ways you could implement our design API in your project.
You could for example add design token synchronization to your package.json by doing these two steps:
- Create a file such as the one shown in the previous section and give it a nice name e.g. design-token-sync.js. (This file calls The Design Tokens Extractor for Figma API and processes the response design token data)
- Add a new script to your package.json
“sync-design-tokens”: “node sync-design-tokens.js”
And there you go!
Integrate The Design Tokens Extractor for Figma API into an Azure pipeline
Since Azure pipelines has support for running npm commands you could add design token management as a task in your Azure pipeline. More documentation about how to add npm commands in Azure pipelines can be found here.
Demo files to get you started
Basic Design Token demo
Stratos Quick Start Guide which you can Download for free here.
MaterialUI Theming
Material UI Design Tokens Demo which you can Download for free here.
Style Dictionary input format
Styling React Demo which you can Download for free here.
All downloadable documents are in Sketch-format, but you can easily import them into Figma.
Further reading and watching
Written goodies about Stratos Tokens
YouTube playlist
A playlist containing all of our video tutorials about Stratos Tokens.
Summary
With The Design Tokens Extractor for Figma API you can extract design token data from your Figma design documents. The API is a wrapper for the Tropos engine. The Tropos Engine also powers our Stratos Tokens App.
The easiest way to test the Design Token Extractor API is at RadpidAPI. There you can test the API from within your browser.
And best of all — It’s freemium! So get started today!
Thanks for reading!
Fredrik
Team Sketch2React
