Style-dictionary-figma-flutter NPM

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: