figma2flutter 0.0.4-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 (see below)
• ✅ dimension (output = has no output, but is correctly used in references)
  • ✅ opacity
• ✅ border
  • ✅ borderWidth
  • ✅ color
  • ✅ style
    • ✅ solid
    • dashed (not natively supported by Flutter)

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,
  border: Border,
  borderRadius: BorderRadius,
  itemSpacing: double,
  opacity: double,
  boxShadows: List<BoxShadow>,
  textStyle: TextStyle,
  padding: EdgeInsets,
)

Composition support:

• ✅ sizing
  • ✅ width
  • ✅ height
• ✅ spacing
  • ✅ verticalPadding
  • ✅ horizontalPadding
  • ✅ paddingTop
  • ✅ paddingRight
  • ✅ paddingBottom
  • ✅ paddingLeft
• ✅ fill
• ✅ itemSpacing
• 🚫 backgroundBlur
• ✅ 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)

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 an example that illustrates how to use the package
• 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))