Figmaとは？使い方や料金プラン、代表的な機能、注意点を解説

さまざまなデザインツールの中でも、注目を集めている製品がFigmaです。その理由は、ブラウザベースでの手軽さと、チームでのリアルタイムの共有・同時編集が可能な点です。特に、UX/UIデザイナーやプロダクトチームにとっては、欠かせないツールの一つだといえるでしょう。 

しかし、Figmaに興味はあっても、使い方や料金プランを知らないために利用をためらっている方もいるのではないでしょうか。今回は、Figmaを初めて使う方や基本的な操作を再確認したい方のために、Figmaの基本的な使い方や料金プラン、代表的な機能・使用上の注意点を解説します。 

Figmaとは？【Web上で簡単に使用可能なデザインツール】 

Figmaは、Webブラウザ上で簡単に利用できるデザインツールです。WebサイトやLP（ランディングページ）のデザイン、あるいはWebアプリなどのUIデザインを作成できます。この章では、Figmaの特徴や料金体系、FigJamとの違いについて説明します。 

Figmaの特徴 

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

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

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

Figmaの料金体系

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

参考：Figma公式サイト(2024年7月現在) 

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

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

FigJamとの違い 

Figmaには「Figmaデザイン」と「FigJam」の2つのプロダクトがあります。FigJamはFigmaが提供するオンラインホワイトボードで、アイデアのブレインストーミングやチームコラボレーションに役立つツールです。

FigmaデザインとFigJamには互換性があるため、Figmaデザインファイルで作成したデザインをFigJamファイル上にインポートし、チーム内で共有できます。この機能は、リモートワークでのミーティングなどにも便利です。 

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

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

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

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

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

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

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

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

Figmaでのグラフィックデザインは、非常に柔軟といえます。直接画像のインポートができるだけでなく、独自のグラフィックを効率よく作成可能です。

Web広告やSNSの投稿画像、広告バナーなど、さまざまなデジタルコンテンツのグラフィック制作が可能です。 

プレゼン資料

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

Figmaと他ツールの違い 

Figmaはリアルタイムでのコラボレーションが可能なクラウドベースのデザインツールです。ほかのツールに比べて動作が軽く、幅広いデザインプロセスに対応しています。 

Canvaとの違い 

FigmaとCanvaは用途が異なります。FigmaはWeb制作全般に使用でき、ワイヤーフレームの作成が得意です。一方、Canvaは画像作成に特化しており、簡単に魅力的なビジュアルコンテンツを作成できます。

Figmaは特にデザイナー向けに高度な機能を提供するツールであり、Canvaはデザイン初心者でも使いやすく設計されたツールであると区別できるでしょう。 

AdobeXDとの違い

FigmaとAdobeXDは機能的によく似ていますが、Figmaはより動作が軽いと言われています。また、両者ともデスクトップアプリとして提供されていますが、Figmaはブラウザ上でインストールなしに利用できる点も異なります。 

FigmaはAdobeXDの素材をインポートして活用することが可能です。しかし、PhotoshopやIllustratorなどのほかのAdobe製品との互換性に関しては、Adobe XDの方が優れています。  

2022年にAdobeがFigmaを買収して以降、AdobeXD単体の新規契約は終了していることに注意が必要です。AdobeXDの製品ページは現在メンテナンスモードとなっており、アップデートも行われていません。 

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

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

1. Webブラウザでいつでもどこでも使用できる 
2. 初心者でも使いやすく直感的に操作できる 
3. チーム内で共同作業できる 
4. 変更が自動保存される 
5. バージョン管理が簡単にできる 
6. 無料期間に制限がない 

以下、それぞれのメリットについて解説します。 

1．Webブラウザでいつでもどこでも使用できる

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

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

２．初心者でも使いやすく直感的に操作できる

Figmaは、デザイナーでなくても簡単に操作できる直感的なUIを提供しています。ドラッグ&ドロップ操作や、分かりやすいアイコン、ショートカットキーを採用しており、スムーズに作業を進めることが可能です。

