目次

• はじめに

chapter 1　Figmaを使う前に

• 1-1　アカウントの作成
• 1-2　Figmaのデータ構造
• 1-3　Figmaのファイルブラウザ
• 1-4　Figmaのプラン
• 1-5　ブラウザ版とアプリ版のちがい
• 1-6　チームに導入するまでのコミュニケーション

chapter 2　Figmaの基本操作

• 2-1　画面の説明
• 2-2　見本ファイルを複製する
• 2-3　ファイル内に新規ページを作成する
• 2-4　1ページ目　～枠の作成・画面の操作・オブジェクトの複製や整列・レイアウトグリッドについて～
• 2-5　2ページ目　～オブジェクトの操作・リスト形式のテキストについて～
• 2-6　3ページ目　～表組みの再現・画像の配置について～
• 2-7　4ページ目　～楕円・多角形・矢印ツールについて～
• 2-8　5ページ目　～ペンツール・星ツール・レイヤーの操作について～

chapter 3　UIデザインを作る

• 3-1　UIデザイン用の見本ファイルを複製する
• 3-2　新規ページを作成する
• 3-3　ログイン画面を作成する
• 3-4　ホーム画面を作成する
• 3-5　色や文字の設定を管理するスタイルの作成
• 3-6　UIパーツを再利用するコンポーネントの作成
• 3-7　通知画面を作成する
• 3-8　DM画面を作成する
• 3-9　UIデータを共有する
• 3-10　デザインコラボレーションのための機能
• 3-11　スタイルやコンポーネントをまとめて管理するチームライブラリ

chapter 4　プロトタイプを作る

• 4-1　基本的な機能
• 4-2　発展的な機能

chapter 5　デベロッパーハンドオフ

• 5-1　実装者へのファイル共有
• 5-2　編集者と閲覧者のちがい
• 5-3　インスペクト
• 5-4　コメント
• 5-5　エクスポート

chapter 6　Figmaを中心としたチーム全体でのコラボレーション

• 6-1　具体的なUIを作る前のコラボレーション
• 6-2　デザイナーだけで使わない　Figmaの機能を最大限活かすために
• 6-3　Figma コミュニティ
• 6-4　他のアプリケーションとの連携
• 6-5　Figma 公式からの情報収集

• おわりに