figma_theme_generator 0.1.8 icon indicating copy to clipboard operation
figma_theme_generator: ^0.1.8 copied to clipboard

Generate themes from Figma styles.

figma_theme_generator #

Generate a set of Flutter classes from the style library (colors, borders, corner radii, gradients, effects, text styles) of a Figma document.

Install #

To use [figma_theme_generator], you will need your typical [build_runner]/code-generator setup.
First, install [build_runner] and [figma_theme] by adding them to your pubspec.yaml file:

# pubspec.yaml


This installs three packages:

Usage #

Generation #

First, you should have a Figma document that contains local styles.


You need two things to link the Figma document to your dart code :

  1. Figma API Token :
    1. Login to your Figma account.
    2. Head to the Account Settings from the top-left menu inside Figma.
    3. Find the Personal Access Tokens section.
    4. Click Create new token.
    5. A token will be generated. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.
  2. File Key : Extract it from the link of your document Share button in Figma.


You then can define a class decorated with a @FigmaTheme annotation with the previous arguments.

You can for example define an InheritedWidget :

import 'package:example/credentials.dart';
import 'package:figma_theme/figma_theme.dart';
import 'package:flutter/widgets.dart';

part 'theme.g.dart';

  1, // Increment this number each time an update is needed
  fileKey: '<file_key>',
  apiToken: '<api_token>',
class ExampleTheme extends InheritedWidget {
  final ExampleThemeData data;
    Key key,
    @required Widget child,
  }) : super(
          key: key,
          child: child,

  static ExampleThemeData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<ExampleTheme>()?.data ??

  bool updateShouldNotify(ExampleTheme oldWidget) {
    return != data;

To generate the theme.g.dart containing the ExampleThemeData data class, run the build runner command :

> flutter pub run build_runner build 

And now you're ready to use your theme!

  data: ExampleThemeData.fallback(),
  child: MaterialApp(
      /// ...
final exampleTheme = ExampleTheme.of(context);


Regeneration #

Because of the caching system of the build_runner, it can't detect if there is a change on the distant document and it can't know if a new generation is needed.

The first version parameter of the @FigmaTheme annotation solves this issue.

Each time you want to trigger a new generation, simply increment that version number and call the build runner again.