Search

Automate Figma Variables to code with zeroheight

Vinh
Vinh
  • Updated

Design tokens imported from Figma Variables can be setup to automatically push changes to code repositories when changes are made. This allows you to automate your Figma to code pipeline and speed up delivery of tokens from design to engineering.

 

Creating your token set in zeroheight

To sync your variables with zeroheight, install the zeroheight variables sync plugin for Figma. This allows you to push your token set from the plugin and keep zeroheight up to date.

Using the zeroheight plugin with Figma variables
Sending Figma variables to zeroheight using the items sync plugin

Once the token set has been created, you can follow the "Open in zeroheight" link to view the token set in zeroheight.

 

Click "Set up automation" to get started.

A token set in zeroheight tokens manager

 

Setup automation

Setting up automation from zeroheight requires access to a hosted git provider. zeroheight support a number of integrations like GitHub Bitbucket, GitLab or Azure DevOps.

Choose from a repo connected to zeroheight. If you don't have any repos in the list, you can choose "Connect more repos".

Git provider selection screen

Once you've chosen one or more repos, you'll be asked for a directory/folder path for each repo. You are able to chose what format you want to export the tokens in, and are also able to export in multiple formats to one repo.

If you would like to create tokens in the root directory of the repository, enter . as the Folder path.

zeroheight will create a pull request (or merge request for GitLab) for each of the output repos.

You can see the resulting pull/merge request by clicking on the "View pull request" link. Below is an example of a pull request created on GitHub against a repo. The description includes information about the tokens.

 

Engineers are now able to review the tokens being imported and merge them into their codebase.

Your token set is now automated! The "Automated" badge on a token set signifies that any changes to the variables can be synced and will subsequently create a PR for each change.

 

FAQ

How do I make changes to my automation?

You can find the instructions on how to do that here.

 

Which repository services do you support?

We integrate with the following:

You can setup multiple providers at once with zeroheight and tokens automation supports output to multiple repos from different providers.

 

Do I need to have my repos connected to zeroheight?

Yes. In order to create a pull request in a repository, zeroheight needs access to that repository.

 

How do I make a new pull request when I change my variables in Figma?

Once a token set is automated, any changes made to your variables in Figma must be pushed to zeroheight using the variables sync plugin. A PR will then be created automatically.

 

Why is isn't a PR being created when I sync variable changes?

Ensure you have both Figma and your git provider account connected to zeroheight and you have the correct permissions for the git provider. You must have a access to the repo in question to create the PR, zeroheight will use the credentials for the editor who initiated the sync to zeroheight via the plugin.

 

 

Was this article helpful?