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

Use cases:

• Light / dark mode
• Adaptive layouts

Installation

dev_dependencies:
  figma_vars_to_dart: ^0.0.4 

or

flutter pub add figma_vars_to_dart --dev

Usage

Prepare your Figma

Make sure your Figma project uses variables.

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.

Run the command

dart pub 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.

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.