こんにちは。記事をご覧くださりありがとうございます!みなさん「Figma(フィグマ)」はご存知でしょうか?
「Figma(フィグマ)」とは、デザイン初心者からプロまで幅広く利用される強力なデザインツールです。
本記事では、「Figma」の登録方法から基本操作までをわかりやすく解説します。これを読めば、あなたもすぐに「Figma」を使いこなせるようになります!
Figmaとは
「Figma(フィグマ)」とは、Figma.Incによって開発されたブラウザベースのコラボレーション・インターフェース・デザイン・ツールです。

デザインとプロトタイピング(デザイン試作)が一体化しており、このツールを使うことで、デザインを作成したり、チームメンバーと共有したり、フィードバックを収集したりすることが可能です。
Figmaの特徴
Figma(フィグマ) | |
概要 | オンラインベースのデザインツール |
使用用途 | UI/UXデザイン プロトタイピング |
対象ユーザー | デザイン初心者からプロまで 企業 |
難易度 | ★★☆ |
特徴 | リアルタイムでの共同作業が可能 直感的なインターフェース 「FigJam」や「FigmaSlides」といった追加機能の充実 フィードバックが簡単 |
料金プラン | スタータープラン 無料 プロフェッショナルチーム 月額¥2,250 (1フルシートあたり) ビジネス 月額¥6,750 (1フルシートあたり) エンタープライズ 月額¥11,250 (1フルシートあたり) |
提供されているデバイス | PCのデスクトップアプリ サイト モバイルアプリ |
このように多様な機能やその使いやすさから、多くのデザイナーや企業に使用されています!
関連記事:[「FigJam」の魅力と活用法:Figmaによるオンラインホワイトボードの新しいスタンダード]
以下の記事では「Figma」が提供するウェブ上でのオンラインホワイトボードツール「FigJam」について機能や特徴を詳しく解説しております。

Figmaを始めてみよう!
では、「Figma」の登録方法をステップバイステップで解説していきますので、一緒に登録してみましょう!
Figmaの登録方法
「Figma」の登録方法は以下の4ステップで簡単に行えます。
- Figmaの公式サイトにアクセスします。
- トップページにある「Figmaを無料で体験する」を選択します。
- 次に表示される画面で、メールアドレスを入力したり、GoogleまたはGitHubのアカウントでサインインします
- 入力したメールアドレスに確認メールが送られてくるので、その指示に従ってアカウントを有効化します。
- 以上でFigmaの登録が完了です!
- その後は、Figmaのダッシュボードにアクセスし、新しいプロジェクトを作成したり、既存のプロジェクトを開いたりすることができます。Figmaは初めてでも直感的に使えるように設計されていますが、何か困ったことがあれば、ヘルプセンターやオンラインのチュートリアルを参照してみてください。
次はいよいよ基本操作編です!
Figmaの基本操作
「Figma」は多機能であるため、初めて使う人にとっては少々難易度が高いかもしれません!
しかし、一度慣れてしまえば、その多機能性が大きな強みとなります。
※2024年10月10日の最新アップデートによりUIがバージョンアップされています。ここでは以前のUIを主に紹介します!
この章では、7つの基本操作について簡単に解説します!
- 基本画面の操作
- フレームの作成
- 要素の追加
- プラグインのインストール
- プロトタイプの作成
- デザインの共有
- デザインの書き出し
以前のUIバージョン (2024年10月10日以前)
1. 基本画面の操作
「Figma」の基本画面は以下の4つの要素で構成されています。
- ツール:図形、テキスト、ペン、コメントなどが選択可能
- レイヤー:オブジェクトの構造を管理
- デザイン画面:主な作業スペース、フレームを追加してデザインを作成
- プロパティ:オブジェクトの詳細を設定
2.フレームの作成
最初に、アートボードとなる「フレーム」を作成します。ツールバーから「フレーム」を選択し、サイズを選びます。
3.要素の追加
次にフレームに要素を加えていきます。
例)ツールバーから「長方形」を選択し、図形を挿入します。挿入した図形は、「プロパティ」から詳細を変更できます。
– プロパティで変更できる点 –
- 高さ
- 横幅
- 塗りの色
- 線の色
- エフェクト(影など)
4.プラグインのインストール
Figmaではプラグインを活用して機能を拡張できます。ツールバーから「プラグイン」に進み、検索窓で追加したいプラグインを入力します。
5.プロトタイプの作成
フレームが完成したら、次は「プロトタイプ」を作成します。プロトタイプではより本番環境に近い状態で、見た目や動きを確認できます。
6.デザインの共有
完成した制作物は「共有」から簡単に送信可能です。メールアドレスを入力、またはリンクをコピーすることで共有できます。
7.デザインの書き出し
最後に、作成したデザインを「エクスポート」から書き出すことができます。プロパティのエクスポートから、形式を選択し出力できます。
最新のUI3バージョン (2024年10月10日以降)
UI3においても基本画面の要素は変わりありません。
ここでは以前のUIから今回のUI3への変更点を簡単に紹介いたします!
- 前バージョンからの変更点
- ツールバーが画面下に移動
- 保存タイトルが左側に移行
- 開発モードへのスムーズな移行
- プロパティパネルの最小化

