🍃

Figmaで定義したdesign tokenをFlutterで利用する

2022/12/11に公開

こちらはFlutter大学 Advent Calendar 2022 11日目の記事になります。
Flutter大学には2020年4月29日に入会、今年で3回目のアドベントカレンダー参加です。
https://qiita.com/advent-calendar/2022/flutteruniv

はじめに

普段はフリーランスのフロントエンド/デザインエンジニアとして働いています。
昨年はFlutter, React.jsの開発案件に関わっていましたが、今年はNext.js, React.js, Vue.js, NestJSなどにふれていました。

業務においてデザインシステムに関わる機会があり、調べる中でFigma上のdesign token[1]StyleDictionaryを利用してFlutterで利用できるコードに書き出すことができないか興味がでてきたため、試しました。

Figma上で定義したdesign tokenを利用する方法

FlutterでFigma上で定義したdesign tokenを利用するには主に3つの方法になると思われます。

  1. Tokens Studio for Figma (Figma Tokens) Pluginで書き出したJSONをToken Transformer経由でStyleDictionaryで利用できる形のJSONへ変換、StyleDictionaryで読み込みFlutterのDartコードへ変換する
  2. Design Tokens Pluginで書き出したJSONをstyle-dictionary-figma-flutterでDartコードへ変換する
  3. Figma APIからJSONを取得して自前で解析、StyleDictionaryで変換する

1や3の方法は大掛かりになりそうだったことや2はネタがかぶってなさそうなことから、今回は2のDesign Tokensstyle-dictionary-figma-flutterを利用した方法を試しました。

FigmaからJSONをexport

まずfigma側でDesign Tokensプラグインのルールでstyleを設定し、JSONファイルを書き出します。
下記のようなルールでStyleを設定する必要があります。 [2]

Tokens from styles

  • スタイルは、自動的にデザイントークン スタイルに変換されます。
    スタイルがエクスポートされないようにするには、スタイルに _ (アンダースコア) をプレフィックスとして付けます。この接頭辞はプラグイン設定で変更できます。

text styles

  • テキストスタイルは、個々のプロパティに分割されます。Figmaのスタイル・プロパティはルックアップテーブルを使って分割されます。

Custom design tokens

  • スタイルとして保存できない値のデザイントークンを作成するには、_tokens で始まる名前を持つフレームを作成します。 
フレーム内のメイン コンポーネントはすべてカスタムトークンにすることができます。
    命名規則に従うことで、プラグインはどのプロパティがエクスポートされるべきかを知ることができます

Sampleファイルをドラフトにコピー => tokens.jsonをExport

今回はdesign token設定済みのSampleファイルをドラフトにコピーしてきて、そこからexportします
https://www.figma.com/community/plugin/888356646278934516/Design-Tokens
試すからDesign Tokens Pluginを追加してください

以下Sampleファイルにアクセス、表示のみの制限がかかっているためコピーする必要があります

Figmaコンテキストメニュー > Plugin > Design Tokens > Export Design Token File

Save & Export

JSONファイルを読み込むためflutter側に設定ファイルを追加

style-dictionary-figma-flutter

今回は新規に flutter_style_dictionary_figma という名前でflutterアプリケーションを作成します。
terminal上で任意のディレクトリ配下に移動し、以下コマンドを入力します。

$ flutter create flutter_style_dictionary_figma

以下コマンドでディレクトリ配下に移動します

$ cd flutter_style_dictionary_figma

npmコマンドで style-dictionary-figma-flutter をglobalインストールします。

$ npm install -g style-dictionary-figma-flutter

config.jsonを作成

次に flutterアプリディレクトリのルート直下に style-dictionary の設定ファイルである config.json を作成するため、以下をコピペしてください。
https://github.com/hndrr/flutter_style-dictionary_figma/blob/5fbaf5e234373e00f2e19137c7ab19e02657bbf5/config.json
flutterアプリディレクトリのルート直下に design ディレクトリを作成、

$ mkdir design

tokens.jsonを配置

その中に Design Tokens プラグインからexportしてきたファイルを配置します。
今回のファイル名は design-tokens.tokens.json になっているはずです。

style-dictionary-figma-flutterを実行

pluginから書き出したJSONをdartファイルを生成する準備ができました。ルート直下で以下コマンドを実行します。

$ style-dictionary-figma-flutter


コマンドを実行すると /lib/theme ディレクトリ配下に *.g.dart ファイルが生成されました。

main.dartを修正

次にこのファイルを呼び出すため main.dart を以下のように変更します。

main.dart
import 'package:flutter/material.dart';
import 'theme/gallery.g.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Theme Gallery',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Theme Gallery'),
          ),
          body: const AppThemeGallery(),
        ));
  }
}

Flutterをlaunch

準備ができたためFlutterを立ち上げます

$ flutter run

https://github.com/hndrr/flutter_style-dictionary_figma/blob/5fbaf5e234373e00f2e19137c7ab19e02657bbf5/lib/theme/gallery.g.dart#L472-L484

ThemeGalleryが立ち上がりfigmaで設定されたdesign tokenが反映されているのが確認できると思います。



本記事のリポジトリ

https://github.com/hndrr/flutter_style-dictionary_figma

今回試したライブラリ

https://github.com/lukasoppermann/design-tokens
https://github.com/aloisdeniel/style-dictionary-figma-flutter

参考にした記事

https://gihyo.jp/magazine/wdpress/archive/2022/vol129
https://note.com/seyanote/n/n7b327a9cfd72
https://zenn.dev/ubie/articles/7a6413af237eae
https://hack.nikkei.com/blog/advent20201222/
https://qiita.com/zookeeper08/items/face3f1d3b8830b28ef2
https://zenn.dev/mi_/articles/453f7594120c9a
https://medium.com/@sarahkimirettig/push-design-tokens-to-developers-using-figma-tokens-plugin-and-style-dictionary-cli-build-tool-87c8aabd887b
https://medium.com/iadvize-engineering/figma-tokens-automatically-turned-into-code-how-we-kickstarted-our-design-system-51297b7d6b17

脚注
  1. デザインで使用する色やテキスト、スペーシングなどのスタイルを表す定数 ↩︎

  2. deeplでsampleファイルのテキストを翻訳したものです ↩︎

Flutter大学

Discussion