.webp)
コースの目的
TwitterUIをトレースしながらAuto LayoutやComponent機能の使い方を実務ベースで習得しよう！
UI/UXの現場で使う最低レベルのFigma操作を身につけ、効率よくUIの仕組みを考えながらデザインしていくことが可能になるシリーズです。
未経験からデザインをする上で実行すべきFigmaの操作を扱えるようになります。具体的には「Auto Layout（オートレイアウト）」を使った、UIを意味のブロック構造で組んでいく方法や、同じ意味のUIを使いまわす「Component（コンポーネント）」を使ったシステマチックなUIデザインの基礎に触れることができます。
現場でどういうふうにUIが組まれるのか？のイメージが持てるシリーズです。いきなり全てを使えるようになるのは時間がかかりますが、実務レベルで最低扱えるFigmaスキルを紹介しているのでこのシリーズを通して使い方を理解し徐々に使用できるようになりましょう。
今回から「UIトレース」の要領と、Figmaの必須機能「オートレイアウト」と「コンポーネント」の基本の使い方をリアルなUIで学べるチュートリアルシリーズを公開開始します！
Figmaの使い方に関しても、細かいけど作業しているとよく使う使い方も、トレースしながら解説してます。理解深まること間違いなし～！
初心者向けですが、入門編ではないので、これからFigmaを触るよ～という方は↓のシリーズをやってからやるとちょうど良いと思います！💡
❐ Figmaファイル
-------------------------------------------
動画で完成したFigmaファイルはこちら
※コピペして手元のファイルでお使いください。その場で編集はできません
❐ 関連動画
-------------------------------------------
Figma入門シリーズ
https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z
オートレイアウトの機能説明
コンポーネント機能説明
2回目は以下をデザインしていきます～！地味かもですが、丁寧に見た目と良い構造を理解して作っていくと、良いソフトウェアデザイナーの1歩になります～！👌
- ページ全体の構造をチェック&定義
- アイコンのサイズの揃え方
- オートレイアウトで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
オートレイアウトの機能説明
コンポーネント機能説明
❐ 目次
-------------------------------------------
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つ目の必須機能「コンポーネント」
Figmaのコンポーネントについてです。
「ネストコンポーネント」という状態に持っていって、柔軟性の高いListItemのコンポーネントをデザインしていきます。
目次も活用してデザインしてみてくださいね～。
❐ 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=83%3A13983&t=vI5F0SYZ4XR1cxd0-1
❐ 関連動画
-------------------------------------------
Figma入門シリーズ
https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z
オートレイアウトの機能説明
コンポーネント機能説明
❐ 目次
-------------------------------------------
00:00 今日はコンポーネントをマスターするぞ
01:26 とりあえずコンポーネントにする
05:37 アイコン切り替え：ネストコンポーネント
06:39 アイコンをコンポーネント登録
07:19 Frameサイズの調整方法
10:24 アイコンを綺麗に揃えるには？
13:00 アイコンサイズを揃える
17:02 アイコンをコンポーネントに
21:03 コンポーネントの完成へ！
24:36 次回：ナビゲーション完成へ
今日はオートレイアウトを使ってナビゲーションを完成させていきます！
最初はできることが縛られて融通が効かないオートレイアウトですが、仕組みが決まっている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
オートレイアウトの機能説明
コンポーネント機能説明
❐ 目次
-------------------------------------------
00:00 オートレイアウトを使うパート
01:37 完璧を目指さないやる量を増やそう
02:32 ナビコンテンツを完成させる
04:35 アイテムブロックのリンク範囲を調整
08:39 ロゴブロックをデザイン
13:14 ボタンブロックをデザイン
16:32 オートレイアウト内側を調整
24:15 プロフィールブロックをデザイン
32:36 全体調整をして完成へ
37:03 次はフィードをデザインしていきます！
オートレイアウトを使って『リスト切り替えUI』のデザインを実践していきましょう！
❐ Figmaファイル
-------------------------------------------
動画で完成したFigmaファイルはこちら
❐ 関連動画
-------------------------------------------
Figma入門シリーズ
https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z
オートレイアウトの機能説明
コンポーネント機能説明
❐ 目次
-------------------------------------------
00:15 PrimaryBlockをデザインしていこう
01:24 この動画でデザインするもの
04:10 "ページタイトル"ブロックをデザイン
09:41 "ヘッダー"ブロックをデザイン
11:45 "リスト切り替え"UIをデザイン
19:24 仕上げ : "リスト切り替え"UI
24:16 タブのON/OFFをコンポーネントにしよう
28:01 次：ツイート入力UIをデザインします
だいぶFigmaの使い方に慣れてきましたか～？
今回は『ツイート入力UI』をデザインしていきます！
❐ Figmaファイル
-------------------------------------------
動画で完成したFigmaファイルはこちら
❐ 関連動画
-------------------------------------------
□ Figmaの使い方 : 入門シリーズ
https://www.youtube.com/playlist?list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z
□ オートレイアウトの機能説明
□ コンポーネント機能説明
❐ 目次
-------------------------------------------
00:00 ツイート入力UIをデザイン
00:13 この動画のポイント！
02:31 メインコンテンツエリアをデザイン
13:45 アクションブロックをデザインしよう
22:38 ボタンのデザイン
27:23 ブロック全体をまとめます！
33:11 次のデザインでやること
コンポーネントとして繰り返し使えるツイートUIをデザインしましょう！
❐ 目次
-------------------------------------------
00:00 ツイートUIをデザイン
00:13 今日のポイント
09:57 ツイートのヘッダーを完成させる
17:13 アクションブロックをデザイン
30:33 全体のブロックを整えよう
39:06 次は！
ついに完成です！Figmaになれたら次にやるべきUIデザインの勉強法もお伝えしていきます！
❐ 目次
-------------------------------------------
00:00 今日で終わりです！
00:57 UIスキルを上げる為に次やること
04:26 おすすめの勉強法
10:19 Footerをデザインしよう
22:20 他のブロックもデザインしよう
31:03 全体のブロックを整えよう
35:57 完走した方おつかれさま！！
概要
Figmaの使い方は少し理解できた状態で、さらにUIデザインのためのFigmaの操作を覚えたい方向けのシリーズです。
TwitterのデスクトップUIをトレースしながら、Figmaのコア機能である「AutoLayout」や「Component」機能について、UIをデザインしながら使い方を身につけられます。
ただ操作方法を覚えるだけではなく、実際のUI作成でどのように使われるのか？なぜ使わないといけないのか？とセットで身につけていけるシリーズになってます。
また、Figmaを使う上での細かいTIPSも作りながらシェアしていきます。
このシリーズを完了すれば、未経験からUI/UXデザイナーになる上で一通りFigmaに必要な操作を身につけることができるでしょう。
目標
TwitterのデスクトップUIをトレースしてFigmaの使い方を身につける
スケジュール
とにかく理解するより動画の内容を真似してデザインを作ることにフォーカスしましょう。1週間、2週間ほどで完了することを想定しています。
コースレベル
Figmaの操作をある程度わかった状態で進めるのをお勧めします。
細かい説明はしていません。
誰におすすめ
これからUIデザインを始める人やFigmaの操作を扱いたい人向けです。