---
title: figma-design-system-中堅DXエンジニアPM向け
tags:  #figma  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/9E292RGV7R.jpg?width=480
description: figma-design-system-中堅DXエンジニアPM向け by Yukiko
published: September 26, 26
canonical: https://image.docswell.com/s/yukiko_it/ZGNV9J-2026-09-26-145320
---
# Page. 1

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

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


# Page. 2

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

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


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

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


# Page. 6

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

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


# Page. 7

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

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


# Page. 8

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

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


# Page. 9

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

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/37K9MYDG7D.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/LJ3WY9R5J5.jpg)

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