--- title: 初心者応援Figma × デザインシステム入門 tags: #figma author: [Yukiko](https://www.docswell.com/user/yukiko_it) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/GJWGW4PP72.jpg?width=480 description: 初心者応援Figma × デザインシステム入門 by Yukiko published: October 13, 26 canonical: https://www.docswell.com/s/yukiko_it/Z7NMV8-2026-10-13-222216 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/GJWGW4PP72.jpg) うさうさ研修工房 初心者応援 Figma × デザインシステム入門 コーディング寄りエンジニアのための、初級〜中級 仕様書 対象読者：Figma操作は未経験〜初級のエンジニア 主眼：Figmaの基本操作 ＋ デザインシステム構築の考え方を1本で 公式サイト（ figma.com / help.figma.com）を分析官視点で解体 うさうさ研修工房 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/4EZL52K673.jpg) AGENDA 本日の分析ルート 01 なぜ今、エンジニアが Figmaを学ぶのか 02 Figma基本操作（Design Mode / Dev Mode） 03 デザインシステムとは何か 04 構成方法の種類（ DX観点／PM観点） 05 デザイントークンの実装（ Variables/Styles） 06 デザインシステム構築 5ステップ 07 レベル別チェックリスト うさうさ研修工房 08 よくあるつまずき＆参考 URL 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/Y76W9VQL7V.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/G75MNDRM74.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/9J2958DRER.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/DEY4K625JM.jpg) DESIGN SYSTEM 01 デザインシステムとは何か 定義 開発を加速 コンポーネントの再利用で実装が速くなる 一貫性の担保 全ページ・全プロダクトで見た目と挙動が揃 う チーム連携 デザイナー・エンジニア・PdMが同じ土台で 動ける アクセシビリティ 最初から配慮を組み込める オンボーディング 新メンバーの立ち上がりが早くなる 再利用可能なコンポーネント・ガイドライン・ツール群の集合体。チームが 一貫性のある高品質なプロダクトを構築するための基盤であり、デザイン と実装の「共有された唯一の情報源（Single Source of Truth）」となる。 スタイルガイドとの違い スタイルガイドは「見た目」の基準にとどまるが、デザインシステムはプロ ダクト全体のエコシステムを対象とする。"何を"だけでなく、"どう作るか" や"なぜそうするか"まで伝える。 出典： Figma「12 Design System Examples」 うさうさ研修工房 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/VJNYRZ8478.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/YE9PMZK4J3.jpg) 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 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GE8DL1RVED.jpg) STRUCTURE TYPES — FOR PMs 構成方法の種類： PM視点での選び方 組織の規模・成熟度によって、向いている構成方法と導入スピードが異なる 構成方法 向いているチーム規模 導入スピード PMが得られる強み Atomic Design 中〜大規模／複数プロダクト展開 中程度 部品の粒度が明確で、新メンバーのオンボーディングが早い トークン駆動型 マルチブランド・テーマ切替が必要な組織 速い（トークンから着手可） ライト/ダーク・ブランド展開時の手戻りコストを抑えられる CDD エンジニア主導、 UI変更が頻繁な組織 速い（部品単位で並行開発） 進捗を部品単位で可視化でき、レビューが止まりにくい 意思決定のポイント： 1つに絞る必要はなく、組織の成熟度に応じて段階的に組み合わせるのが定石 うさうさ研修工房 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/LELMLQKR7R.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」 うさうさ研修工房 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/4JMYM12PJW.jpg) DESIGN SYSTEM 04 デザインシステム構築の 5ステップ 1 2 3 4 5 目的を明確にする 原則を定める トークンを設計 コンポーネント化 運用・改善 → なぜ作るのか、どんな課題を解決 したいのかを言語化しステークホ ルダーの合意を得る あらゆる意思決定の指針となる"北 極星"。組織の価値観と目的を反 映させる → 色・余白・タイポグラフィ等を Variables/Stylesで構造化し、単一 の情報源にする → トークンを元に再利用可能な部品 を作成。命名・バリアントを統一す る → ドキュメント化しフィードバックを集 め、継続的にメンテナンスする 出典： Figma Blog「How to Build a Design System | Design Systems 102」 うさうさ研修工房 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/PJR9VLMY79.jpg) CHECKLIST 初級・中級エンジニア別チェックリスト 初級（未経験〜） うさうさ研修工房 中級（実務レベル） Design ModeとDev Modeを切り替えられる Variablesの構造（Primitive/Semantic）を理解している Inspectで色・余白・フォントの値を読み取れる モード（ライト /ダーク等）の切り替え設計を読める Ready for devで実装対象を確認できる トークンの命名規則をコードの変数名に対応づけられる コメントで不明点をデザイナーに質問できる デザインシステムのドキュメントを元に実装判断ができる 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/PEXQZWV4JX.jpg) PITFALLS よくあるつまずきポイントと対処法 うさうさ研修工房 生の値（raw value）に遭遇する デザイナーが変数を一時的に外した状態。Dev Modeの「Suggested variables」機能で対応す る変数を探す トークン名とコード変数名がズレる 命名規則（接頭辞の統一・汎用名の使用）をチーム内で事前にすり合わせる どこまで実装してよいか分からない 「Ready for dev」の印がある箇所のみを対象にし、未確定部分はコメントで確認する デザインシステムが形骸化する ドキュメント化とフィードバック収集を運用フローに組み込み、継続的にメンテナンスする 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/3EK98VQPED.jpg) CONCLUSION まとめ：分析官からの 3つの提言 うさうさ研修工房 Dev Modeを"読む"習慣を持つ Inspect/Measure/Ready for devで、デザインを正確な仕様書として扱う トークンの語彙を共有する 命名規則・Variables構造をデザイナーと共通言語にする 一度きりで終わらせない デザインシステムは継続的な対話・運用があって初めて機能する 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/L73W2MP475.jpg) 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