これらの機能によって、簡単に要素を移動したりレイヤーを整理したりすることが可能です。初心者でも効率よくデザイン制作ができるため、世界中の多くのユーザーから支持されています。 

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

Figmaでは、リアルタイムで複数人とデザインを共有・編集できます。同じファイルに複数のユーザーがいる場合、ユーザーアイコンが表示されるため、どのユーザーがどの部分を編集しているかも把握できます。Figmaアカウントを持っていないユーザーとも共有可能で、コメントによるコラボレーション機能などは特筆できるポイントです。 

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

実際に、Figmaはデザインチームが共同で作業するためのツールとして特に評価されています。 

4．変更が自動保存される

Figmaは変更が自動保存されるため、手動で保存する必要がありません。作業中にPCがフリーズしたり強制終了したりしても、最後に作業した状態から再開できます。  

自動保存が一般的でなかった時代には、長時間の苦労が一瞬で消えてしまうことが頻繁にありました。現在はほとんどのアプリケーションに標準的な機能となっており、重要なデータの損失が起こる事態は起こりにくくなっています。 

自動保存のおかげでユーザーは安心して作業に集中でき、成果物の品質向上に寄与するでしょう。こまめに保存しなくてよいため、作業効率を高めることにもつながります。 

5．バージョン管理が簡単にできる

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

出典：Figma

上書き保存によって過去のバージョンが失われることはありません。特定の時点からやり直したい場合に、いつでも復帰させられます。 

6．無料期間に制限がない 

Figmaは、無料の「スタータープラン」を無期限で提供しています。スタータープランでは作成できるファイル数に制限が設けられていますが、ストレージやコラボレータ数には制限がありません。 

ユーザーは長期間にわたって無料でFigmaの基本機能を試しながら、自分のニーズに合ったデザインツールかどうかを十分に確認可能です。さらに、複数のプロジェクトでコラボレーションもできるため、さまざまなチームでの作業をスムーズに行えます。 

Figmaのスタータープランは非常に魅力的で、新規ユーザーに最適なオプションといえるでしょう。 

Figmaの基本的な使い方

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

1. アカウントを発行する
2. デザインを作成する
3. プロトタイプを作成する
4. デザインデータを出力する
5. ほかのユーザーと共有する
6. データをPDF化する 

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

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

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

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

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

2．デザインを作成する

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

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

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

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

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

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

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

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

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

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

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

設定できる権限は「閲覧のみ」「編集可」の2種類です。

共有リンクを利用すれば、メールアドレスが不明なユーザーともデザインの共有が行うことができます。ただし、無料版であるスターターの場合は、ほかのユーザーに共有する際は閲覧のみとなるため、状況に応じて有料プランへのアップグレードが必要になります。

6．データをPDF化する

Figmaで作成したUIやワイヤーフレームをクライアントに確認してもらう際に、データをPDF化できると非常に便利です。PDFなら端末の環境にかかわらず、制作側の意図したレイアウトを保持できます。  

Figmaは作成したデザインをPDFとして簡単にエクスポートでき、専用のアプリケーションがなくても閲覧できる形で共有可能です。PDFなら、プレゼンテーション資料や印刷物といった別の提供方法にも転換しやすいでしょう。 

そのほか、PNGやJPG、SVGといった各種ファイル形式で出力することもできます。 

Figmaに搭載されている3つの代表的な機能 

Figmaには、以下の3つの代表的な機能が搭載されています。  

• オートレイアウト 
• コンポーネント 
• バリアブル 

 これらの機能により、効率的で一貫性のあるデザイン制作を実現できます。 

オートレイアウト

オートレイアウトは、コンテンツに合わせてフレームを自動的に調整する機能です。たとえば文字数が増えた場合に、ボタンの大きさを変更したり余白の調整を行ったりすることを自動で行います。 

この機能を活用することで、デザインの調整にかかる手間が大幅に削減され、デザインの制作スピードが大きく向上します。手動で場当たり的に調整するよりデザインの一貫性を保ちやすいため、最終的な仕上がりが良くなるケースも少なくありません。 

