Implementing Design Tokens from Figma to React Native using Specify

Overview

Specify simplifies the way product teams work by automating the updating of design data, such as syncing design tokens and assets from Figma to React Native projects.

Prerequisites

Before proceeding, ensure you have:

  • Created a Specify account
  • Collected design data from Figma into a Specify repository

Specify's Functionality

Specify acts as a Design API that offers three main avenues for pulling design data:

  • Specify REST API
  • Specify CLI
  • Specify GitHub Application

Using the CLI

The Specify CLI allows for the extraction of design tokens and assets straight from your terminal or within a CI/CD pipeline.

Installation and Initialization

To implement the CLI, you must first install it using yarn and then initiate the configuration:

yarn global add @specifyapp/cli
specify init

Configuration Steps

Adjust the configuration to fulfill specific requirements, such as transforming design tokens into CSS Custom Properties, converting icons, and optimizing font files.

Sample Configuration for React Native

Here is a .specifyrc.json example that demonstrates how to configure Specify for a React Native project:

{
  "repository": "@acme-inc/all-design-data",
  "personalAccessToken": "YOUR_ACCESS_TOKEN",
  "rules": [
    {
      "name": "Design Tokens / Generate theme",
      "path": "./output/theme.ts",
      "filter": {"types": ["vector", "color", "font", "textStyle"]},
      "parsers": [{"name": "to-react-native", "options": {"colorFormat": "hex", "assetsFolderPath": {"vector": "assets/vector"}}}]
    },
    // ... additional rules for assets like vectors and fonts
  ]
}

Replace YOUR_ACCESS_TOKEN with your actual token generated from the Specify repository.

Executing the Configuration

After finalizing the configuration, run the specify pull command to pull the repository data:

specify pull

Using the GitHub App

The Specify GitHub app automates the distribution of design tokens and assets by creating a Pull Request directly in your GitHub repositories whenever updates occur in your Specify repository.

Setup and Pull Request Creation

Setup entails adding a destination in your Specify repository and selecting the "React Native" template to integrate with a GitHub account and repository. Following that, a Pull Request is created automatically.

Conclusion

By utilizing Specify's tools, either through the CLI or GitHub app, developers can efficiently integrate and manage design tokens and assets in React Native projects, streamlining the development process and fostering team collaboration.

Tags: #ReactNative #Specify #DesignTokens #FigmaIntegration

https://specifyapp.com/blog/figma-to-react-native