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

Overview

Design Tokensとは

• 利用することのメリット
• そのTokenこそが真である（信頼できるデータ）前提で組織内で会話できる
• デザインデータから逐一カラーコード・空き・余白などを取得しなくてもいい
• デザイナーと開発者それぞれが一括置き換えしやすくなる
• デザインに圧倒的なガバナンスを実現できる

• 難所
• Figmaの標準ライブラリ機能はCSSプロパティのカバレッジが低かったり、変数の構造化が出来なかったりする
• 実用的なように構造化されていないと変数あって初見のデザイナーが困惑
• 定義どこに置く問題

• 方策
• プロパティの定義 + 適用 + 同期を担うFigmaプラグイン、その名も Figma Tokens。デザイナー全員いれることになる。
• スタイル定義をデータで書き出しても、利用できるフォーマットは環境によってさまざま（js, scss, swift…）であるから、JSONをもとに中間に変換機構を使用する。そのデファクトがStyle Dictionaryである。

• 結論
• めっちゃデザインのガバナンス聞かせられるので5人以上デザイナーいる環境では　 ぜひ入れたほうがよさそう。ワンプロダクトな組織ならなおさらである
• （どうやろうとも必要だが）、色々ルールや運用の取り決めは必要。まあまあコスト高い。
• とっつきやすさでいうと、最初ドン引きだがDesign Tokenのコンセプトの王道運用ができるので、そのあたりのリテラシー上がりそう

Figma Tokens

メモ

やったこと

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

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

• Githubにあげる

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

メモ

• いい感じにCSSプロパティが一揃い揃っていて柔軟に設計できる。
• たとえば、Spacingをsm, md, lgときめて、Auto Layoutの余白に適用するとかもできる。ここらへんはFigma標準にはないのでよい。

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

• 変数に更に変数を割り当てとかできる。
• text.black = {black.400}とかできる
• Primitive ColorとかはGlobalのsetにもっといて、Semantic Colorは自社のsetにもつ運用がよさそう

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

• GithubにPRできる。あげるのもpullするのもPersonal Access Token通す必要あり。
• publicにしとけば誰でもpullできるとかではないらしい残念

• GithubからPullできる（！）
• 逆にいうと、git以外いい置き場がなさそう
• jsonのエディタもついてるので初期はまとめて定義してどばっといれてしまえば1時間ぐらいで準備できそう

• JSONのエディタが同時に使えてそっちでも編集できるので、スプシでまとめるかなんかして初期に大量なプロパティ情報を一括で突っ込むのができてよさそう
• Figmaの標準のスタイルライブラリをちまちまやるのはやばいしすぐ壊せるからしんどい。

• 値
• 何の単位でも入れられるが、そのまま使われるので、border-radiusで1とかいれると、単位足りないよってことでコード側で困る

• オペレーション
• なにか変更あるとデザイナーそれぞれがGithubから最新状態をPullする感じになる
• なので、Design Tokenの同期と、Figma Componentの取り込みと、2つ儀式ある感じになる。ただ、極論機能つくるデザイナーはDesign Tokenなんて知らん、コンポーネントだけ使うんだというのがそもそも理想なのでメンテナーが頑張ればいいかも

コードでの利用

参考記事

Figma Tokens で小さくはじめるデザインシステム

こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.100 orange.100 blue.100 orange.100 green.100 red.200 orange.200 blue.200 red.300 2.

https://zenn.dev/mi_/articles/453f7594120c9a

【Figma Tokens × Style Dictionary】デザインシステムはじめの一歩

https://zenn.dev/kosukek/articles/c86b34b847a9f2

サンプルコード

figma-design-token-example/src at main · yasuhiro-y/figma-design-token-example

Contribute to yasuhiro-y/figma-design-token-example development by creating an account on GitHub.

https://github.com/yasuhiro-y/figma-design-token-example/tree/main/src

仕組み

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

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

やったこと

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

• JSONの変換と、定義ファイルJSへのビルド。以下、関係ディレクトリ
• src/tokens
• token.json
• output.json → token-transformerで変換したファイル
• config.json → style-dictionaryの設定。output.jsonをinputとして指定し、src/themesに書き出す
• src/themes
• theme.js
• theme.d.ts
• theme.scss

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

メモ

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

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

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

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

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

• 参考記事
Naming design tokens
Design tokens are the single source of truth for design primitives like colors or tokens. If you are new to the topic, you may want to learn the basics of design tokens first. Note: This article aims to be an exhaustive reference for naming design tokens.

https://uxdesign.cc/naming-design-tokens-9454818ed7cb

• Spectrumでは色は3段階・他は2段階
Spectrum, Adobe's design system
Design tokens are all the values needed to construct and maintain a design system - spacing, color, typography, object styles, animation, etc. - represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.
https://spectrum.adobe.com/page/design-tokens/