Figmaとは？初心者向けに使い方と料金、おすすめプラグイン解説

公開日:2023-10-25 更新日:2023-10-25 by SEデザイン編集部

デザインツールにはさまざまな製品がありますが、中でもFigmaは注目を集めています。その理由は、ブラウザベースでの手軽さと、チームでのリアルタイムの共有・同時編集が可能な点です。

特に、UX/UIデザイナーやプロダクトチームにとっては、欠かせないツールの一つだといえるでしょう。今回は、Figmaをはじめて使う方や基本的な操作を再確認したい方のために、Figmaの基本的な使い方を解説します。

Figmaとは？

Figmaは、Webブラウザ上で利用できる、UIデザインやWeb・LPサイトのデザインなど作成できるデザイン用ツールです。

Figmaの特徴

Figmaが多くのデザイナーやチームに支持される理由は、リモートワーク環境でも複数のメンバーが同時にプロジェクトに参加し、リアルタイムでデザインフローを進められる点にあります。

Webブラウザを使い、Figmaに直接アクセスしてデザイン作業を進めることができます。さらにチーム全体が共同で作業を行い、リアルタイムでのフィードバックや修正が可能です。この共創のスタイルは、認識の齟齬やミス、コミュニケーションコストを低減できることから、後々の修正の手間を省けます。

クラウドベースのサービスとして、編集した内容をすぐに共有できるだけでなく、チーム全体がアクセスできるデザインシステムやプラグインの取り扱いもスムーズです。

Figmaの料金体系

Figmaの料金体系は以下のとおりです。

プラン名	料金
スターター	無料
Figmaプロフェッショナル	1,800円〜(編集者1人あたりの月額)
Figmaビジネス	6,750円(編集者1人あたりの月額/年払い)
エンタープライズ	1万1,250円(編集者1人あたりの月額/年払い)

参考：Figma公式サイト(2023年10月現在)

Figmaのプランには、無料のスタータープラント3つの有料プランがあります。本格的なデザイン制作ツールを使ったことがなくても、無料で基本的な機能を利用できます。

しかし、個人利用ではなくビジネス用途の場合は、有料プランへのアップグレードを視野に入れつつ、必要な機能が備わっているか確認しましょう。

Figmaでは何のデザインが作れる？

Figmaで作成できるものとしては、以下のものが挙げられます。

ワイヤーフレーム・プロトタイプ
ホームページやデジタル広告用のグラフィックデザイン
プレゼン資料

それぞれ個別にみていきましょう。

ワイヤーフレーム・プロトタイプ

Figmaでは、ホームページやアプリの基本構造を示す「ワイヤーフレーム」や動作を試す「プロトタイプ」の作成が可能です。ワイヤーフレームとは、Webやアプリのレイアウトの設計図のことです。

プロトタイプを利用することで、サイトやアプリの動作を検証できます。このプロトタイプは動的なデザインとして、画面の遷移やインタラクションの挙動を事前にチェック可能です。

ホームページやデジタル広告用のグラフィックデザイン

Figmaでのグラフィックデザインは、非常に柔軟といえます。直接画像のインポートができるだけでなく、独自のグラフィックを効率よく作成可能です。Web広告やSNSの投稿画像、広告バナーなど、さまざまなデジタルコンテンツのグラフィック制作が可能です。

プレゼン資料

プレゼン資料の制作ツールといえば、PowerPointやGoogle Slidesが一般的でしょう。しかし、Figmaの基本的な機能を活用すれば、プレゼン資料を作成できます。

Figmaを利用する3つのメリット

Figmaを使うメリットとしては、次の3つが代表的です。

Webブラウザで手軽に扱える
バージョン管理を簡単に行える
チーム内で共同作業できる

以下より、それぞれみていきましょう。

Webブラウザで手軽に扱える

Figmaはアカウントを作成すれば、ソフトウェアだけでなく、Webブラウザ上でも利用ができます。

職場ではソフトウェア版のデスクトップPC、外出先ではノートパソコンのブラウザ版といったように、用途と環境に合わせて使い分けも簡単に行えるでしょう。

バージョン管理を簡単に行える

Figmaでは、デザインをバージョンで管理できます。30分ごとにファイルのバージョン作成・保存が自動的に行われる仕組みです。

メリット②バージョン管理ができることを示す画像

