Figma のおすすめの教材8選！ 【 2023年3月 最新版】

アップデート：

• この講座をきっかけに著書『Figma for UIデザイン（翔泳社）』が生まれました!!

• 日本語版をお使いの方のために動画内に翻訳を入れました

• 最新版のFigmaのUIに対応できるよう動画内に注釈を入れました

Figmaは誰でも無料で使えるデザインツールであり、プロの現場でも使われる素晴らしいソフトウェアです。Mac / Windows / Webブラウザを使って誰でもデザインを始められ、その柔軟さと機能性でユーザー数を伸ばしていますが、日本語の体系的な教材がまだ少ない印象です。

この講座では、Appleのデザインを題材に本格的なUIデザインを学習します。
また、Figmaの強力なインタラクション機能とプラグインを使って、ハイレベルなプロトタイプを作成します（プロトタイプとは、できるだけ早い段階でデザインに欠陥がないかをテストする手法です）。

モバイルアプリをデザインする際のルール、一貫性のあるデザインの大切さ、感覚に頼らないデザインなど、デザイナーの思考法を解説しながら一緒にUIを作り上げていきますので、初学者はもちろん、エンジニアやマネージャーなど、普段デザインに関わらない方にもお勧めです！
学習した知識とテクニックは、Webデザイン制作にも活かすことができます。また、最終的なデザインは公開されており、自由に確認、編集することができます。

本講座ではFigma英語版を使用していますが、動画には翻訳や注釈が含まれており、日本語版をお使いの方でも受講頂けます。もし見つからないメニューやオプションがある場合は、お気軽に質問して頂ければと思います。

1. はじめに
2. はじめに
3. この講座で使用する教材
4. 初めてのFigma
5. アカウント作成とデスクトップ版のダウンロード
6. チーム・プロジェクト・ファイル
7. フォントのインストール
8. Figmaの基本
9. イントロダクション
10. Figmaの基本操作
11. 図形をまとめる方法の違い
12. 立方体を描く
13. カスタムシェイプを描く
14. ベジェ曲線を描く
15. テキストを追加する
16. パスをアウトライン化する
17. 最適な画像サイズ
18. 画像を読み込んで使用する
19. 画像オプションを変更する
20. 塗りオプションを使う
21. よく使うスタイルを登録する
22. コンポーネントとインスタンス
23. オートレイアウト
24. 制約・コンストレイント
25. オブジェクトを効率的に整列させる
26. 画像をエクスポートする
27. 複雑なオートレイアウト
28. UIデザインとFigmaの応用テクニック
29. イントロダクション
30. フレームとエレメントの追加
31. グリッドとナッジの設定
32. なぜグリッドシステムか
33. グリッドシステムの例外
34. レイアウトを始めよう
35. タブナビゲーションの追加
36. コンポーネントを作成する
37. ファイルの整理と変更履歴
38. アイコンを描く 1
39. アイコンを描く 2
40. アイコンを描く 3
41. アイコンを描く 4
42. タブメニューのアイコンを差替える
43. 外部リソースで時間を節約
44. 高品質な写真で画面を美しく
45. 無料の仕組み Unsplash
46. デザインに写真を設置する
47. 制約を追加する
48. タブナビゲーションの制約
49. カードとヘッダーの制約
50. カードUIのコンポーネント化
51. カードUIのカスタマイズ
52. カードUIを追加する
53. アイテムUIのレイアウト
54. 価格ボタンのデザイン
55. オートレイアウト
56. サイズ可変のボタンをつくる
57. リアリティのあるUIモック
58. iPhoneでデザインを確認
59. より良いデザインの管理
60. イントロダクション
61. テキストスタイルを作成する
62. インスタンスのスタイルを上書き
63. スタイルを使うメリット
64. カラースタイルを作成する
65. カラースタイルを適応する
66. ページを分割して見通しを良く
67. チームライブラリを公開する
68. 色指定の漏れをチェックする
69. 折り返し地点ラップアップ
70. アプリ画面の作り込み 1
71. イントロダクション
72. Today-Detail 1 / 遷移後の画面
73. Today-Detail 2 / ページのコンテンツを作成
74. Today-Detail 3 / 同じ構成要素の別レイアウトを作成
75. Today-Detail 4 / シェアボタンを作成する
76. Today-Detail 5 / Today-Detailを完成させる
77. アプリ画面の作り込み 2
78. App-Detail 1 / フレームの作成と要素の配置・サイズ決め
79. App-Detail 2 / 細かいデザインの調整
80. App-Detail 3 / タイトルコンポーネントと様々なテキストスタイル
81. App-Detail 4 / スクリーンショットからアプリの内容説明
82. App-Detail 5 / レイティングの詳細
83. App-Detail 6 / レビューの詳細
84. App-Detail 7 / アイコン付きのメニュー
85. App-Detail 8 / アプリの付加情報
86. App-Detail 9 / iOSの機能サポート
87. App-Detail 10 / レコメンデーション
88. App-Detail 11 / 制約を追加してリサイズに対応
89. App-Detail 12 / カラースタイルとテキストスタイルを確認
90. スライドのPDF
91. 高品質なプロトタイピング
92. イントロダクション
93. 初めてのプロトタイプ
94. ページの回遊を実現する
95. アニメーションを追加する
96. プロトタイプの品質を上げる
97. App-Detail への遷移
98. スクロール位置の問題
99. 横スクロールUIをつくる
100. リッチなUIをプロトタイプで実現
101. ユーザビリティの向上
102. オーバーレイを実現する
103. 高度なアニメーション 1
104. 高度なアニメーション 2
105. スライドのPDF
106. アニメーションによる豊かな表現力
107. イントロダクション
108. 繊細なアニメーション
109. アニメーションの素材をつくる
110. Figmotion
111. ボタンアニメーションの準備
112. 複雑なキーフレームアニメーション
113. スライドのPDF
114. プラグインを使った作業効率化
115. イントロダクション
116. 練習課題と答え合わせの方法
117. すべての画面をつなぐ
118. プロトタイプを加速させるプラグイン
119. プロトタイプを仕上げる

