UI/UXデザインツール『Figma』入門
7-2. 詳細画面を作る
- UIデザイン
- UXデザイン
- プロトタイピング
このレッスンでは、前回レッスンで作成した、投稿画面から詳細画面へ移る詳細画面の作成を行っていきます。
公開日：2019/11/30最終更新日：2020/01/26
理解度チェック
会員登録して
学習記録をつけよう！
前のレッスン
UI/UXデザインツール『Figma』入門
1. Figmaの概要とインストール
【無料公開中】 1-1. Figmaの概要- 【無料公開中】 1-2. 初期設定とインストール
- 【無料公開中】 1-3. Figmaの初回フィル起動時チュートリアルの解説
- 【無料公開中】 1-4. Figmaの料金プランと権限管理の説明
- 【無料公開中】 1-5. Figmaのファイル管理とSketchファイルのインポート方法
2.Figmaの基本操作
2-1. コメント機能を活用する- 2-2. ページ・フレーム・オブジェクトを作成する
- 2-3. レイヤーパネルでレイヤーを管理する
- 2-4. フレームやオブジェクトをグループ化する「フレームセレクション」と「グループセレクション」
3.ツールバーの操作
- 3-1. ツールバーの基本操作と機能の概要
- 3-2. オブジェクトとキャンバスを操作する
- 3-3. ファイル名の編集とファイルの複製・消去・移動
- 3-4. コンポーネント化
- 3-5. オブジェクトやパスの結合・合成
- 3-6. オブジェクトのマスク
- 3-7. ビューの設定とルーラー・レイアウトの設定
4. プロパティパネルの操作
- 4-1. 位置・サイズを変更する
- 4-2. オブジェクトの整列
- 4-3. オブジェクトに色を塗る
- 4-4. ストローク（線）
- 4-5. ペンツールと鉛筆ツールの使い方
- 4-6. オブジェクトにエフェクトをつける
- 4-7. テキストを編集する
- 4-8. 画像の書き出し（エクスポート）
- 4-9. 制約
- 4-10. Auto Layout（オートレイアウト）機能の使い方
- 4-11. Variants（バリアント）機能の使い方
5. プロトタイピング
6. 共有とバージョン管理
7. 料理写真投稿アプリを作ってみよう
- 7-1. ホーム画面を作る
- 7-2. 詳細画面を作る
- 7-3. 検索画面を作る
- 7-4.プロフィール画面を作る
