figma_flutter_token_mapper

Description:

figma flutter token mapper

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"
]
}
}
copied to clipboard
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>
copied to clipboard
Default config values:
--input: ./design/tokens.json
--output: ./lib/assets/tokens/
copied to clipboard
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>
copied to clipboard
Default config values:
--input: ./design/tokens
--output: ./lib/assets/tokens/
copied to clipboard
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.