Figma 目次
1. Figmaの基本
Figmaとは
Figmaの概要と特徴
他のデザインツールとの違い
アカウント作成とインターフェース
アカウント作成方法
FigmaのUI（ユーザーインターフェース）構成
ツールバーとパネルの使い方
ファイルの作成と管理
新規ファイルの作成方法
Figmaのクラウドベースの管理機能
2. デザインの基本
- アートボードとフレーム
- フレームとアートボードの使い分け
- アートボードを使ったデザイン構造の作成
- 基本的な形状と図形
- 長方形、円、ポリゴンなどの基本図形の作成
- パスツールとベジェ曲線
- カラーとスタイル
- カラーの設定と管理
- グラデーションやテクスチャの使用
- テキストとフォント
- テキストツールを使ったデザイン
- フォントの追加と管理
3. コンポーネントとスタイル
- コンポーネントの作成
- コンポーネントの概要と利点
- インスタンスとマスターコンポーネント
- コンポーネントを使った再利用可能なデザインパーツ
- スタイルの利用
- テキストスタイル、カラー、エフェクトの設定
- グラデーションやシャドウの管理
4. レイアウトとアライメント
- グリッドとガイドライン
- グリッドシステムを使ったレイアウト
- ガイドラインとスナップ機能
- オートレイアウト
- オートレイアウトを使ったデザインの自動配置
- フレームのサイズ変更と自動調整
- レスポンシブデザイン
- Figmaでレスポンシブなデザインを作成する方法
5. プロトタイピング
- リンクとアクション
- プロトタイプで画面間をリンクする方法
- アクションや遷移効果を設定する
- インタラクションの作成
- ホバー効果、クリックアクションなどのインタラクション
- モーダルやドロップダウンメニューの作成
- プレビューとテスト
- プロトタイプを実際に操作して動作を確認
- ユーザビリティテストの実施
6. コラボレーションと共有
- チームとプロジェクト管理
- Figmaのチーム機能を使った共同作業
- プロジェクトやファイルの共有方法
- コメントとフィードバック
- デザインにコメントを追加してフィードバックを受け取る
- コメント機能を使ったチーム間のコミュニケーション
- バージョン管理
- バージョン履歴の利用方法
- 変更履歴を確認して復元する
7. Figmaのプラグインと拡張機能
- Figmaプラグインのインストール
- プラグインを使ってFigmaの機能を拡張
- 人気のプラグイン（アイコンセット、カラーパレット、画像素材など）
- エクスポート機能
- 画像、SVG、PDFとしてエクスポートする方法
- コードやCSSをエクスポートする方法
8. 高度な機能とテクニック
- スマートセレクトとショートカット
- スマートセレクトを使った効率的な操作
- ショートカットキーを活用して作業を高速化
- 変形とエフェクト
- 変形ツールを使った図形の編集
- シャドウ、ぼかし、グラデーションなどのエフェクト
- デザインシステムの構築
- デザインシステムを作成して一貫性を保つ方法
- コンポーネントとスタイルの活用
9. 実践的な使用例
- Webデザイン
- Figmaを使ったレスポンシブWebデザインの作成
- ヘッダー、フッター、ナビゲーションメニューのデザイン
- モバイルアプリデザイン
- FigmaでモバイルアプリのUIをデザインする方法
- ボタン、アイコン、フォームのデザイン
10. Figmaを利用したチームワーク
- リアルタイムでの共同作業
- チームメンバーと同時に作業する方法
- コメントとアノテーションを活用した作業
- ディスカッションとフィードバックの活用
- デザインレビューの方法
- 顧客やクライアントからのフィードバックを取り入れる