Search

Automate Figma Styles to code with zeroheight

Vinh
Vinh
  • Updated

Design tokens imported from Figma Styles can be automated so changes to your Figma file can be pushed code repositories on sync. This allows you to automate your Figma to code pipeline and speed up delivery of tokens from design to engineering.

https://youtu.be/d3dnrT5Cv4c

Creating your token set in zeroheight

You'll see your new token set in zeroheight and can now set up automation.

When using Figma styles, start in the tokens manager in zeroheight. Create a new token set and choose "Figma styles" from the list.

A list of different ways to bring design tokens into zeroheight

You can choose any existing Figma files you've added to zeroheight.

Before confirming, you take a look at the import results and ensure the tokens you expect are being imported.

You'll see your new token set in zeroheight and can now set up automation.

Token set list in zeroheight

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 at least one format and file path for each repo.

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 then able to review the suggested changes and merge them into the code base.

Your token set is now automated! The "Automated" badge on a token set signifies that any changes to Figma styles can be synced using the "Sync" button. This will trigger a PR to be created.

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 Figma styles?

In zeroheight on the automated token set, click "Sync". This will pull in the changes from Figma and create the PR automatically.

Why is isn't a PR being created when I update my Figma file?

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 clicked update.

Was this article helpful?