figma2flutter 0.0.3-alpha

This package converts Tokens Studio for Figma json exports into Flutter code.

This package converts Tokens Studio for Figma json exports into Flutter code.

[Notice] You may use this package but breaking changes may occur when relying on releases lower than v1.0.0

How to use

1. Install

dart pub global activate figma2flutter

2. Export

Export your tokens from Figma and save the json file in your project folder.

You can do this manually or use the Tokens Studio for Figma plugin to export your tokens directly into your repository.

3. Generate

Run the command in the root of your project

figma2flutter --input <path_to_json_file> --output <path_to_output_folder>

Default config values are:

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

Token support (checked = supported)

Overview of all tokens available here

• sizing
• ✅ spacing (output = EdgeInsets)
  • ✅ 1, 2, 3 or 4 values
  • ✅ accept int/double values, px of rem suffix
• color
  • ✅ Solid (output = Color)
    • ✅ hex
    • ✅ rgb
    • ✅ rgba
    • ✅ hsla
  • Gradients
• ✅ borderRadius (output = BorderRadius)
  • ✅ 1 value all corners
  • ✅ 2 values = topLeft + bottomRight | topRight + bottomLeft
  • ✅ 3 values = This will apply topLeft | topRight + bottomLeft | bottomRight
  • ✅ 4 values = This will apply topLeft | topRight | bottomRight | bottomLeft
• boxShadow
• ✅ typography (output = TextStyle)
  • ✅ fontFamily
  • ✅ fontWeights
  • ✅ fontSize
  • ✅ lineHeight
  • ✅ letterSpacing
  • paragraphSpacing (ignored, not a TextStyle property)
  • textCase (ignored, not a TextStyle property)
  • textDecoration (ignored, not a TextStyle property)
• asset
• composition (pro)
• ✅ dimension (output = has no output, but is correctly used in references)
  • ✅ opacity
• border
  • borderWidth

Ideas for contributing

• ✅ Generate MaterialColors when we have multiple color values and int base keys (100, 200, 300, 400)
• Add an example that illustrates how to use the package
• Generate a view similar to the Figma plugin (sort of a tokens Gallery)
• Generate extensions for Gap to easily allow spacing tokens to be used as Gap (spacing.small=4 => Gap.small => const Gap(4))