質問しよう
シリーズ目次

Figma初級

シリーズでやることを確認しよう
2
シリーズでやることを確認しよう

シリーズでやることを確認しよう

#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする
16:56
#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする

#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする

Figmaのコア機能を習得しよう
33
Figmaのコア機能を習得しよう

Figmaのコア機能を習得しよう

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

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

#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル
27:04
#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル

#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル

#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル
40:16
#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル

#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル

身につけた機能を実践しよう
33
身につけた機能を実践しよう

身につけた機能を実践しよう

#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル
30:10
#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル

#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル

#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル
35:37
#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル

#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル

#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル
42:07
#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル

#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル

#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!
39:32
#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!

#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!

トップ
/
Figma初級
/
#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル
Figma

#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル

2023
10
29
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

今日はオートレイアウトを使ってナビゲーションを完成させていきます!

最初はできることが縛られて融通が効かないオートレイアウトですが、仕組みが決まっているUIを作る時はそのルールの中で組み立てられるので使い分けができるようになってくると強いです。


とにかく最初のうちはコツコツ使って挙動に慣れましょ~。



❐ 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=90%3A15250&t=prPDT58xfVIJljO0-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 オートレイアウトを使うパート

01:37 完璧を目指さないやる量を増やそう

02:32 ナビコンテンツを完成させる

04:35 アイテムブロックのリンク範囲を調整

08:39 ロゴブロックをデザイン

13:14 ボタンブロックをデザイン

16:32 オートレイアウト内側を調整

24:15 プロフィールブロックをデザイン

32:36 全体調整をして完成へ

37:03 次はフィードをデザインしていきます!

今日はオートレイアウトを使ってナビゲーションを完成させていきます!

最初はできることが縛られて融通が効かないオートレイアウトですが、仕組みが決まっているUIを作る時はそのルールの中で組み立てられるので使い分けができるようになってくると強いです。


とにかく最初のうちはコツコツ使って挙動に慣れましょ~。



❐ 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=90%3A15250&t=prPDT58xfVIJljO0-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 オートレイアウトを使うパート

01:37 完璧を目指さないやる量を増やそう

02:32 ナビコンテンツを完成させる

04:35 アイテムブロックのリンク範囲を調整

08:39 ロゴブロックをデザイン

13:14 ボタンブロックをデザイン

16:32 オートレイアウト内側を調整

24:15 プロフィールブロックをデザイン

32:36 全体調整をして完成へ

37:03 次はフィードをデザインしていきます!

今日はオートレイアウトを使ってナビゲーションを完成させていきます!

最初はできることが縛られて融通が効かないオートレイアウトですが、仕組みが決まっているUIを作る時はそのルールの中で組み立てられるので使い分けができるようになってくると強いです。


とにかく最初のうちはコツコツ使って挙動に慣れましょ~。



❐ 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=90%3A15250&t=prPDT58xfVIJljO0-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 オートレイアウトを使うパート

01:37 完璧を目指さないやる量を増やそう

02:32 ナビコンテンツを完成させる

04:35 アイテムブロックのリンク範囲を調整

08:39 ロゴブロックをデザイン

13:14 ボタンブロックをデザイン

16:32 オートレイアウト内側を調整

24:15 プロフィールブロックをデザイン

32:36 全体調整をして完成へ

37:03 次はフィードをデザインしていきます!

Figma初級

シリーズでやることを確認しよう
2
シリーズでやることを確認しよう

シリーズでやることを確認しよう

#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする
16:56
#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする

#1UIトレースで学ぶFigmaの使い方!オートレイアウトとコンポーネントをマスターして作業効率UP&UIの基本をマスターする

Figmaのコア機能を習得しよう
33
Figmaのコア機能を習得しよう

Figmaのコア機能を習得しよう

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

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

#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル
27:04
#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル

#3 コンポーネント機能の使い方 / ネスト状態にしてアイコンを切り替えられるようにしよう - Figmaの使い方チュートリアル

#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル
40:16
#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル

#4 オートレイアウトをフルに使ってナビゲーションを完成させよう - Figmaの使い方チュートリアル

身につけた機能を実践しよう
33
身につけた機能を実践しよう

身につけた機能を実践しよう

#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル
30:10
#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル

#5 オートレイアウトを使って『リスト切り替えUI』をデザインしよう! - Figmaの使い方チュートリアル

#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル
35:37
#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル

#6 『ツイート作成』UIをデザインしよう!しよう - Figmaの使い方チュートリアル

#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル
42:07
#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル

#7 コンポーネントとして繰り返し使えるツイートUIをデザインしよう - Figmaの使い方チュートリアル

#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!
39:32
#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!

#8 ついに完成!Figmaになれたら次にやるべきUIデザインの勉強法!

閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More