---
title: figma-design-system-中堅DXエンジニアPM向け
tags:  #デザイン  
author: [Yukiko](https://www.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4JZL51ZME3.jpg?width=480
description: figma-design-system-中堅DXエンジニアPM向け by Yukiko
published: October 06, 26
canonical: https://www.docswell.com/s/yukiko_it/ZQ2QQ7-2026-10-06-055324
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4JZL51ZME3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YE6W9LZ5EV.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GE5MN1WGE4.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/972951QDJR.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/DJY4KZWM7M.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V7NYR393E8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YJ9PM92P73.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJ8DL95XJD.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LJLMLWYNER.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/47MYM9NQ7W.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/P7R9VGDKE9.jpg)

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