自己紹介
フリーランスエンジニアをしているヨノと申します。
独学でプログラミングを学び、ソシャゲ・SaaS開発などを経て、2018年からフリーランスエンジニアとして活動しています。
主にバックエンド中心の案件を獲っていますが、たまにはフロントエンドも。
主な使用言語・FWは、Ruby/Rails/Go言語/JavaScript/TypeScript/React/Vue.js
皆さん、Figma使っていますか?
最近、デザイナー・ディレクターさんからFigmaでワイヤーフレームやデザイン共有されることが増えてきました。
デザイナー・ディレクター・エンジニアにとって、重要なツールとなりつつあると感じます。
そこで、今回は「Figmaを学んでスキルアップしたい」けど
- 「どんな教材を選べば良いかわからない...」
- 「自分のスキルにあった教材を知りたい!!」
といった疑問をお持ちの方に、UdemyでFigmaを学べるおすすめコースを紹介していきます!!
目次
Udemyとは?
Udemyとは色んな分野のトップ講師の講座動画を購入できるプラットフォームで、特に「プログラミング」の分野は講座数が多くて充実しています。
Udemyの特徴
- PCの画面や資料を映しながら説明してくれるのでわかりやすく、書籍より早く学べる
- 講師に質問でき、他の人の質問とその回答も見れる
- スマホでも見れるので、スキマ時間を活用できる
- 復習として2周目、3周目するときは倍速再生を使うことで効率よく学べる
- 満足できなかった場合、30日以内であれば返金してくれる
満足できなければ返金してもらえるので、少しでも気になる講座があれば、どんどん受講してスキルアップできるわけです!!
Figmaとは?
Figmaは、UIデザインやワイヤーフレームの作成に便利なデザインツールです。
Figmaの便利なところは、WebブラウザでもmacやWindowsのデスクトップアプリでも利用できる点です。作成したデザインやワイヤーフレームをWeb上で呼び出すことができるため、チャットにURLを貼るだけでチームメンバーに共有することができます。
また、1つのファイルを複数のメンバーで編集することができるので、デザイナー、ディレクター、エンジニアなどチームメンバーとデータ共有し、ディスカッションしながら制作することも可能です。
このような利点からFigmaを導入する企業が増えてきています。
UdemyでFigmaを学べるおすすめ講座3選
本記事で紹介しきれない優良講座もたくさんあるので、ご自身でもFigma講座一覧から探してみてください!!
初心者から始めるアプリデザイン<UI/UXデザインをFigmaで学ぼう!>Webデザインにも応用可能

講座時間 | 13.5時間 |
評価 | ☆4.6(2022/11/6現在) |
受講者数 | 9,112人(2022/11/6現在) |
講師 | UI/UXデザイナー。 フリーランスとして国内外問わず活動している。 |
対象者 | デザイン知識不要(デザイナー・ディレクター・エンジニア) |
講座内容
Figmaは誰でも無料で使えるデザインツールであり、プロの現場でも使われる素晴らしいソフトウェアです。Mac / Windows / Webブラウザを使って誰でもデザインを始められ、その柔軟さと機能性でユーザー数を伸ばしていますが、日本語の体系的な教材がまだ少ない印象です。
この講座では、Appleのデザインを題材に本格的なUIデザインを学習します。
また、Figmaの強力なインタラクション機能とプラグインを使って、ハイレベルなプロトタイプを作成します。※ プロトタイプとはアプリ開発の際に、できるだけ早い段階でデザインに欠陥がないかをテストする手法です。
モバイルアプリをデザインする際のルール、一貫性のあるデザインの大切さ、感覚に頼らないデザインなど、デザイナーの思考法を解説しながら一緒にUIを作り上げていきますので、初学者はもちろん、エンジニアやマネージャーなど、普段デザインに関わらない方にもお勧めです!
学習した知識とテクニックは、Webデザイン制作にも活かすことができます。
また、最終的なデザインは公開されており、自由に確認、編集することができます。