Figma講座 #1

Figmaって最近よく耳にする。

これまでもデザインツールもあるのに

なんで話題なの？何が良いのでしょう？

Figmaの概要、特長を知れます。

良いならすぐ使ってみたい。

難しい説明は面倒

登録から分からない

二の足を踏んでいる

現役プロデザイナーと作業画面を見ながら

一緒に制作してしまいましょう！

課題としてデザインを2つ作っていきます。

（課題用の素材データもリソースにご用意しました。

　すぐできます、準備はすこしのお時間だけ）

1、小さなカードで操作を学ぶ。

2、WEBサイトトップページを作ります。

　ワイヤーフレーム、デザインします。

ーーー

（対象の方）

初級講座です。Figmaを知りたい、触りたい方。

（（（講座を受講いただくと）））

• Figmaの概要、特長が知れます。

• すぐ知りたい。すぐ触ってみたい。

• Figmaが使えるように一緒にアカウント（登録）準備も行います

• ワイヤーフレームが作れるようになります。

• 簡単なデザインができるようになります。

（向かない方）

Tipsテクニック講座ではありません。

すでにグラフィックツールでデザイン制作をされている方。

XDをすでにご使用の方にも基本的な内容と思います。

ーーー

ベテランデザイナーが一緒に作り、語り口調でこうしておくといいぞとお伝えしていきます。

そして操作で「あっ間違えたっ」「なんかできない」という箇所もそのまま作業を進めて

よくある事例の解消としてご紹介しています。

受講後にもっと自分で作ってみたいな、と思っていただけるものと思います。

ではどうぞよろしくお願いいたします。

ひげあん

