関連サイト
本書の関連ページが用意されています。
内容紹介
ITエンジニア向けFigma入門書の決定版
本書は、エンジニアがFigmaを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです。
オートレイアウトやコンポーネントといった中核機能を、Flexboxのような配置ルールやプログラムの部品化といったエンジニアに馴染みのあるロジックと結びつけて体系的に整理。さらに、変数（Variables）によるデザイントークン管理や、開発効率を飛躍的に高めるDev Mode、実機に近い挙動を確認できるプロトタイプ機能まで網羅しています。
全体を通し、無償のスタータープランで取り組めるハンズオン形式を採用。実際に「受注一覧画面」を構築しながら、デザインの背後にある構造を読み解く「エンジニアの勘所」を凝縮しました。デザインと開発の境界をなくし、チーム全体の生産性を高めるための知識を提供します。
「デザインデータは見る専門」だったエンジニアはもちろん、Webデザイナーとの連携に課題を感じているすべてのエンジニアにおすすめの一冊です。
書誌情報
- 著者: 梅田 弘之
- 発行日: 2026-06-18 (紙書籍版発行日: 2026-06-18)
- 最終更新日: 2026-06-18
- バージョン: 1.0.0
- ページ数: 360ページ(PDF版換算)
- 対応フォーマット: PDF, EPUB
- 出版社: インプレス
対象読者
著者について
梅田 弘之
東芝、SCSKを経て1995年に株式会社システムインテグレータを設立し、現在、代表取締役会長。2006年東証マザーズ、2014年東証第一部、2019年東証スタンダード上場。前職で日本最初のERP「ProActive」を作った後に独立し、日本初のECパッケージ「SI Web Shopping」や開発支援ツール「SI Object Browser」を開発。日本初のWebベースのERP「GRANDIT」をコンソーシアム方式で開発し、統合型プロジェクト管理システム「SI Object Browser PM」など、独創的なアイデアの製品を次々とリリース。
主な著書に『Oracle8入門』シリーズや『SQL Server7.0徹底入門』、『実践SQL』などのRDBMS系、『グラス片手にデータベース設計入門』シリーズや『パッケージから学ぶ4大分野の業務知識』などの業務知識系、『実践！プロジェクト管理入門』シリーズ、『統合型プロジェクト管理のススメ』などのプロジェクト管理系、最近ではThink ITの連載をまとめた『これからのSIerの話をしよう』『エンジニアなら知っておきたいAIのキホン』『エンジニアなら知っておきたいシステム設計とドキュメント』『エンジニアなら知っておきたい生成AIのキホン』『徹底攻略JSTQB』を刊行。「日本のITの近代化」と「日本のITを世界に」の2つのテーマをライフワークに掲げている。
目次
はじめに
目次
第1章 無償版でFigmaの基本を理解する
- Figmaとは
- Figmaの特徴
- 無償プランと有料プラン
- Figma（無償版）を使ってみる
- Figmaの基本
- プロジェクトやファイル、チームの登録
- 操作のコツをマスターする
- 本章のまとめ
第2章 デザインシステムを理解する
- デザインシステムとは
- Figmaでデザインシステムを作成する
- フレームとは
- 本章のまとめ
第3章 オートレイアウトのプロパティ設定
- グループ化したUI要素のプロパティ設定
- オートレイアウトのプロパティ設定
- 本章のまとめ
第4章 コンポーネントとインスタンスを活用する
- コンポーネントとインスタンスについて
- コンポーネントとインスタンスを作成
- バリアントの基本
- バリアントの特性
- 本章のまとめ
第5章 デザイントークンで標準化
- デザイントークン
- デザイントークンを3層に分類
- デザイントークンの設計
- 本章のまとめ
第6章 スタイルでテキストのデザインを統一する
- スタイルとバリアブル
- スタイルとバリアブルの使い分け
- スタイル「テキスト」の設定
- デザインにスタイルを適用
- 本章のまとめ
第7章 バリアブルとコレクションでカラーを標準化
- カラーのプリミティブトークンを作成
- エイリアストークンを作成
- デザインにエイリアストークンを適用
- 本章のまとめ
第8章 エフェクトと文字列、数値の標準化
- エフェクト
- スタイルでエフェクトを作成
- 文字列のバリアブルを使ってみる
- 数値のバリアブル
- 本章のまとめ
第9章 Atomic DesignでUIパーツを設計する
- Atomic Designとは
- アイコンの追加
- アイコンの色の設定
- ボタンの追加とアイコンの適用
- 本章のまとめ
第10章 フッターをモジュール化する
- 画面サイズの基本方針
- レスポンシブデザイン
- フッターの作成とオートレイアウト設定
- コンポーネント化の是非
- インスタンスに変更を加えたい場合
- 本章のまとめ
第11章 ヘッダーの設計と階層管理
- 画面のカラーデザインの方針
- カラーバリアブルの追加
- ヘッダーの作成
- ヘッダーに含めるUI要素を作成
- 他のUI要素を作成してヘッダーに配置
- UI要素を左右に配置
- 本章のまとめ
第12章 ステートベースドデザインを理解しよう
- コンポーネントとは
- スタイルとバリアブルの追加
- 土台のフレームを作成
- テキストボックスの作成
- 最大値と最小値の設定
- ステートベースドデザイン
- ステートベースドデザインの適用
- 本章のまとめ
第13章 コンポーネントプロパティ
- テキストボックスのバリアント作成
- テキストボックスのバリアント化
- コンポーネントプロパティ
- コンポーネントプロパティ「テキスト」を使用
- 数値入力ボックスと日付入力ボックス
- 本章のまとめ
第14章 コンポーネント化の判断
- 画面の構成
- タイトルバーの作成準備
- タイトルバーのデザイン
- 検索セクション
- Style Organizer
- Tokens Studio for Figma
- キーワード検索
- 本章のまとめ
第15章 グリッドとテーブル
- 検索結果セクション
- オートレイアウトのネスト構造
- アプリケーションのデザイン
- 本章のまとめ
第16章 Figmaのその他の機能
- プリセットと制約とtab移動
- コンテンツを隠す（Clip content）
- マスクとして使用
- 複数のシェイプの組み合わせ加工
- プロトタイプ
- プロトタイプで画面遷移を体感
- マッチングレイヤーとスマートアニメート
- 本章のまとめ