aloisdeniel / style-dictionary-figma-flutter

Custom style-dictionary transforms and formats to generate Flutter resources from a Figma Design Token plugin export..

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 :

The output .dart files ares also included :

About

Custom style-dictionary transforms and formats to generate Flutter resources from a Figma Design Token plugin export..

License:MIT License


Languages

Language:Dart 54.2%Language:C++ 17.5%Language:JavaScript 13.7%Language:CMake 8.3%Language:HTML 4.1%Language:Swift 1.2%Language:C 0.8%Language:Kotlin 0.1%Language:Shell 0.1%Language:Objective-C 0.0%