#2UIで大事な構造を学ぶ / オートレイアウトでListItemをデザインしよう！ - Figmaの使い方チュートリアル

2回目は以下をデザインしていきます～！地味かもですが、丁寧に見た目と良い構造を理解して作っていくと、良いソフトウェアデザイナーの1歩になります～！👌

1. ページ全体の構造をチェック&定義
2. アイコンのサイズの揃え方
3. オートレイアウトでListItemをデザイン
   

ちなみに全て完璧にやらなくてOKです！少しずつ概念知りながら、トライする回数を増やしましょう。質より量がまずは大事です。

❐ Figmaファイル

-------------------------------------------

動画で完成したFigmaファイルはこちらhttps://www.figma.com/file/PsfpGb1fhe1wyyRZHvpgt1/%F0%9F%8D%B0Figma%3AAutolayoutComponent%C3%97%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B9?node-id=54%3A32778&t=82URIcTK9HiMo0Hc-1

❐ 関連動画

-------------------------------------------

Figma入門シリーズ

https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z

オートレイアウトの機能説明

https://youtu.be/bPDcUlv7C7A

コンポーネント機能説明

https://youtu.be/hjsWrHn1S4s

https://youtu.be/8FM-R2EBUnI

❐ 目次

-------------------------------------------

00:00 トレース&Figma解説スタート

01:05 この動画の進め方！

01:50 UIの構造について知ろう

03:25 Header Naviの定義

07:15 Primary Blockの定義

10:27 Columnの定義

15:54 アイコンを正方形に整える

23:02 必殺オートレイアウト！

26:54 ListItemのサイズ調整

28:20 次は2つ目の必須機能「コンポーネント」

‍

2回目は以下をデザインしていきます～！地味かもですが、丁寧に見た目と良い構造を理解して作っていくと、良いソフトウェアデザイナーの1歩になります～！👌

1. ページ全体の構造をチェック&定義
2. アイコンのサイズの揃え方
3. オートレイアウトでListItemをデザイン
   

ちなみに全て完璧にやらなくてOKです！少しずつ概念知りながら、トライする回数を増やしましょう。質より量がまずは大事です。

❐ Figmaファイル

-------------------------------------------

動画で完成したFigmaファイルはこちらhttps://www.figma.com/file/PsfpGb1fhe1wyyRZHvpgt1/%F0%9F%8D%B0Figma%3AAutolayoutComponent%C3%97%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B9?node-id=54%3A32778&t=82URIcTK9HiMo0Hc-1

❐ 関連動画

-------------------------------------------

Figma入門シリーズ

https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z

オートレイアウトの機能説明

https://youtu.be/bPDcUlv7C7A

コンポーネント機能説明

https://youtu.be/hjsWrHn1S4s

https://youtu.be/8FM-R2EBUnI

❐ 目次

-------------------------------------------

00:00 トレース&Figma解説スタート

01:05 この動画の進め方！

01:50 UIの構造について知ろう

03:25 Header Naviの定義

07:15 Primary Blockの定義

10:27 Columnの定義

15:54 アイコンを正方形に整える

23:02 必殺オートレイアウト！

26:54 ListItemのサイズ調整

28:20 次は2つ目の必須機能「コンポーネント」

‍

‍