続きはこちら：Youtube無料のFigmaチュートリアルです

続きの動画はこちらに。無料でFigmaの使い方とUIデザインを始められるシリーズになっています。
無料でYoutubeUIをトレースしながらFigmaの使い方を学びましょう。

▼再生リストはこちら

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

‍

Figmaのファイル構造や初期設定でやるべきことをまとめました。

次から実際に作成する部分に入っていきます！

📜目次

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

00:46 今日のポイント

01:11 1.管理画面の全体像

03:21 2.ファイル構成について知ろう

08:17 3.初期設定を使用

10:41 4.デザインするファイルを作成

12:16 次の動画は実際に作っていきます

‍

今回からデザインに入っていきます！

まずは簡単なバナーをトレースしながらFigmaの操作について入っていきましょう〜！

‍

‍

📜目次

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

00:31  今日のポイント

01:10   他のファイルからコピー

04:09  ツールの配置構造

09:14   画像やテキストの配置

🚩バナー作成で使う素材

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

□ バナーのFigmaファイル

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=55%3A50

□ 画像素材

https://drive.google.com/drive/folders/17Ius1o28n3QrsnfCWMTnUsp-gikAmym2?usp=sharing

‍

これでバナー編と題した超基礎編終了です。

慣れるとパワポのスライドなんかも正確に作れるようになると思います💡

（PDFに書き出す or 画像書き出してパワポに挿入etc）

📜目次

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

00:44  今日のポイント

01:10  1.作成するバナーのグラフィックTIPS

03:21 2.サイズ調整をしてバナーを仕上げる

03:58  オブジェクトサイズ調整

07:18  四角形ツールで背景作成

09:44  四角形の色などを調整

11:31   figmaをグループ化

13:47  余白を調整　

19:07 画像を書き出す

21:32 次はUI編

‍

‍

今回から「UIデザイン編」です。WebデザインやUIデザイン向けのツールであるFigmaならではの機能もチュートリアルにしていきます💡

📜目次

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

01:00  UIデザイン編:作るものを紹介

03:11 紹介する主要機能

04:09 おわりに：身に付くレベル感

‍

ヘッダーUIをFigmaでデザインします！

📜目次

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

00:28  今日のポイント

01:00  スマホサイズの"frame"を設置

02:51  ヘッダーのコンポーネント

07:21  ヘッダー構造を知ろう

11:07  ブランドロゴの設置方法

14:40  アイコンを設置

📜素材

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

Figma - ヘッダー素材

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=101%3A83

コンポーネント

https://www.figma.com/file/vxQQrYX6qdIplBLXhlghy6/Figma-iOS-UI-Kit-(Free)-(Community)?node-id=45%3A137

‍

ボトムナビゲーションをデザインします！

📜目次

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

00:00  ボトムナビゲーションを作る

00:42  今日のポイント

02:32  ボトムナビの構造

04:53  ボトムナビの項目の増やし方

07:22  アイコン・テキストの配置

12:49  おわりに

📜素材

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

Figma - ボトムナビゲーションの素材

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=102%3A1328

iOS UI Kit

https://www.figma.com/file/vxQQrYX6qdIplBLXhlghy6/Figma-iOS-UI-Kit-Free-Community?node-id=252%3A5572

‍

マスク機能、境界線を使って動画コンテンツUIをデザインします。

📜目次

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

00:00  コンテンツUIを作る

00:27  今日のポイント

01:02  マスク機能で画像を配置

04:36  アイコンとテキストを配置

10:27  境界線×ボーダーツール

11:27  ストーリーUIを作る

15:48  ユーザーアイコンを作る

21:40  おわりに

‍

今までやってきた機能をフル活用してページを作ります。

📜目次

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

00:00  閲覧画面のUIをつくる

00:32  今日のポイント

00:58  フレームを作成/準備

02:22  動画エリアに画像を配置

09:43  アイコンを均等に配置

13:58  チャンネル登録エリア作成

17:45  コメントエリア作成

21:23  レコメンドエリア作成

26:46  次は突っ込んだ機能をやってきます

📜素材

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

Figma - 動画閲覧UIの素材

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=102%3A1929

‍

Figmaのより便利な機能「カラーパレット」の動画です。

UIはシステムで設計していくので、うまく使うと強力です。ぜひ慣れていきましょう。

📜目次

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

00:00  カラーパレット機能解説

01:11  今日のポイント

01:31  UI配色の基礎

02:30  配色カテゴリを知ろう

06:58  カラーパレット機能

11:36  登録した色で配色

16:56  おさらい

📜素材

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

Figma - カラーパレットの素材

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=104%3A579

‍

Figmaのより便利な機能「カラーパレット」の動画です。

UIはシステムで設計していくので、うまく使うと強力です。ぜひ慣れていきましょう。

📜目次

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

00:00  プロトタイプ機能解説

00:36  プロトタイプ機能とは

01:16   基礎 - プロトタイプ機能

05:08   ホバー表現を付与

06:21   簡易なアニメ～ジョン

07:30   おさらい

📜参考

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

Figma - 動画で見せたプロトタイプ機能

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=173%3A895

‍

Figmaのより便利な機能「オートレイアウト」の動画です。

こいつはかなり便利なので、実際に手を動かして使えるようにしてみてください👋

📜目次

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

00:00 オートレイアウト機能解説

00:27 今日のポイント

00:39 ❶オートレイアウトの設定

02:09 ❷自動で余白調整

03:40 ❸ボタンにオートレイアウト

05:15 オートレイアウトをUIで

07:31 おわりに

‍

Figmaのより便利な「コンポーネント」機能の動画です。

📜目次

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

00:00 コンポーネント機能解説

00:35 今日のポイント

00:56 ❶機能説明

02:57 ❷使い方

07:10 ❸UIの効率化イメージ

10:33  まずは小さく試そう

📜参考

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

Figma - コンポーネント機能の素材

https://www.figma.com/file/i0PMMa8PC2TYcjgBqtqcrD/figma%E8%AC%9B%E5%BA%A7?node-id=103%3A1

‍

Figmaのより便利な「Smart Animate」機能の動画です。

📜目次

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

00:00 Smart Animate 機能解説

00:31 今日のポイント

01:52 ❶アニメーションの全体解説

03:38 スマートアニメーション機能

04:53 ❷Smart Animate設定

07:32 ❸Delay&GIFで遷移

10:50 ❹アニメーショントリガー

11:43  Figma終了&感謝

12:29  今後の話

‍