Get your variables
Token export
made a breeze
The Figma Token Export Tool is intended to make the process of exporting Figma variables a breeze. No need to give access to your design files to developers, just setup an access token, provide the file ID and they can grab all of your design tokens through this lightweight web-app in CSS, SASS and other formats.
Concept
With the advent of variables in Figma, design systems have reached new heights. Design tokens enable us to create flexible artefacts, and with the use of variable modes, creating multi-brand design systems become more maintainable. Tokens help bridge the gap between the transition of turning a design into working code. The ability to sync these tokens in your design tool and front-end is crucial.
Currently designers have to use third-party plugins to export design tokens for hand-off. However, these plugins don’t cover all use cases. The intention of creating this online tool is to make the process of exporting Figma variables a breeze, covering those features the plugins fall short of.
Features
- Get Figma tokens by providing file ID and access token
- Select collection
- Select modes/themes
- Select syntax: CSS, SASS and more
- Select naming convention if using “Code Syntax”
- Select pixel or REM units
- Export all variables in table
- Export individual variables by row
- Search variables table
- Sort variables table
- Show custom variable name if using “Code Syntax”
- Download all variables in selected syntax
- Download individual variables in selected syntax
FAQ
What Figma plan do I need to use this tool?
This application takes advantage of Figma Variables REST API – you need to have an ENTERPRISE subscription plan in order to use it. Only ENTERPRISE plans give you the option to create a Personal Access Token for variables, which is required to connect to your Figma file.
How can I make use of this tool if I don’t have an Enterprise subscription?
If you don’t have a Figma ENTERPRISE plan subscription, we recommend you use our free Figma plugin: Figma Token Exporter.
What is the benefit of this tool over the Figma plugin?
The benefit of using this online tool over the Figma plugin we provide is that to use a plugin e.g. for a developer, they would need a Figma seat, which costs $12-35/mo for every developer involved on the project depending on your orginization’s Figma plan. This tool does not require developers to have a paid seat, with one subscription, anyone from the development team can access your design system’s tokens.
This tool takes advantage of Figma’s REST API to retrieve your design tokens. However the REST API is currently only available to users on the Enterprise plan. Since you need to provide your file ID and a Personal Access Token (PAT) with read-only permissions for variables, setting up a PAT is only possible if you have an Enterprise subscription.
We are planning on introducing a new feature to our Figma Token Exporter plugin to bridge this gap and enable external access to your design tokens through our service. By using the plugin, you will be able to sync your tokens manually to your Figma-tokens.com account, and from there open access to them via our own API.
How do I create a Personal Access Token (PAT)?
Personal access tokens allow you to grant access to your data through the Figma API. Some third-party integrations and plugins require a personal access token so that they can be authorized to access your data within Figma.
A personal access token can only be used for a single integration. You must generate a new personal access token for every integration you configure.
Generate a personal access token
- From the file browser, click the account menu in the top-left corner and select Settings
- Scroll to the Personal access tokens section
- Enter a name for your new token and press Return / Enter
- Copy the token that is generated
Where do I find my file ID?
Each Figma file has a unique URL containing its ID. The file ID is the string of random alphanumeric characters found in the section of the URL after https://figma.com/file/.