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

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

[carolina04]

“他のトークンを参照して、セマンティックデザイントークンを作成可 colors.primary = {color.red.500}”

[aoiasaba]

デザインシステム

[oyssi]

良さそう

[kvx]

使ってみよ

[nunulk]

"このような少し手間な作業も、デザイントークンとして登録しておけばワンクリックで自由自在に適用できます。"