🍃

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

hndr

2022/12/11に公開

こちらはFlutter大学 Advent Calendar 2022 11日目の記事になります。
Flutter大学には2020年4月29日に入会、今年で３回目のアドベントカレンダー参加です。

はじめに

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

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

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

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

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

１や３の方法は大掛かりになりそうだったことや２はネタがかぶってなさそうなことから、今回は２のDesign Tokens、style-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します

試すから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 を作成するため、以下をコピペしてください。

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

  @override
  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

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

本記事のリポジトリ

今回試したライブラリ

参考にした記事

脚注

デザインで使用する色やテキスト、スペーシングなどのスタイルを表す定数 ↩︎
deeplでsampleファイルのテキストを翻訳したものです ↩︎

Flutter大学Publication

Flutterエンジニアの学習コミュニティ。詳しくは→ flutteruniv.com