私は普段SaaS開発をしているWebエンジニアなのですが、UIデザインについてアイデア議論するためにFigmaを軽く触ることがよくあったため、基本から学ぼうとこの講座を受講しました。
この講座は基礎的なところから網羅的にカバーされており、また簡潔にわかりやすく説明されているため、大変満足なものでした。Figmaを触るエンジニアには強くオススメしたい内容になっています。(ちなみにエンジニアにとってはSection1~6, 8をやるだけでも十分かと思います。)
Figmaの使い方に特化した書籍は探してもなかったため、ダメ元でこの講座を買ってみましたが、大当たりでした。

某WebスクールでWebデザインコースを受講した際figmaを使用していましたが、知識的に物足りなかったので、こちらのコースに興味を持ち受講しました。
figmaの基礎と応用も丁寧に解説されていて、本当に受講して良かったと思います!
そしてグリッドシステム!Webスクールでも教えてもらえなかったこの知識、これを得られたことは非常に大きいです!
大変でしょうが、figmaがアップデートされたら、動画も差し替えてほしいですね。Shunsuke Sawadaさんのコースは全て受講します!
こんな方におすすめ
- 作業をもっと効率化したいデザイナー
- 効率よくワイヤーフレームを作れるようになりたいデザイナー・ディレクター
- デザイナーの思考を取り入れたいマネージャー
- デザインに興味のあるエンジニア
- モバイルアプリのデザインを始めたい人
↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓
【2021年最新】現場のプロが教えるfigma初心者はまずはこれ!|0からWEBサイトを簡単に作成。爆速習得裏ワザ公開

講座時間 | 2.2時間 |
評価 | ☆3.8(2022/11/6現在) |
受講者数 | 1,331人(2022/11/6現在) |
講師 | HP制作会社経営者。 今まで100本以上のWEBデザインや有名なアプリデザインを作成。 |
対象者 | デザイン知識不要(figmaを学んでみたいという好奇心があればOK) |
講座内容
ご挨拶
皆さん初めまして、 8年間デザイナーをしておりますヤスダ先生と申します。
私は今まで100本以上の大手企業様・中小企業様のWEBサイト/スマホアプリ/バナー等のデザインに携わってきました。
自身でHP制作会社を運営している傍らWEBデザインスクールの立ち上げを行い、多くのWEBデザイナーを輩出してきました。
figmaは近年もっとも注目されているデザインツールです。
今figmaを学ぼうと思っている方、本当にラッキーです。
何故なら「figma」はPhotoshopやillustratorを全く触ったことない人でも簡単にWEBサイトが作れるようになります。
私もfigmaを使うようになってからfigmaの虜になり
今ではWEBサイトやスマホアプリなどほとんどfigmaを使用しています。
最新デザインツールで難しそう..と思っているそこのあなた!全く心配いりません。
figmaはめちゃくちゃ簡単なんです。
本講座では0から一緒にWEBサイトを作成していきます。
また実務で使えるガイドラインやコンポーネント管理など本格的な技術も習得できます。
是非この機会に動画をご覧いただき、一緒にfigmaの基本を学んで実際の制作現場で使っていけるよう使いこなしましょう!

Figmaを初めて触りましたが、WEBサイトのデザインを模写しながら使い方を学んでいくので、基本的な使い方が良く理解できました。初めて触るにはちょうど良いと思います。

全体的に簡潔で分かりやすく学ぶことができ、基本操作の良い勉強になりました。ありがとうございました。
セクション2の5と6が重複していたことのみ、修正していただけると幸いです。
こんな方におすすめ
- ディレクターやエンジニアの方でサクッとワイヤーやデザインを作ってみたい方
- Photoshopやillustratorに苦戦してしまった方
- 未経験でWEBデザイナーやデザイナーになりたい方
↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓
Learn Figma - UI/UX Design Essential Training