コンポーネント

コンポーネントとは「構成要素」や「部品」という意味です。Figmaではコピーしたものをコンポーネント化することで、フォントや色、枠線、位置、エフェクトといったオブジェクトのスタイルをまとめて適用できます。 

このコンポーネント機能により、同じデザイン要素を複数の場所で使用する際に、一度の変更で全てのインスタンスに反映させることも可能です。作業時間を大幅に短縮すると同時に、デザインの整合性や統一感を維持することができます。 

バリアブル

Figmaのバリアブルは、一つのデザインをさまざまなバリエーションに変化させられる機能です。バリアブルには「変数」という意味があり、カラーや数値といった属性の値を変えることによって、異なるサイズやカラーモードに適したデザインを一括で、かつ瞬時に生成することができます。 

バリアブル機能を使えば複数のバリエーションを手動で作成する手間が省け、多様なデザインを効率的に検討可能です。限られた作業時間のなかで優れたデザインを生み出すためにも、ぜひ活用したい機能といえるでしょう。 

Figmaを使う際の注意点 

Figmaを使用する際には、次の注意点を抑えておくことが大切です。 

• IllustratorやPhotoshopと連携できない 
• 日本語に十分対応していない 

 以下、それぞれ解説します。 

IllustratorやPhotoshopと連携できない 

Figmaは、代表的なデザインアプリケーションであるIllustratorやPhotoshopと直接的には連携できません。たとえば、これらのアプリケーションの標準ファイル形式である「.ai」や「.psd」をそのままFigmaで開くことはできません。 

しかし、Figmaへ直接的にコピー＆ペーストすることで、画像のやり取り自体は可能です。完全な連携ではありませんが、ある程度の互換性を確保できているといえるでしょう。また、Illustratorのai形式ファイルは、プラグインを利用すれば簡単に開けるようになります。 

日本語に十分対応していない 

Figmaはアメリカで開発されたツールであり、日本語対応が不十分です。日本語設定も選択できるとはいえ、一部の日本人ユーザーには使いにくく感じられるかもしれません。 

しかし、日本でもユーザー数が伸びてきたことを受け、2022年に「Figma Japan」が創設されました。同年7月からは日本にローカライズされた製品提供と日本語でのサポートを開始しています。Figmaの日本語対応は徐々に改善されてきているため、今後に期待しましょう。 

Figmaの代表的なプラグインと使い方

ここからは、代表的なFigmaのプラグインについて、以下の3つを紹介します。

• Artboard Studio Mockups
• Inconify
• Remove BG

次項より、個別にみていきましょう。

Artboard Studio Mockups

引用：Figma Community

Artboard Studio Mockupsは、モックアップ画像を作成するためのプラグインです。ボタンをクリックするだけで、Figmaで作ったデザインを実際の製品モックアップにレンダリングできます。

Inconify

引用：Figma Community

Inconifyは、UIデザインで扱うハンバーガーメニューやホームなどのアイコンとして活用できるプラグインです。マテリアルデザインやアイコンなど、10万を超えるデザインテンプレートをFigmaに読み込ませることができます。

Inconifyを活用することで、さらにデザインの幅が広がるでしょう。

Remove BG

引用：Figma Community

Remove BGは、JPEGやPNGなどの画像からアイコンを透過させたり、複数の写真から被写体を切り抜いたりできるプラグインです。無料で回数制限もなく、簡単に透過や切り抜きを行えるため、使い勝手のよいシステムといえます。

まとめ：Figmaでワイヤーフレームやデザインの作成を効率化しよう

Figmaはブラウザ上での操作からデスクトップアプリケーションでの利用が可能です。同時編集が可能な点やデザインのバージョン管理が簡単に行える点から、初心者から上級者まで幅広い層のデザイナーにとって使いやすいツールといえます。

Figmaをより使いやすくするために、プラグインの使用も検討しつつ、チームで効率的にデザイン作成を進めましょう。