以上が「Figma」の基本的な使い方です。Figmaの機能はまだまだたくさんあるので、今後紹介していきます!
関連記事:『写真でわかるFigmaの基本操作①ーオブジェクト操作・レイヤー編ー』
「Figma」の基本操作について段階ごとに詳しく解説した記事があります。以下の記事ではオブジェクト操作について主に解説しております!

関連記事:「【2024年10月最新情報!】Figma最新リリース:14つの機能を徹底解説!(前半編)」
以下の記事では10月10日にリリースされた「Figma」の最新機能を紹介しております!新しいUI3についての情報もあるのでぜひご覧ください!

Figmaのメリット・デメリット
そんな「Figma」を使うことで一体どのようなメリットがあるのでしょうか?この章ではデメリットと合わせてお伝えいたします!
メリット
- リアルタイムコラボレーション
- 複数のユーザーが同時に作業でき、変更が即座に反映されるため、チームでのコミュニケーションが円滑になります!
- また、リアルタイムでフィードバックを得ることもできます。
- クラウドベース
- インターネットさえあればどこでもアクセス可能で、デバイス、場所を選ばずに作業できます。
- 豊富なプラグイン
- デザインの効率を上げるための多くのプラグインが利用でき、カスタマイズ性が高いです。
- プロトタイピング機能
- インタラクティブなプロトタイプを簡単に作成でき、ユーザー体験を視覚化しやすくなります。
- バージョン管理
- 変更履歴が自動で保存され、過去のバージョンに簡単に戻ることができます!
デメリット(気をつけるべき点)
- インターネット環境の必要性
- クラウドベースのため、インターネット接続が不安定な場合、作業が難しくなることがあります。
- また、オフラインでは機能が制限されてしまいます。
- 学習の難易度
- 初心者には機能が多いため、使いこなすまでに時間がかかることがあります。
- パフォーマンスの問題
- 大規模なプロジェクトや複雑なデザインでは、動作が遅くなることがあります。
- プライバシーとセキュリティ
- クラウドにデータを保存するため、機密情報の取り扱いには注意が必要です。
まとめ
この記事では、「Figma」の基本的な使い方や特徴、メリット・デメリットについて詳しく解説しました。Figmaは、リアルタイムでのコラボレーションや豊富な機能を活用することで、デザイン作業を効率的に進めることができます。また、初心者でも簡単に始められるように、登録方法や基本操作を具体的に紹介しまていきました!
「Figma」を使いこなすためには、実際にプロジェクトを進めながら学ぶことが重要です。また、さらなるスキルアップを支援するために本サイトではFigmaの基本操作シリーズの記事を執筆しています!
さらに、Figmaの公式フォーラムやデザインコミュニティに参加することで、他のデザイナーとの交流やフィードバックを得ることができ、より深い理解を得ることもできます。これらのリソースを活用し、「Figma」を使ったデザインスキルをさらに磨いていきましょう!
関連記事:「写真でわかるFigmaの基本操作③ーショートカット編ー」
この記事では「Figma」をより効率的に使うためのショートカットキー一覧を紹介しています!

コメント
コメント一覧 (3件)
[…] 『写真でわかるFigmaのはじめ方ー登録から基本操作まで解説ー』 2024年4月10日 […]
[…] 関連記事:[2024年(最新版)『写真でわかるFigmaのはじめ方ー登録から基本操作まで解説ー』] […]
[…] あわせて読みたい 2024年(最新版)『写真でわかるFigmaのはじめ方ー登録から基本操作まで解説ー』 こんにちは。記事をご覧くださりありがとうございます!みなさん「Figma(フィグマ) […]