figma_flutter_token_mapper 0.1.0

CLI tool for automatic converting figma tokens into flutter code.

figma_flutter_token_mapper

CLI tool for automatic converting Tokens Studio for Figma into Flutter code

How to use

1. Export

Export your tokens from figma using Tokens Studio for Figma and save the json file in your project folder.

2. Adjust the json file (optional)

If you don't have pro version of Tokens Studio for Figma, but you want to use themes, you can adjust the json file manually. You have to have semantic tokens for each theme you want to use. See $metadata section on the example below. Then you have to add the theme names to the $themes array and set the selectedTokenSets for each theme.

{
  "$themes": [
    {
      "name": "light",
      "selectedTokenSets": {
        "primitives/Value": "enabled",
        "semantic/light": "enabled"
      }
    },
    {
      "name": "dark",
      "selectedTokenSets": {
        "primitives/Value": "enabled",
        "semantic/dark": "enabled"
      }
    }
  ],
  "$metadata": {
    "tokenSetOrder": [
      "primitives/Value",
      "semantic/light",
      "semantic/dark"
    ]
  }
}

Note that first theme in the $themes array will write colors as primaryAppColors constants and second as secondaryAppColors constants.

3. Generate flutter code

The figma_flutter_token_mapper tool allows you to integrate design tokens into your Flutter project, supporting both single JSON files and directories containing multiple JSON files.

Using a Single JSON Design Token File

When you have a single JSON file containing $metadata, $theme, and definitions, execute the following command in your project root:

dart run figma_flutter_token_mapper --input <path_to_json_file> --output <path_to_output_folder>

Default config values:

--input: ./design/tokens.json
--output: ./lib/assets/tokens/

Using a Directory of JSON Design Token Files

For projects using multiple JSON files, ensure your input directory includes a $metadata file and a $themes file, alongside the token files. Run the following command from your project's root directory:

Run the command in the root of your project

dart run figma_flutter_token_mapper --input <path_to_json_folder> --output <path_to_output_folder>

Default config values:

--input: ./design/tokens
--output: ./lib/assets/tokens/

4. Use the generated code

The tool will generate a file with the name app_colors.g.dart in the output folder for the colors. There you'll find primaryAppColors constants for first theme and secondaryAppColors for second theme constants with the colors from the figma file.

Also you'll get a file with the name app_typography.g.dart in the output folder for the text styles. There you'll find your TextStyles constant with the styles from the figma file.