figma-design-system-中堅DXエンジニアPM向け

Figmaデザインシステム 実務ガイド 中堅DXエンジニア・PM向け ― 導入で終わらせず「定着」させるための設計とガバナンス トークン設計 公式ドキュメント準拠 ガバナンス Dev Mode / Code Connect KPI

AGENDA この資料の狙い ― 「作った」で終わらせない Why What How① How② PM視点 なぜ多くのデザインシステム が "定着"の壁でつまずくのか トークンの3層構造とバリアブ ルの マルチプラットフォーム活用 ガバナンス設計 （公開フロー・ブランチ管理） Dev Mode × Code Connect で デザインとコードを接続 定着度を可視化するKPI例 うさうさ研修工房 / 中堅DXエンジニア・PM向け 2

WHY ― なぜ定着しないのか 「作ったが、使われていない」問題 Figma公式ブログでも、design system導入企業から繰り返し聞かれる声として、開発者が一部だけ使い、結局は重複した独自コンポーネントを作ってしまう 課題が指摘されています。 デザインシステムを導入 一部のチームだけが利用 結局、独自コンポーネントを量産 この"すり抜け"を防ぐカギが、次章のトークン設計とガバナンス、Dev Mode連携です。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 3

WHAT ― トークン設計 デザイントークンの 3層構造 Figma公式の考え方では、トークン構造はプリミティブトークンを基礎に、必要に応じてセマンティック・コンポーネント固有トークンを重ねる。全てのシステムに 3層が必 須なわけではなく、規模に応じて選択する。 Primitive Tokens（基礎値） violet-600 = #4C1D95 Semantic Tokens（意味づけ） action-primary-bg → violet-600 Component Tokens（部品固有） button-primary-bg → action-primary-bg うさうさ研修工房 / 中堅DXエンジニア・PM向け 4

WHAT ― バリアブルの拡張活用 モードでマルチブランド／多言語に対応し、コードと同期する 1つのバリアブルコレクションに複数モードを持たせる Light Dark ja-JP en-US REST API / GitHub Actions でコードベースと同期 Variables REST APIを使い、Figmaのバリアブルとリポジトリのdesign tokenファイル（JSON/CSS変数等）を自動同期 できる 複数ブランド展開時は「バリアブルコレクションの拡張（ Extend）」機能で、共通トークンを継承しつつブランド差分だけ上書きできる。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 5

HOW① ― ガバナンス設計 公開フローとブランチ管理で "デザインの野良化 "を防ぐ ブランチで 並行編集 レビュー・ 差分確認 メインへ マージ ライブラリに 公開 Figmaの「ブランチ」機能はGitのブランチに近い概念。メインファイルに影響を与えずに変更を試し、コンフリクトは Figmaがハイライトして手動解消する。 PMの役割：公開の承認基準（命名規則・アクセシビリティチェック・説明文必須化）を事前に決め、レビュー担当をアサインする。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 6

HOW② ― Dev Mode × Code Connect デザインとコードを「同じコンポーネント」として繋ぐ Dev Mode 表示例 Figma：Button / Primary Dev Modeでこのコンポーネントを選択すると … 自動生成された CSSではなく、 実際のプロダクションコード スニペットがそのまま表示される <Button variant="primary" size="lg" > 送信する </Button> コンポーネント名（例： Button/Primary/Large）をコード側と一致させておくことが、 Code Connect定着の最重要ポイント。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 7

HOW② ― 実装連携の実務Tips Auto Layout はそのまま CSS Flexbox に対応する Figmaプロパティ CSS（Flexbox） Horizontal / Vertical flex-direction: row / column Gap gap Padding padding Space Between justify-content: space-between Center 揃え align-items: center Auto Layoutの構造をFlexboxに合わせて設計しておくと、 Dev Modeが出力するコードの精度が上がり、ハンドオフの手戻りが減る。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 8

PM視点 ― 定着度の可視化 「使われているか」を測る KPI例 ライブラリ採用率 重複コンポーネント数 ハンドオフ待ち時間 ライブラリ更新頻度 画面内でライブラリ由来コンポーネン トが占める割合 同じ役割で別々に作られたコンポー ネントの数 デザイン確定〜実装着手までのリー ドタイム コンポーネント・トークンの更新／公 開サイクル ※具体的な目標値は組織のフェーズやプロダクト特性によって異なるため、まずは上記の観点で現状値を計測することから始めるのが実務的。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 9

まとめ Why "作って終わり "を防ぐには、定着を阻む構造（重複 UI・属人化）を先に理解する What Primitive→Semantic→Componentのトークン3層と、モード活用によるマルチブランド対応 How① ブランチ管理 ×公開フローで野良コンポーネントを防ぐガバナンス設計 How② Dev Mode × Code Connectでデザインと本番コードを直結し、ハンドオフを高速化 PM 採用率・重複数・リードタイムなどの KPIで定着度を継続的に可視化する

REFERENCE 参考：公式ドキュメント Update 1: Tokens, variables, and styles: help.figma.com/hc/en-us/articles/18490793776023 Guide to variables in Figma: help.figma.com/hc/en-us/articles/15339657135383 Guide to libraries in Figma: help.figma.com/hc/en-us/articles/360041051154 Guide to Dev Mode: help.figma.com/hc/en-us/articles/15023124644247 Code Connect（Figma Help Center）: help.figma.com/hc/en-us/articles/23920389749655 Introducing Code Connect（Figma Blog）: figma.com/blog/introducing-code-connect ※Code Connectは組織/エンタープライズプランかつフルシート契約が前提。UIやプラン要件は変更される可能性があるため最新版を確認。 うさうさ研修工房 / 中堅DXエンジニア・PM向け 11