チーム内で共同作業できる

Figmaでは、リアルタイムで複数人とデザインを共有・編集できます。
同じファイルに複数のユーザーがいる場合、ユーザーアイコンが表示されるため、どのユーザーがどの部分を編集しているかも把握ができます。

コンセプトやアイデアを形にするデザインは、意見やアイデアが集める機会が多々あります。
たとえば、マーケティング担当者やエンジニア、Webディレクターなど、制作過程のプロトタイプを見てもらい、意見や話し合いを複数人で一つのファイルをシェアしながら、リアルタイムで作業を進めることも可能です。

実際に、Figmaはデザインチームが共同で作業するためのツールとして特に評価されています。
2022年9月にはAdobeが買収したことでも話題になりましたが、この件については「40年の歴史の中で、最大の変革の1つの目玉」と位置付けられており、注目度の高いツールであるいえるでしょう。

Figmaの基本的な使い方

ここからは、Figmaのプロトタイプを作成するための使用手順を紹介します。

アカウントを発行する
デザインを作成する
プロトタイプを作成する
デザインデータを出力する
ほかのユーザーと共有する

それぞれ個別に解説します。

1．アカウントを発行する

Figmaの利用にはアカウント作成が必要です。公式サイトにアクセスし、【Get Started】ボタンをクリックしましょう。

Figmaの登録方法を解説する画像

以下の画面が表示された場合は、Googleアカウントでのログインか、メールアドレスとパスワードを用いて新しいアカウントを作成します。

Figmaの登録方法を解説する画像

なお、Figmaはブラウザ上だけでなく、デスクトップアプリケーションも存在するため、インストールしての利用も選択可能です。

2．デザインを作成する

新規ファイルを開始する場合、メインメニューから【New design file】を選びましょう。

Figmaで新規デザインを作成する際の操作方法を解説する画像

中央にキャンバスが現れるため、以下の手順でデザインを作成していきます。

Step1	Designモードを選択	右側スペースの上部にあるタブメニューのうち、一番左の【Design】タブを選択する。
Step2	フレームを選択して選ぶ	ツールバーのフレームツールを選択すると、右側にフレーム一覧が表示されるので、利用したいフレームサイズを選択する。
Step3	図形を描画する	ツールバーにある図形ツールをクリックすると、四角、線、矢印、三角、星などの一覧が表示されるので、いずれかを選択する。
Step4	テキストを配置する	好みの場所で一度クリックすると入力モードになるので、文字を入力していく。フォントの種類・サイズ、中央揃えなどの配置は右側メニューで調整する。

複数の同じパーツを配置したい際は、ショートカットを使用して簡単に複製可能です。代表的なものは「Ctrl+C」でコピー、「Ctrl+V」でペーストなどです。

3．プロトタイプを作成する

プロトタイプを作成し、デザインのインタラクションを確認しましょう。右メニューから【プロトタイプ】を選択します。

プロトタイプの作成方法を解説する画像たとえば「外部リンクへ遷移する」動きを確認する場合、該当するボタンデザインなどを選択し【インタラクション】を追加し、【リンクを開く】でURLを指定可能です。もしくは上部の帯の中央にあるリンクマークからも設定できます。

プロトタイプでボタンリンクを作成方法を解説する画像

動作チェックとして右上の【▷】ボタンを選択すれば、プレビューを確認できます。作成した内容がきちんと反映されているか確認しましょう。

4．デザインデータを出力する

作成したデザインは、様々な異なるファイル形式で出力できます。エクスポートの際、形式（PNG／JPG／SVG／PDF）と保存場所を選択して出力しましょう。

Figmaで作成さいたデザインデータを出力する方法を解説する画像

5．ほかのユーザーと共有する

Figmaでは、作成したデザインをほかのユーザーと簡単に共有することができます。右上の【共有】ボタンをクリックし、共有ユーザーのメールアドレスと権限の範囲を設定する仕様になっています。

Figmaデザインデータを他の人に共有する方法を解説する画像設定できる権限は「閲覧のみ」「編集可」の2種類です。
共有リンクを利用すれば、メールアドレスが不明なユーザーともデザインの共有が行うことができます。ただし、無料版であるスターターの場合は、ほかのユーザーに共有する際は閲覧のみとなるため、状況に応じて有料プランへのアップグレードが必要になります。