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
dependencies:
  figma_theme:

dev_dependencies:
  build_runner:
  figma_theme_generator:

This installs three packages:

Usage

Generation

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

library

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.

share

https://www.figma.com/file/**2n1EmQ6tqjbeydW2w2odZF**/figma_theme_generator?node-id=0%3A1

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';

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

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

  @override
  bool updateShouldNotify(ExampleTheme oldWidget) {
    return oldWidget.data != 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!

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

share

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.

Libraries

builder
figma_theme_generator