Figma TokensとStyle Dictionaryを触ってみたメモ

Overview

Figma TokensとStyle Dictionaryを組み合わせたDesign Token運用を検討した。

けっこうよさげ。

Design Tokensとは

デザインシステムにおける、いわゆるスタイル変数集をもってSource of truthを実現するコンセプト。イケてる海外の会社はみんなやってるっぽい。

  • 利用することのメリット

  • 難所

  • 方策

  • 結論

Figma Tokens

リアルタイムにjsonプレビューできる

メモ

やったこと

  • いくつかのプロパティを定義する

  • Buttonコンポーネントにあてる

  • Githubにあげる

  • 一通り理解するまで30分程度

メモ

  • いい感じにCSSプロパティが一揃い揃っていて柔軟に設計できる。

  • Figmaの右側のプロパティのUIは思い切って放棄することになる。

  • 変数に更に変数を割り当てとかできる。

  • 値の定義はcolors.text.blackみたいな感じで構造化する

  • GithubにPRできる。あげるのもpullするのもPersonal Access Token通す必要あり。

  • GithubからPullできる（！）

  • JSONのエディタが同時に使えてそっちでも編集できるので、スプシでまとめるかなんかして初期に大量なプロパティ情報を一括で突っ込むのができてよさそう

  • 値

  • オペレーション

コードでの利用

参考記事

2つ目の記事をまるっと参考にした

サンプルコード

仕組み

パッケージ2ついる。

  • 前者はビルド前の下ごしらえとしてJSONをFigmaのエイリアスとかをよしなに変換する君、

  • 後者はそれをコードで利用できる感じに書き出してくれる君。 config.jsonでwebpackみたいに書き出し設定可能

yarn add -D token-transformer
yarn add -D style-dictionary

なので、JSONをリポジトリにあげておわりでなく、 token-transoformer (ry && style-dictionary (ry みたいなコマンドをビルドプロセスに組み込む必要がある

やったこと

  • パッケージインストール

  • JSONの変換と、定義ファイルJSへのビルド。以下、関係ディレクトリ

  • Emotion/ReactのStyled記法のなかでのimport

メモ

  • 上記の変換機構がPR後のビルドとして組み込まれているような設計の場合、デザイナーが大枠の健気にスキーマ名変更してmergeされるとCIこけるだろう

  • TypeScriptでいい感じに変数使えた

  • いちいち末尾に .valueつけないと値が呼べないので冗長感否めない

  • theme.text.color としたいのにtheme.blackみたいなサジェストがフラットにでてきてしまう。設定かFigma Tokensの設定悪い？

どういう構造にするといいか

  • 参考記事

  • Spectrumでは色は3段階・他は2段階

読んだ人たち