Specify: Synchronizing Design Tokens and Assets from Figma to a Flutter Project

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 pull command to pull data from the repository.

Using Specify with GitHub

The GitHub application from Specify interacts directly with your repositories:

  1. Go to your Specify repository's Destinations page.
  2. Add a new destination.
  3. Select the GitHub app.
  4. Choose a template optimized for Flutter.
  5. 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.json for 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.

https://specifyapp.com/blog/figma-to-flutter