figma_theme_generator 0.1.8

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

dev_dependencies:
  build_runner:
  figma_theme_generator:

This installs three packages:

• build_runner, the tool to run code-generators
• figma_theme, a package containing annotations for [figma_theme_generator]
• figma_theme_generator, the code generator.

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.

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

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.