1. 講座紹介
2. コース概要、こんな方に
3. 講師紹介
4. カリキュラム
5. まとめ）講座で習得できること
6. Figmaとは
7. Figmaの概要
8. Figmaのメリット
9. Figmaのデメリット
10. まとめ）Figmaとは
11. Figma登録
12. （課題1）カードを作る
13. セクション確認、できるようになること
14. フレームと素材、ラフ確認
15. ツール を使って四角や丸を描く。線と塗り、レイヤーを知る。
16. レイアウトグリッド、余白
17. （デザイン）ラフレイアウト
18. （デザイン）デザインブラッシュアップ
19. （まとめ）使用ツールおさらい
20. （まとめ）カードデザインで得られたこと。
21. （課題2）WEBデザイン1 ワイヤーフレムを作る
22. セクション確認
23. WEBデザイン、デザイン制作論（NEW)
24. WF ワイヤーフレームを作る ガイドとカラム
25. WF テキストと要素
26. WF headerとheroview
27. WF welcome
28. WF sectionと拡大縮小
29. WF concept
30. WF menu
31. WF shopと名前
32. WF footer
33. （課題2）WEBデザイン2 　デザインする
34. WEBデザイン header、heroview、welcom、concept
35. WD menu
36. WD shop
37. WD footer
38. WD ブラッシュアップ
39. WD プレビュー確認
40. 講座振り返りまとめ
41. 講座まとめ

ご挨拶

皆さん初めまして、 8年間デザイナーをしておりますヤスダ先生と申します。

私は今まで100本以上の大手企業様・中小企業様のWEBサイト/スマホアプリ/バナー等のデザインに携わってきました。

自身でHP制作会社を運営している傍らWEBデザインスクールの立ち上げを行い、多くのWEBデザイナーを輩出してきました。

figmaは近年もっとも注目されているデザインツールです。

今figmaを学ぼうと思っている方、本当にラッキーです。

何故なら「figma」はPhotoshopやillustratorを全く触ったことない人でも簡単にWEBサイトが作れるようになります。

私もfigmaを使うようになってからfigmaの虜になり

今ではWEBサイトやスマホアプリなどほとんどfigmaを使用しています。

最新デザインツールで難しそう..と思っているそこのあなた！全く心配いりません。

figmaはめちゃくちゃ簡単なんです。

本講座では0から一緒にWEBサイトを作成していきます。

また実務で使えるガイドラインやコンポーネント管理など本格的な技術も習得できます。

是非この機会に動画をご覧いただき、一緒にfigmaの基本を学んで実際の制作現場で使っていけるよう使いこなしましょう！

1. 紹介
2. 本講座で学べる事＆ヤスダ先生の自己紹介
3. figmaの基礎知識を学ぼう
4. デザインツールの役割を知ろう
5. figmaでできる成果物を実際に見てみよう（スマホアプリ、システムデザイン、WEBデザイン...）
6. figmaのダウンロード方法と初期画面説明
7. 図形を描いて基本操作を学ぶ
8. 色の変更方法やアートボードの適切なサイズの決め方
9. 図形の結合や線のつけ方
10. ページの作成＆図形を整列する方法
11. figmaでワイヤーフレームを作ってみよう
12. figmaファイルの取り込み方＆完成デザインのイメージ確認
13. ワイヤーフレームを作ってみよう＆有名フォント「Noto sans JP」のダウンロードの仕方
14. ワイヤーフレームを完成させよう＆デザインの要素配置のコツを学ぶ
15. figmaの基本的な操作でデザインを仕上げよう
16. 作ったワイヤーフレームでヘッダーをデザインしてみよう
17. マスターコンポーネントの活用＆4の倍数で余白を調整するわけ
18. カラーパレット独自カラーの設定方法
19. アイコンの命名方法＆余白設定のコツ
20. 写真へホバーをかける方法
21. 模写する重要性とshadowのかけ方
22. figmaで上級技を学んでみよう
23. プラグインの導入方法＆マスターコンポーネントとインスタンスの方法
24. ガイドラインとは何？実際の実務で示すガイドラインを見てみよう
25. 書き出し方法＆リンクの共有方法＆figmaを日本語化知る裏技
26. さいごに
27. ボーナスレクチャー

Figmaは2022年にAdobe社が買収したデザインスイートです。画像パーツや画面デザイン、またプロトタイプデザインや画面設計などをWebブラウザ上で行える、高度なデザインツールです。また、Adobe XDは AdobeのデザインスイートであるCreative Cloudの1つとして、同じく設計やデザインなどを行えるツールとして開発されていました。

この講座では、ディレクターとしてWebデザインなどを行う講師のたにぐちと、デザイナーのanygraphicaにより、Figmaおよび、XDをデザインツールとしての側面と設計ツールの側面を両方紹介します。

