初心者応援Figma × デザインシステム入門

うさうさ研修工房 初心者応援 Figma × デザインシステム入門 コーディング寄りエンジニアのための、初級〜中級 仕様書 対象読者：Figma操作は未経験〜初級のエンジニア 主眼：Figmaの基本操作 ＋ デザインシステム構築の考え方を1本で 公式サイト（ figma.com / help.figma.com）を分析官視点で解体 うさうさ研修工房

AGENDA 本日の分析ルート 01 なぜ今、エンジニアが Figmaを学ぶのか 02 Figma基本操作（Design Mode / Dev Mode） 03 デザインシステムとは何か 04 構成方法の種類（ DX観点／PM観点） 05 デザイントークンの実装（ Variables/Styles） 06 デザインシステム構築 5ステップ 07 レベル別チェックリスト うさうさ研修工房 08 よくあるつまずき＆参考 URL 2

WHY NOW なぜ今、エンジニアが Figmaを学ぶべきか 読む力 「壁越しに設計図を投げる」時代の終わり Figma公式ブログは、Figma以前の受け渡し（ハンドオフ）を「最終画面やアセットを壁の向こ うへ放り投げる」ような体験だったと表現している。デザインの意図が伝わらず、曖昧さとフ ラストレーションが生まれやすかった。 デザインを"仕様書"として正確に読み取れる 話す力 今はDev Modeにより、設計と実装が「同じ画面」の上で対話できる。寸法・カラー・トークン をその場で確認でき、仕様書を待たずにコードへ落とし込める。 デザイナーと同じ言葉（トークン名等）で会話できる 実装速度 CSS値・変数を直接コピーし手戻りを減らせる ※Figma公式ブログ「 The Designer's Handbook for Developer Handoff」等を分析官が要約 うさうさ研修工房 3

FIGMA BASICS 01 画面の基本： Design Mode と Dev Mode Figmaにはデザイナー向けの「 Design Mode」と、実装者向けの「 Dev Mode」の2つの主要モードがある。 Design Mode Dev Mode デザイナーがレイアウトや見た目を作り込むモード。コンポーネントやス タイルを配置・編集する。 実装者向けの検証モード。ツールバーの切替またはショートカット Shift+D で入れる。寸法・スタイル・コード値を確認できる。 Dev Modeの主要ツール Inspect Measure Annotate Ready for dev クリックした要素の仕様を確認 要素間の距離を計測 実装向けの注記を追加 実装OKな箇所を一覧表示 出典： Figma Learn「Guide to Dev Mode」 うさうさ研修工房 4

FIGMA BASICS 02 デザインを "仕様書"として読む エンジニアが Dev Modeで確認すべき 4ポイント 1 ファイルを開く Design ModeでFigmaファイルを開き、Shift+D（またはツールバー 切替）でDev Modeへ 分析官メモ 2 Ready for devを確認 実装OKとして印がついたセクション/フレーム/コンポーネントを一 覧表示 3 Inspect / Measureで検証 要素をクリックし、余白・サイズ・カラー・フォント等の値を取得 4 Annotateとコメントで対話 不明点はコメントで非同期に質問。注記で意図の見落としを防ぐ うさうさ研修工房 Figma公式は、設計を「求める姿」、実装を「今 ある現実」と位置づけ、両者が共通のゴール に向けて歩み寄る過程としてハンドオフを説 明している。一度きりの受け渡しではなく、継 続的な対話として捉えるのが実務のコツ。 5

DESIGN SYSTEM 01 デザインシステムとは何か 定義 開発を加速 コンポーネントの再利用で実装が速くなる 一貫性の担保 全ページ・全プロダクトで見た目と挙動が揃 う チーム連携 デザイナー・エンジニア・PdMが同じ土台で 動ける アクセシビリティ 最初から配慮を組み込める オンボーディング 新メンバーの立ち上がりが早くなる 再利用可能なコンポーネント・ガイドライン・ツール群の集合体。チームが 一貫性のある高品質なプロダクトを構築するための基盤であり、デザイン と実装の「共有された唯一の情報源（Single Source of Truth）」となる。 スタイルガイドとの違い スタイルガイドは「見た目」の基準にとどまるが、デザインシステムはプロ ダクト全体のエコシステムを対象とする。"何を"だけでなく、"どう作るか" や"なぜそうするか"まで伝える。 出典： Figma「12 Design System Examples」 うさうさ研修工房 6

DESIGN SYSTEM 02 デザインシステムを構成する 4要素 原則（Principles） システムの目的と価値観。あらゆる判断の "北極星"となる指針 コンポーネントライブラリ ボタン・フォーム等、再利用可能な UI部品の集合 スタイルガイド 色・タイポグラフィ・トーン＆マナーなど見た目の基準 ドキュメント 使い方・なぜそうするかを伝える説明書。維持更新の土台 出典： Figma Learn「Lesson 1: Welcome to design systems」 うさうさ研修工房 7

STRUCTURE TYPES — FOR ENGINEERS 構成方法の種類： DXエンジニア視点 デザインシステムには主に3つの構成方法があり、実装への影響がそれぞれ異なる Atomic Design（原子設計） トークン駆動型（ Token-Driven） コンポーネント駆動開発（ CDD） Tokens→Atoms→Molecules→Organisms→Templates →Pagesの階層で部品を積み上げる Primitiveトークン（生の値） →Semanticトークン（意味づ けされた値）の 2層で管理 Storybook等でコンポーネントを 1つずつ独立に開発・ 検証してから組み合わせる DX観点 DX観点 DX観点 ディレクトリ構造や命名を階層に対応させやすく、小さな 部品単位でテストしやすい CSS変数やStyle Dictionary等に変換しやすく、ライト/ダー ク・マルチブランド切替に強い 実装単位とレビュー・テスト単位が一致し、CIでの視覚回 帰テストと相性が良い 実務では1つに絞らず、トークン駆動を土台にAtomic階層で整理し、CDDで開発・検証するのが一般的 出典： Brad Frost「Atomic Design」／ Chromatic「Component-Driven Development」 うさうさ研修工房 8

