At Specify, we aim to streamline the process of integrating design tokens into your Flutter codebase. Manual updates of design data can be tedious, but Specify automates this chore by pulling design data from Figma, formatting it, and distributing it to your project efficiently.
Pulling Data from a Specify Repository
We are set to pull design data from a Specify repository which will then be automatically converted and optimized for use in a Flutter project.
Prerequisites
To start the process:
- Create a Specify account.
- Ensure your design data from Figma is available in a Specify repository.
Using the Specify API
Specify offers multiple methods for accessing design data:
- The Specify REST API
- The Specify Command Line Interface (CLI)
- A native GitHub application
The CLI: A Path to Efficiency
For developers who prefer the terminal or are setting up a CI/CD pipeline, the Specify CLI is a powerful tool. A video tutorial is provided to walk through the process of using the CLI to generate design tokens and assets for Flutter.
Installation and Usage
You can install the Specify CLI with yarn:
yarn global add @specifyapp/cli
specify
Configuration for Flutter
Configuration is key to success with Specify. By setting up .specifyrc.json, you can customize the output to your project's requirements. This means your design tokens will be transformed into .dart files, and your icons and font files will be correctly converted and optimized.
Configuration Example
Here is an example of a configuration tailored for Flutter:
{
"repository": "@acme-inc/all-design-data",
"personalAccessToken": "YOUR_PERSONAL_ACCESS_TOKEN",
"rules": [
{
"name": "Design Tokens",
"path": "./output/styles",
"filter": {
"types": ["color", "measurement", "textStyle"]
},
"parsers": [
{
"name": "to-flutter",
"options": {
"formatByType": {
"color": {
"className": "Colors",
"fileName": "colors.dart",
"classType": "Color"
},
// More configurations for measurements and textStyle...
}
}
}
]
},
// Additional rules for vectors and font files...
]
}
Final Steps
- Finalize the configuration by specifying your repository and generating a personal access token.
- Use the
specify pullcommand to pull data from the repository.
Using Specify with GitHub
The GitHub application from Specify interacts directly with your repositories:
- Go to your Specify repository's Destinations page.
- Add a new destination.
- Select the GitHub app.
- Choose a template optimized for Flutter.
- Create and merge the Pull Request containing the updated design data.
Conclusion
We've explored how Specify can be used to synchronize design tokens and assets from Figma directly to our Flutter project, both locally via the CLI and through GitHub repositories. This integration ensures efficient, automated updates to design data, streamlining the development workflow.
Tags and Actions
- Synchronize design tokens and assets via Specify.
- Configure
.specifyrc.jsonfor automated updates. - Use Specify CLI for local updates.
- Set up Specify with GitHub for repository updates.
To get started, request the Flutter configuration template here.
