style-dictionary-figma-flutter

style-dictionary-figma-flutter

An extension to style-dictionary to support more custom types with Flutter as target platform. It supports the custom types from Figma's Design Token plugin.

It is an alternative to design-token-transformer package which doesn't offer great output for Flutter.

Generated dart classes :

• Data classes for types (colors, text styles, border radiuses, edge insets, sizes, breakpoints, icons)
• Theme inherited widget
• Base widgets (Text, Padding, Icon)
• Gallery widget with all styles

Usage

$ npm install -g style-dictionary-figma-flutter

Define a config.json file for your project :

{
    "source": [
        "design/**/*.json"
    ],
    "platforms": {
        "flutter": {
            "transformGroup": "figma-flutter",
            "buildPath": "./lib/",
            "files": [
                {
                    "destination": "theme/theme.g.dart",
                    "format": "flutter/theme/theme.dart",
                    "prefix": "App"
                },
                {
                    "destination": "theme/data.g.dart",
                    "format": "flutter/theme/data.dart",
                    "prefix": "App"
                },
                {
                    "destination": "theme/widgets.g.dart",
                    "format": "flutter/theme/widgets.dart",
                    "prefix": "App"
                },
                {
                    "destination": "theme/gallery.g.dart",
                    "format": "flutter/theme/gallery.dart",
                    "prefix": "App"
                }
            ]
        }
    }
}

Run the program:

$ style-dictionary-figma-flutter

Supported types

• color
• dimension
• custom-radius
• custom-spacing
• custom-fontStyle
• custom-icon

Example

A full example is available in the example directory.

The input files are :

• config.json
• design-tokens-example.json

The output .dart files ares also included :

• data.g.dart
• theme.g.dart
• widgets.g.dart
• gallery.g.dart