STRUCTURE TYPES — FOR PMs 構成方法の種類： PM視点での選び方 組織の規模・成熟度によって、向いている構成方法と導入スピードが異なる 構成方法 向いているチーム規模 導入スピード PMが得られる強み Atomic Design 中〜大規模／複数プロダクト展開 中程度 部品の粒度が明確で、新メンバーのオンボーディングが早い トークン駆動型 マルチブランド・テーマ切替が必要な組織 速い（トークンから着手可） ライト/ダーク・ブランド展開時の手戻りコストを抑えられる CDD エンジニア主導、 UI変更が頻繁な組織 速い（部品単位で並行開発） 進捗を部品単位で可視化でき、レビューが止まりにくい 意思決定のポイント： 1つに絞る必要はなく、組織の成熟度に応じて段階的に組み合わせるのが定石 うさうさ研修工房 9

DESIGN SYSTEM 03 Figmaでのデザイントークン実装 Figmaでは「Variables（変数）」と「Styles（スタイル）」を組み合わせてトークンを実装する Variables 色・数値・文字列・真偽値を保持。モード（ライト/ダーク等）切替や、他の変数 を参照するエイリアスに対応。複雑なトークン構造を支える。 Styles グラデーションや複数シャドウなど、複合的な値に対応。多くの現場では VariablesとStylesを併用してトークンを構築する。 命名のベストプラクティス（ Figma公式ガイド） 意味が伝わる名前にする（言語や国に依存しない名前） 略語より完全な単語を使う 接頭辞の付け方を統一する（例：背景色は必ず"background"から始める） ブランド名などをトークン名に含めず、汎用的な名前にする 出典： Figma Learn「Guide to variables in Figma」「Update 1: Tokens, variables, and styles」 うさうさ研修工房 10

DESIGN SYSTEM 04 デザインシステム構築の 5ステップ 1 2 3 4 5 目的を明確にする 原則を定める トークンを設計 コンポーネント化 運用・改善 → なぜ作るのか、どんな課題を解決 したいのかを言語化しステークホ ルダーの合意を得る あらゆる意思決定の指針となる"北 極星"。組織の価値観と目的を反 映させる → 色・余白・タイポグラフィ等を Variables/Stylesで構造化し、単一 の情報源にする → トークンを元に再利用可能な部品 を作成。命名・バリアントを統一す る → ドキュメント化しフィードバックを集 め、継続的にメンテナンスする 出典： Figma Blog「How to Build a Design System | Design Systems 102」 うさうさ研修工房 11

CHECKLIST 初級・中級エンジニア別チェックリスト 初級（未経験〜） うさうさ研修工房 中級（実務レベル） Design ModeとDev Modeを切り替えられる Variablesの構造（Primitive/Semantic）を理解している Inspectで色・余白・フォントの値を読み取れる モード（ライト /ダーク等）の切り替え設計を読める Ready for devで実装対象を確認できる トークンの命名規則をコードの変数名に対応づけられる コメントで不明点をデザイナーに質問できる デザインシステムのドキュメントを元に実装判断ができる 12

PITFALLS よくあるつまずきポイントと対処法 うさうさ研修工房 生の値（raw value）に遭遇する デザイナーが変数を一時的に外した状態。Dev Modeの「Suggested variables」機能で対応す る変数を探す トークン名とコード変数名がズレる 命名規則（接頭辞の統一・汎用名の使用）をチーム内で事前にすり合わせる どこまで実装してよいか分からない 「Ready for dev」の印がある箇所のみを対象にし、未確定部分はコメントで確認する デザインシステムが形骸化する ドキュメント化とフィードバック収集を運用フローに組み込み、継続的にメンテナンスする 13

CONCLUSION まとめ：分析官からの 3つの提言 うさうさ研修工房 Dev Modeを"読む"習慣を持つ Inspect/Measure/Ready for devで、デザインを正確な仕様書として扱う トークンの語彙を共有する 命名規則・Variables構造をデザイナーと共通言語にする 一度きりで終わらせない デザインシステムは継続的な対話・運用があって初めて機能する 14

REFERENCES 参考URL一覧 Figma｜デザインシステムの構築支援 Guide to Dev Mode | Figma Learn Help Center Design Tokens: How to Sync Design and Code in Figma figma.com/design-systems/ help.figma.com/hc/en-us/articles/15023124644247 figma.com/resource-library/design-tokens/ 12 Design System Examples | Figma The Designer's Handbook for Developer Handoff | Figma Blog Atomic Design | Brad Frost figma.com/resource-library/design-system-examples/ figma.com/blog/the-designers-handbook-for-developer-handoff/ bradfrost.com/blog/post/atomic-web-design/ How to Build a Design System（Design Systems 102）| Figma Blog Guide to developer handoff in Figma Component-Driven Development | Chromatic figma.com/blog/design-systems-102-how-to-build-your-design-system/ figma.com/best-practices/guide-to-developer-handoff/ chromatic.com/blog/component-driven-development/ Introduction to design systems | Figma Learn Help Center Guide to variables in Figma | Figma Learn Help Center help.figma.com/hc/en-us/sections/14548397990423 help.figma.com/hc/en-us/articles/15339657135383 Lesson 1: Welcome to design systems | Figma Learn Update 1: Tokens, variables, and styles | Figma Learn help.figma.com/hc/en-us/articles/14552802134807 help.figma.com/hc/en-us/articles/18490793776023 うさうさ研修工房 15