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