Figma Variables to Dart #

Bring your Figma design system and Flutter app implementation closer together by generating Dart code directly from Figma API.

Which problem are we trying to solve? #

• Figma codegen plugins for Flutter/Dart are limited
• There's manual interaction with Figma UI required and it takes time on bigger projects
• No easy way to detect which variables changed/updated without manual inspection

Installation #

dev_dependencies:
  figma_vars_to_dart: ^0.2.0 

or

flutter pub add figma_vars_to_dart --dev

Commands #

• Figma Variables
• Downloading Images

Usage #

Create the token #

In order to interact with Figma API you will need a personal access token. To create this token you can follow this figma tutorial.

Figma Variables #

Make sure your Figma project uses variables.

Run the command

dart run figma_vars_to_dart generate \
	 --token $FIGMA_TOKEN \
	 --fileId $YOUR_FIGMA_FILE_ID \ # you can find this string value in your file URL
	 --dartOutputFolder lib/shared/ui_constants \
	 --jsonOutputFile vars.json 

Use the code

import 'package:flutter/widgets.dart';

class ColorPrimitives {
  final Color white;
  final Color pink;
  final Color green;
  final Color black;
  final Color blue;

  ColorPrimitives({
    required this.white,
    required this.pink,
    required this.green,
    required this.black,
    required this.blue,
  });

  factory ColorPrimitives.value() => ColorPrimitives(
        white: const Color(0xFFF2ECEC),
        pink: const Color(0xFFDD006A),
        green: const Color(0xFF8CC93E),
        black: const Color(0xFF2C2C2C),
        blue: const Color(0xFF3000F2),
      );
}

import 'package:flutter/widgets.dart';
import 'ui_constants.dart';

class ColorSemantics {
  final Color background;
  final Color buttonPrimary;

  ColorSemantics({
    required this.background,
    required this.buttonPrimary,
  });

  factory ColorSemantics.light(ColorPrimitives colorPrimitives) =>
      ColorSemantics(
        background: colorPrimitives.white,
        buttonPrimary: colorPrimitives.blue,
      );

  factory ColorSemantics.dark(ColorPrimitives colorPrimitives) =>
      ColorSemantics(
        background: colorPrimitives.black,
        buttonPrimary: colorPrimitives.green,
      );
}

export 'color_primitives.dart';
export 'color_semantics.dart';

You can use any state management you prefer to provide these values to your widgets.

Example

See the example for more information.

Downloading Images #

To use the download-images feature, create sections for specific use cases. Each section name must follow the format APP_ASSET_$section, where $section represents the use case. Then, add the images you want to download and convert them into components.

Run the command

dart pub figma_vars_to_dart download-images \
	 --token $FIGMA_TOKEN \
	 --fileId $YOUR_FIGMA_FILE_ID 

Arguments

Downloading Icons #

To use the download-icons feature, create frames for specific use cases. Each frame should be named using the format APP_ASSET_$frame, where $frame represents the use case. Icons must be defined as components and can be organized within nested frames. Variants of icons are also supported.

Run the command

dart pub figma_vars_to_dart download-icons \
	 --token $FIGMA_TOKEN \
	 --fileId $YOUR_FIGMA_FILE_ID 

Arguments

Contributing #

Contributions are welcome! If you encounter issues, have feature suggestions, or want to improve the package, feel free to open an issue or submit a pull request. Please read our Contribution Guidelines for more information.

License #

This project is licensed under the MIT License.