Figma / Adobe XDをこれから使っていきたいという方はもちろん、すべての機能を使いこなせていないという方の復習にも活用頂ければ幸いです。

1. 紹介
2. Udemyでの受講にあたって
3. Figma編： Figmaの基本操作を学んでボタンを作ろう
4. Figmaのアカウントを作成してログインしよう
5. 長方形や楕円などのシェイプを描こう
6. デザインパネルで細かな調整を行おう
7. ボタンパーツを作成しよう
8. テキストツールでボタンのラベルを作ろう
9. テキストツールの細かい調整をしよう
10. ペンツールでパス編集とベジェ曲線を描こう
11. ペンツールでボタンの矢印を描こう
12. パス編集をして、シェイプを自由に編集しよう
13. 位置揃えツールで、シェイプの位置揃えを調整しよう
14. グループ化で、複数のシェイプをグループにしよう
15. レイヤーでシェイプの前後関係を調整しよう
16. 合成とグループ化の違いについて知ろう
17. コンポーネント化して再利用可能なパーツにしよう
18. Figma編：バナー画像を作成しよう
19. 写真素材を挿入しよう
20. プラグインを使って写真の挿入を簡単にしよう
21. マスクを使って、写真を一部分だけ切り抜いて利用しよう
22. Adobe Illustratorのデータを挿入しよう
23. フィルターを利用して写真を加工しよう
24. ロックをして不意の変更ができないようにしよう
25. 文字要素を配置してバナーを仕上げよう
26. エクスポート機能を利用して画像を書きだそう
27. Figma編：プロトタイプモードでスマホアプリの設計をしよう
28. Figmaコミュニティから、テンプレートを利用しよう
29. 画像パーツをコピーしよう
30. レイアウトグリッドを表示して、画面のレイアウトを調整しやすくしよう
31. 制約を設定して、画面サイズが変化したときのレイアウトを設計しよう
32. 子フレームを使ってレイアウトしやすくしよう
33. オートレイアウト機能を使って、複数のパーツを配置しよう
34. オートレイアウトについてさらに詳しく知ろう
35. オートレイアウトを使って、柔軟なボタンを作成しよう
36. プレゼンテーションモードを使って作った設計をプレビューしよう
37. 詳細画面を制作しよう
38. インタラクションを設定して画面を遷移できるようにしよう
39. プロパティを利用してタップで状況の変わるボタンを作ろう
40. プロパティを使って、ボタンのテキストも変更できるようにしよう
41. インタラクションを使って、ローディングアニメーションを作成しよう
42. 共有機能でデザイナーやプログラマーと共有しよう
43. Adobe XD編：Adobe XDの基本操作を学び、ボタンをデザインしよう
44. 新規ドキュメントの制作とアートボード
45. 描画ツールを使って、長方形や円を描こう
46. ベクターオブジェクトを編集しよう
47. プロパティパネルで細かな調整をしよう
48. ペンツールでベジェ曲線を描こう
49. パスツールを使って、細かい調整を行おう
50. グラデーションツールでボタンの色を塗ろう
51. 文字ツールでボタンのラベルを作成しよう
52. グループツールで複数のオブジェクトをグループにしよう
53. レイヤーパネルでのグループの管理方法を知ろう
54. コンポーネントを利用して、再利用可能なパーツを作ろう
55. Adobe XD編：Photoshop/IllustratorやAdobe Stockと組み合わせてバナー画像を作成しよう
56. Adobe Photoshop/Illustratorとの連携を知ろう
57. Creative Cloudライブラリ（CCライブラリ）で素材を受け渡そう
58. レイヤーパネルで前後関係を調整しよう
59. Adobe Stockで無料で使える写真素材を手に入れよう
60. マスクを使って、写真を切り抜こう
61. ロック機能でオブジェクトの編集をロックしよう
62. バナー画像を作ろう①
63. バナー画像を作ろう②
64. エクスポート機能で作ったバナー画像を書きだそう
65. Adobe XD編：プロトタイプ機能でアプリの設計を作成しよう
66. [補足] UIキットの入手方法の変更について
67. UIキットで設計に使えるパーツを入手しよう
68. ステートを設定して、複数の見た目を定義しよう
69. グリッドレイアウトで、画面レイアウトをやりやすくしよう
70. リピートグリッド機能で、同じパーツを連続して配置しよう
71. レスポンシブ機能で、複数の画面サイズのレイアウトを設計しよう
72. スタックでボタン類をレイアウトしやすくしよう
73. パディングを設定して、長さが自動で調整されるボタンを作ろう
74. プロトタイプ機能で動きをシミュレーションしよう①
75. プロトタイプ機能で動きをシミュレーションしよう②
76. ステート機能でトグル時やホバー時のシミュレーションをしよう
77. アニメーション機能でローディング時アニメーションを作成しよう
78. 共有機能でXDを持っていないエンジニア・クライアントにもデータを共有しよう

