figma2flutter 0.0.6-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
  • ✅ dropShadow
  • innerShadow (not supported but PRs's are welcome)
  • ✅ single shadow
  • ✅ list of shadows
• ✅ 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 no support
• ✅ composition (see below)
• ✅ dimension (output = has no output, but is correctly used in references)
  • ✅ opacity
• ✅ border
  • ✅ borderWidth
  • ✅ color
  • ✅ style
    • ✅ solid
    • dashed (not supported but PRs's are welcome)

Math support

Tokens Studio supports math operations on tokens. This package supports the following math operations:

• math operations
  • 🚫 add
  • 🚫 subtract
  • 🚫 multiply
  • 🚫 divide

Modify support

Tokens Studio supports modifying tokens. This package supports the following modify operations:

• color
  • 🚫 lighten
  • 🚫 darken
  • 🚫 mix
  • ✅ alpha

Composition support

We are currently working on supporting the composition tokens. This will allow you to create custom widgets that can be used in your app. When generating code from tokens, all composition tokens will be exposed as a dart class. Using the Composition widget that will be added to you app you can then use these tokens in your app.

For example with a card composition token you can create the following widget:

Composition(
  token: Tokens.composition.card,
  axis: Axis.vertical,
  children: [
    Text('Title'),
    ...
  ],
)

And a generated composition token will look like this:

CompositionToken(
  size: Size,
  fill: Color,
  gradient: LinearGradient,
  border: Border,
  borderRadius: BorderRadius,
  itemSpacing: double,
  opacity: double,
  boxShadow: List<BoxShadow>,
  textStyle: TextStyle,
  padding: EdgeInsets,
)

Composition support:

• ✅ sizing
  • ✅ width
  • ✅ height
• ✅ spacing
  • ✅ verticalPadding
  • ✅ horizontalPadding
  • ✅ paddingTop
  • ✅ paddingRight
  • ✅ paddingBottom
  • ✅ paddingLeft
• ✅ fill (1 of 2 options must be set, but not both. If both are set, gradient will be used)
  • ✅ solid
  • ✅ gradient
• ✅ itemSpacing
• backgroundBlur (not supported but PRs's are welcome)
• ✅ border (All)
  • ✅ borderTop
  • ✅ borderRight
  • ✅ borderBottom
  • ✅ borderLeft
  • ✅ borderColor
  • ✅ borderWidth (All)
    • ✅ borderWidthTop
    • ✅ borderWidthRight
    • ✅ borderWidthBottom
    • ✅ borderWidthLeft
• ✅ borderRadius
  • ✅ borderRadiusTopLeft
  • ✅ borderRadiusTopRight
  • ✅ borderRadiusBottomRight
  • ✅ borderRadiusBottomLeft
• ✅ boxShadow
• ✅ opacity
• ✅ typography
  • ✅ fontFamilies
  • ✅ fontWeights
  • ✅ fontSizes
  • ✅ lineHeights
  • ✅ letterSpacing

Realised feature ideas

• ✅ 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 (see /example folder and /example/bin/update-tokens.sh)

Ideas for contributing

• Generate a Theme.TextTheme with all tokens that match the material3 spec. This would allow us to use the tokens as a theme for the whole app.
• Add example json to the repo that makes it easy to start with the package and Figmas Tokens Studio plugin
• Generate a view similar to the Figma plugin (sort of a tokens Gallery/Storybook)
• Generate extensions for Gap to easily allow spacing tokens to be used as Gap (spacing.small=4 => Gap.small => const Gap(4))