目次

表紙
はじめに
目次
第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ページ
奥付