出版書誌データベース

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

表紙
はじめに
目次
第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）
マスクとして使用
複数のシェイプの組み合わせ加工
プロトタイプ
プロトタイプで画面遷移を体感
マッチングレイヤーとスマートアニメート
本章…ほか