当講座は「最新の日本語版Figma」の画面を使って、Figmaの基本操作から始まり、PC版・タブレット版・スマホ版の３つの異なる画面サイズのデザインを作る「レスポンシブWEBデザイン」の作り方と考え方を、その工程を見せながら一緒に作っていくという、WEBデザイナーを目指す方や、他のツールからFigmaに乗り換えたい方へ向けた動画です。

また単にFigmaの使い方を学ぶだけでなく、美しく見やすいデザインの作り方や今風のデザインを作るには、どのような考え方でデザインすれば良いのか？といったところまで踏み込んで、実際にデザインを作る工程を収録しており、UI/UXデザインにも応用可能です。

Figmaは現在、PhotoshopやXDを超える使いやすさと便利さで、大人気のツールです。

私自身10年以上Photoshopを使ってWEBデザインをしてきましたが、そんな私がFigmaの魅力に取り憑かれ、現在ではPhotoshopとFigmaを使い分けて、両方でWEBデザインをするようになりました！

Photoshopにもその良さはありますが、Figmaにしか無い魅力もたくさんあり、そのFigmaの使いやすさや便利さを余すことなくお伝えしたいと思います。

1. この講座について
2. 当講座はどういう講座なのか？
3. 【スキップ可】Udemy動画の便利の機能と使い方
4. Figmaについて
5. Figmaとは・他のソフトとの違い
6. Figmaの始め方
7. Figmaの基本の使い方
8. Figmaの基本：イントロダクション
9. Figmaの無料プランでできること
10. Figmaの画面解説と基本操作
11. Figmaのレイヤー構造と入れ子の仕様
12. Figmaの基本のショートカット
13. Figmaの検索と置換機能
14. Figmaの各種ツールバーの使い方
15. Figmaのプロパティパネルの使い方
16. Figmaの便利な機能
17. Figmaの便利機能：イントロダクション
18. オートレイアウトの便利な使い方・フレームとの違い
19. コンポーネント・インスタンス・バリアントの使い方
20. 色スタイル・テキストスタイル・エフェクトスタイルの使い方：コンポーネントとも併用
21. マスクの使い方：マスクを使った写真の合成
22. プラグイン・ウィジェットの使い方
23. レスポンシブデザイン実践：パソコン版デザイン
24. レスポンシブWEBデザインの考え方
25. レイアウトグリッド・ガイドの作成
26. ヘッダーエリアの作成　〜優先度に応じたデザイン〜
27. メインビジュアルエリアの作成　～FIgmaで簡単な画像の加工～
28. コンポーネントを活用したグローバルナビの作成
29. コース一覧エリア　～横スクロールオブジェクトの作り方～
30. スクールについてエリア　〜写真やテキストをキレイに見せる〜
31. 人気の理由エリア　～入れ子のフレームによるレスポンシブ対応～
32. バナーエリア　～優先度の高いバナーデザイン～
33. フッターエリア　～調整しやすいリンクの作り方～
34. デザインのチェック　～バランス調整・不具合のチェック～
35. 美しいデザインにするためのポイント
36. 実践：スマホ版・タブレット版のレスポンシブ化
37. 実践：タブレット版デザイン
38. 実践：スマホ版デザイン
39. 実践：スマホ版メニューデザイン
40. 実践：スマホ版下層ページデザイン
41. プロトタイプの作り方
42. プロトタイプの作成
43. Figma公式アプリでスマホの実機チェック
44. 終わりのご挨拶