講座時間 | 3.5時間 |
評価 | ☆4.5(2022/11/6現在) |
受講者数 | 50,757人(2022/11/6現在) |
講師 | 7年以上、WebおよびiPhoneアプリ設計に携わる。 ワークショップなどを通じてUXデザイナーの育成支援を行う。 |
対象者 | デザイン知識不要(デザイナー・ディレクター・エンジニア) |
講座内容
igma はオンラインで実行可能な強力なアプリケーションです。
Figmaは、Webブラウザー内で設計したり、WindowsおよびMac用のデスクトップアプリケーションを使用したりできるため、どのプラットフォームでも利用できます。FigmaはSketchやAdobeXDに似ていますが、チームのコラボレーションと応答性の高いペースの速いデザインに関してはFigmaの方が便利です。
このコースでは、Figma内の便利なツールを使用したUI設計について説明します。最初のセクションでは、Figmaの使い方について説明します。ここでは、デザインを応答性の高いものにするための制約や、プロジェクト全体で使用するデザイン要素を構築するコンポーネントなどの便利なツールについて学びます。また、リアルタイムのチーム内での共同作業や同じプロジェクト内の他のユーザーと緊密に連携する方法についても説明します。
後半は、複数のアートボード、カスタムアイコンのデザイン、画像やテキストの編集など、洗練されたデザイン作成に必要な要素を学ぶために、アプリのデザインとプロトタイプ作成について説明します。
デザインの初心者や、SketchやAdobeXDなどの他のツールから切り替えたいUI / UXデザイナー の方はぜひ受講してみてください。
こんな方におすすめ
- UI / UX デザイナー
- WEBデザイナー
- グラフィックデザイナー
- UI / UX を学びたい初心者
↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓
The Complete Figma Course – Designing Mobile & Web App UI/UX

講座時間 | 5.5時間 |
評価 | ☆4.5(2022/11/6現在) |
受講者数 | 7,968人(2022/11/6現在) |
講師 | 起業家兼デザイナー。 FCAlertViewというオープンソースライブラリの設計および開発。 |
対象者 | デザイン知識不要(デザイナー・ディレクター・エンジニア) |
講座内容
Figmaを使用して、美しいモバイルおよびWebユーザーインターフェイスを作成する方法を学習します。Figmaは、チームや個人がより速く、より効率的に設計を作成できるようにするデザインツールです。 Figmaは無料でWebブラウザー、Mac、Windowsで使用できます。
このコースはどんな人に適していますか?
次の項目に当てはまる場合は、受講してみてください。
- UI / UX に興味があるが、何から始めればよいかわからない
- アプリのアイデアをモックアップとプロトタイプにしたい
- デザインスキルを磨きたい
- Figmaを身につけて、次のレベルに上がりたいと思っているデザイナー
- フリーランスのデザイナーになることに興味がある
- 単に新しいキャリアパスに進みたいと思っている
このコースを終えた頃には?
Figmaの優れた機能を学び、魅力的なモバイルおよびWebモックアップを設計できるようになります。
このコースの受講に必要なもの
このコースは、スキルを伸ばしたい初心者と経験豊富なデザイナーの両方を対象としています。
必要なのはパソコンとWebブラウザーだけです。
コースの概要
このコースは、「Figmaについて学ぶ」、「モバイルモックアップの設計」、「シンプルなWebアプリモックアップの設計」という3つのセクションに分かれています。
① Figmaについて学ぶ
- Figmaが優れている理由を理解する
- Figmaにサインアップする
- ソフトウェアの基本を確認する
- Sketchからファイルをインポートする
- フレーム、シェイプの作成、および描画ツールを使用した探索
② モバイルモックアップの設計
- Clean Kangarooと呼ばれる洗濯配送サービスのモバイルアプリUIの設計
- 再利用可能なデザインコンポーネントの作成
- 制約を使用したモバイルデバイス向けのレスポンシブデザインを作成する
- 色やタイポグラフィを変更しやすい適用方法
- モックアップをインタラクティブなプロトタイプに変える
- 実際のデバイスでプロトタイプをテストする
- デザインの共有とエクスポート
- Figma内のチームと同時に作業する
③ 単純なWebモックアップの設計
- Clean Kangaroo用の3ページのWebアプリUIの設計
- 自動レイアウトを使って、スマートで動的なデザインを作成する
- プラグインを使用してサンプルデータをデザインに入力する
Figmaを使用して実際のプロジェクトをデザインする方法を学び、デザインスキルを新しいレベルに引き上げましょう。
こんな方におすすめ
- UI / UX デザイナー
- WEBデザイナー
- グラフィックデザイナー
- UI / UX を学びたい初心者
↓↓↓講座の一部が無料公開されているので、確認してみてください!!↓↓↓