--- title: Figma × デザインシステム入門 tags: #デザイン author: [Yukiko](https://image.docswell.com/user/yukiko_it) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/GE8D5KX4ED.jpg?width=480 description: Figma × デザインシステム入門 by Yukiko published: September 11, 26 canonical: https://image.docswell.com/s/yukiko_it/KN781Q-2026-09-11-222627 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/GE8D5KX4ED.jpg) うさうさ研修工房 話し方分析シリーズ番外編 世界一分析官が読み解く Figma × デザインシステム入門 コーディング寄りエンジニアのための、初級〜中級 仕様書 対象読者：Figma操作は未経験〜初級のエンジニア 主眼：Figmaの基本操作 ＋ デザインシステム構築の考え方を1本で 公式サイト（ figma.com / help.figma.com）を分析官視点で解体 うさうさ研修工房 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/LELMYZ8V7R.jpg) AGENDA 本日の分析ルート なぜ今、エンジニアが Figmaを学ぶのか 01 Figma基本操作（Design Mode / Dev Mode） 02 デザインシステムとは何か 03 デザイントークンの実装（ Variables/Styles） 04 デザインシステム構築 5ステップ 05 うさうさ研修工房 レベル別チェックリスト＆参考 URL 06 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4JMYNV6NJW.jpg) WHY NOW なぜ今、エンジニアが Figmaを学ぶべきか 読む力 「壁越しに設計図を投げる」時代の終わり Figma公式ブログは、Figma以前の受け渡し（ハンドオフ）を「最終画面やアセットを壁の向こ うへ放り投げる」ような体験だったと表現している。デザインの意図が伝わらず、曖昧さとフ ラストレーションが生まれやすかった。 デザインを"仕様書"として正確に読み取れる 話す力 今はDev Modeにより、設計と実装が「同じ画面」の上で対話できる。寸法・カラー・トークン をその場で確認でき、仕様書を待たずにコードへ落とし込める。 デザイナーと同じ言葉（トークン名等）で会話できる 実装速度 CSS値・変数を直接コピーし手戻りを減らせる ※Figma公式ブログ「 The Designer's Handbook for Developer Handoff」等を分析官が要約 うさうさ研修工房 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/PJR9D2P479.jpg) 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 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/PEXQ1D3ZJX.jpg) 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 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/3EK92XYVED.jpg) DESIGN SYSTEM 01 デザインシステムとは何か 定義 開発を加速 コンポーネントの再利用で実装が速くなる 一貫性の担保 全ページ・全プロダクトで見た目と挙動が揃 う チーム連携 デザイナー・エンジニア・PdMが同じ土台で 動ける アクセシビリティ 最初から配慮を組み込める オンボーディング 新メンバーの立ち上がりが早くなる 再利用可能なコンポーネント・ガイドライン・ツール群の集合体。チームが 一貫性のある高品質なプロダクトを構築するための基盤であり、デザイン と実装の「共有された唯一の情報源（Single Source of Truth）」となる。 スタイルガイドとの違い スタイルガイドは「見た目」の基準にとどまるが、デザインシステムはプロ ダクト全体のエコシステムを対象とする。"何を"だけでなく、"どう作るか" や"なぜそうするか"まで伝える。 出典： Figma「12 Design System Examples」 うさうさ研修工房 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/L73W45VQ75.jpg) DESIGN SYSTEM 02 デザインシステムを構成する 4要素 原則（Principles） システムの目的と価値観。あらゆる判断の "北極星"となる指針 コンポーネントライブラリ ボタン・フォーム等、再利用可能な UI部品の集合 スタイルガイド 色・タイポグラフィ・トーン＆マナーなど見た目の基準 ドキュメント 使い方・なぜそうするかを伝える説明書。維持更新の土台 出典： Figma Learn「Lesson 1: Welcome to design systems」 うさうさ研修工房 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/87DKQD8WJG.jpg) 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」 うさうさ研修工房 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/VJPKLX8XE8.jpg) DESIGN SYSTEM 04 デザインシステム構築の 5ステップ 1 2 3 4 5 目的を明確にする 原則を定める トークンを設計 コンポーネント化 運用・改善 → なぜ作るのか、どんな課題を解決 したいのかを言語化しステークホ ルダーの合意を得る あらゆる意思決定の指針となる"北 極星"。組織の価値観と目的を反 映させる → 色・余白・タイポグラフィ等を Variables/Stylesで構造化し、単一 の情報源にする → トークンを元に再利用可能な部品 を作成。命名・バリアントを統一す る → ドキュメント化しフィードバックを集 め、継続的にメンテナンスする 出典： Figma Blog「How to Build a Design System | Design Systems 102」 うさうさ研修工房 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/2EVVQLN3EQ.jpg) CHECKLIST 初級・中級エンジニア別チェックリスト 初級（未経験〜） うさうさ研修工房 中級（実務レベル） Design ModeとDev Modeを切り替えられる Variablesの構造（Primitive/Semantic）を理解している Inspectで色・余白・フォントの値を読み取れる モード（ライト /ダーク等）の切り替え設計を読める Ready for devで実装対象を確認できる トークンの命名規則をコードの変数名に対応づけられる コメントで不明点をデザイナーに質問できる デザインシステムのドキュメントを元に実装判断ができる 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/57GLWXKYEL.jpg) PITFALLS よくあるつまずきポイントと対処法 うさうさ研修工房 生の値（raw value）に遭遇する デザイナーが変数を一時的に外した状態。Dev Modeの「Suggested variables」機能で対応す る変数を探す トークン名とコード変数名がズレる 命名規則（接頭辞の統一・汎用名の使用）をチーム内で事前にすり合わせる どこまで実装してよいか分からない 「Ready for dev」の印がある箇所のみを対象にし、未確定部分はコメントで確認する デザインシステムが形骸化する ドキュメント化とフィードバック収集を運用フローに組み込み、継続的にメンテナンスする 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/4EQY38N6JP.jpg) CONCLUSION まとめ：分析官からの 3つの提言 うさうさ研修工房 Dev Modeを"読む"習慣を持つ Inspect/Measure/Ready for devで、デザインを正確な仕様書として扱う トークンの語彙を共有する 命名規則・Variables構造をデザイナーと共通言語にする 一度きりで終わらせない デザインシステムは継続的な対話・運用があって初めて機能する 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/KJ4W12GM71.jpg) REFERENCES 参考URL一覧 Figma｜デザインシステムの構築支援 The Designer's Handbook for Developer Handoff | Figma Blog figma.com/design-systems/ figma.com/blog/the-designers-handbook-for-developer-handoff/ 12 Design System Examples | Figma Guide to developer handoff in Figma figma.com/resource-library/design-system-examples/ figma.com/best-practices/guide-to-developer-handoff/ How to Build a Design System（Design Systems 102）| Figma Blog Guide to variables in Figma | Figma Learn Help Center figma.com/blog/design-systems-102-how-to-build-your-design-system/ help.figma.com/hc/en-us/articles/15339657135383 Introduction to design systems | Figma Learn Help Center Update 1: Tokens, variables, and styles | Figma Learn help.figma.com/hc/en-us/sections/14548397990423 help.figma.com/hc/en-us/articles/18490793776023 Lesson 1: Welcome to design systems | Figma Learn Design Tokens: How to Sync Design and Code in Figma help.figma.com/hc/en-us/articles/14552802134807 figma.com/resource-library/design-tokens/ Guide to Dev Mode | Figma Learn Help Center help.figma.com/hc/en-us/articles/15023124644247 うさうさ研修工房 13