figma_vars_to_dart

Description:

figma vars to dart

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
copied to clipboard
or
flutter pub add figma_vars_to_dart --dev
copied to clipboard
Usage #
Prepare your Figma #
Make sure your Figma project uses variables.

Sample inputs for the demo purposes



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
copied to clipboard
Use the code #

Generated files
color_primitives.dart
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),
);
}

copied to clipboard
color_semantics.dart
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,
);
}
copied to clipboard
ui_constants.dart
export 'color_primitives.dart';
export 'color_semantics.dart';
copied to clipboard

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.