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

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

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

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

W H AT ― ト ー クン 設 計 デザイントークンの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

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

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

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

H O W② ― 実 装 連携 の 実 務 T i p s 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

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

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

R E FE R E N CE 参考：公式ドキュメント 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