How to sync design tokens from Figma to React Native

At Specify, we want to help you work better as a product team. As a developer, one of your jobs is to implement design tokens in your codebase. And let's face it, manually updating design data is cumbersome.

Specify helps you collect design data from Figma and distribute it in the right format, in the right project, at the right time, and to top it all: automatically.

Let's see how to synchronize design tokens and assets from Figma to a React Native project.

We will pull design data from the following Specify repository:

The Specify repository we'll pull our design data from.

We will generate the following files:

Prerequisites

Before anything else, please make sure you have:

1. created a Specify account

2. collected design data from Figma to a Specify repository

The Specify API

Specify is a Design API.

You can pull design data from Specify through:

• The Specify REST API

• The Specify CLI

• The Specify SDK

• Our native GitHub application

Using the CLI

The Specify CLI helps you get design tokens and assets from Specify right from the terminal or even in a CI/CD pipeline.

Installation

First of all, let's install the Specify CLI: yarn global add @specifyapp/cli.

Once the Specify CLI is installed, run the specify command. You should get the following menu:

Specify CLI menu

Configuration

Specify is flexible. It was designed to adapt to your needs and not the other way around. However you must configure Specify to get design tokens and assets that fit your needs.

We want:

• our design tokens to be pulled and transformed as a theme compatible with React Native

• our icons and our font files to be pulled, converted and optimized

First, let's create a .specifyrc.json Specify configuration inside our project folder.

Instead of writing our configuration manually, let's use our Configuration Template for React Native.

Finalizing the configuration

Our configuration is almost done but we still need to change a couple of things:

1. We must set the Specify repository we're pulling design data from. In our case we're pulling design data from the all-design-data-v2 repository created in the @acme-inc organization.

2. We must generate a new personal access token and set it in the personalAccessToken property

Need help to generate your personal access token? Check this article.

Our final configuration is:

{
  "version": "2",
  "repository": "@acme-inc/all-design-data-v2",
  "personalAccessToken": "90a657a01152401e5d381527dfe60ca0f90c9ffc151c51f07eafc3ff15a5bcc9",
  "rules": [
    {
      "name": "Generate tokens as a React Native theme",
      "parsers": [
        {
          "name": "convert-dimension",
          "options": {
            "toFormat": null
          }
        },
        {
          "name": "to-react-native",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate JSX components",
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        },
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}

This configuration is now ready to be executed.

Let's run it by executing: specify pull.

The pull command helps you pull design data from the Specify repository you set in the repository property of your configuration. It tells Specify to read and execute your configuration and so it can generate design tokens and assets in your project.

Using the GitHub app

The Specify GitHub app helps you distribute your design tokens and assets from your Specify repository to your GitHub repositories. Every change detected in your Specify repository creates a Pull Request in your GitHub repositories.

How to do this:

1. Head over to your Specify repository you want to pull design data from

2. Go to your repository Destinations page

3. Create a Destination

4. Select GitHub repository

5. Select your GitHub account and your GitHub repository

6. Set the path and the name of your configuration file

7. Create the Pull Request

8. Update the configuration file on GitHub with the React Native template for GitHub

9. Merge the Pull Request on GitHub

10. A new Pull Request containing your React Native theme and your JSX components is created 🎉

Let's sum things up

We've learned how to synchronize our design tokens and assets from Figma to our project.

We've used the React Native Configuration Template in two ways:

• with the Specify CLI to pull design data in a local directory

• with the Specify GitHub app to pull design data in our GitHub repository