購入前に目次をご確認ください
インプレス［コンピュータ・IT］ムック エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能
インプレス / 2026年06月18日 / 全359ページ
ITエンジニア向けFigma入門書の決定版。エンジニアがFigmaを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです 。オートレイアウトやコンポーネントといった中核機能を、Flexboxや部品化など馴染みのあるロジックと結びつけて体系的に解説 。変数（Variables）管理やDev Mode、プロトタイプ機能まで網羅しています 。無償プランで「受注一覧画面」を構築するハンズオン形式で、デザインの構造を読み解く「勘所」を習得。デザイナーとの連携に課題を感じているエンジニア必携の一冊です。
目次
- はじめに
- 目次
- 第1章 無償版でFigmaの基本を理解する
- Figmaとは
- Figmaの特徴
- 無償プランと有料プラン
- Figma（無償版）を使ってみる
- Figmaの基本
- プロジェクトやファイル、チームの登録
- 操作のコツをマスターする
- 本章のまとめ
- 第2章 デザインシステムを理解する
- デザインシステムとは
- Figmaでデザインシステムを作成する
- フレームとは
- 本章のまとめ
- 第3章 オートレイアウトのプロパティ設定
- グループ化したUI要素のプロパティ設定
- オートレイアウトのプロパティ設定
- 本章のまとめ
- はじめに
- 目次
- 第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）
- マスクとして使用
- 複数のシェイプの組み合わせ加工
- プロトタイプ
- プロトタイプで画面遷移を体感
- マッチングレイヤーとスマートアニメート
- 本章のまとめ
- 【付録Ⅰ】 これだけは覚えておきたい10の操作と10のコツ
- 【付録Ⅱ】 Figmaのアイコン一覧
- 索引
- 著者プロフィール媒体紹介本書情報および正誤表のWebページ
- 奥付
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
