エンジニアなら知っておきたいＦｉｇｍａのキホン―ハンズオンで学ぶＷｅｂ開発の仕組みと機能

梅田 弘之【著】

インプレス（2026/06発売）

• サイズ A5判／ページ数 360p／高さ 21cm
• 商品コード 9784295024477
• NDC分類 547.48
• Cコード C3055

出版社内容情報

ITエンジニア向けFigma入門書の決定版
ITエンジニア向けFigma入門書の決定版。エンジニアがFigmaを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです 。オートレイアウトやコンポーネントといった中核機能を、Flexboxや部品化など馴染みのあるロジックと結びつけて体系的に解説 。変数（Variables）管理やDev Mode、プロトタイプ機能まで網羅しています 。無償プランで「受注一覧画面」を構築するハンズオン形式で、デザインの構造を読み解く「勘所」を習得。デザイナーとの連携に課題を感じているエンジニア必携の一冊です 。


【目次】

内容説明

本書は、エンジニアがＦｉｇｍａを「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです。オートレイアウトやコンポーネントといった中核機能を、Ｆｌｅｘｂｏｘのような配置ルールやプログラムの部品化といったエンジニアに馴染みのあるロジックと結びつけて体系的に整理。さらに、変数（バリアフル）によるデザイントークン管理や、開発効率を飛躍的に高めるＤｅｖ　Ｍｏｄｅ、実機に近い挙動を確認できるプロトタイプ機能まで網羅しています。全体を通し、無償のスタータープランで取り組めるハンズオン形式を採用。実際に「受注一覧画面」を構築しながら、デザインの背後にある構造を読み解く「エンジニアの勘所」を凝縮しました。デザインと開発の境界をなくし、チーム全体の生産性を高めるための知識を提供します。「デザインデータは見る専門」だったエンジニアはもちろん、Ｗｅｂデザイナーとの連携に課題を感じているすべてのエンジニアにおすすめの一冊です。

目次

第１章　無償版でＦｉｇｍａの基本を理解する
第２章　デザインシステムを理解する
第３章　オートレイアウトのプロパティ設定
第４章　コンポーネントとインスタンスを活用する
第５章　デザイントークンで標準化
第６章　スタイルでテキストのデザインを統一する
第７章　バリアブルとコレクションでカラーを標準化
第８章　エフェクトと文字列、数値の標準化
第９章　Ａｔｏｍｉｃ　ＤｅｓｉｇｎでＵＩパーツを設計する
第１０章　フッターをモジュール化する
第１１章　ヘッダーの設計と階層管理
第１２章　ステートベースドデザインを理解しよう
第１３章　コンポーネントプロパティ
第１４章　コンポーネント化の判断
第１５章　グリッドとテーブル
第１６章　Ｆｉｇｍａのその他の機能
【付録１】これだけは覚えておきたい１０の操作と１０のコツ
【付録２】Ｆｉｇｍａのアイコン一覧