Figma（フィグマ）の使い方や機能を徹底解説！他のwebデザインツールとの違いも

Figma（フィグマ）とは

Figmaとはすべての人がデザインを利用できるようにするというビジョンのもと、開発されたツールです。主にUIデザイナーが使うデザインツールであり、ブラウザ上でさまざまなデザインができます。

チームの共同作業やフィードバックにも対応しているため、デザイナーだけでなく、開発者やビジネスパーソンにも人気があります。製品開発に関わっている人々が一丸となってコミュニケーションをするのにも使われているツールです。ワイヤーフレームやプロトタイプのデザイン制作や開発モード、デザインシステムなど多種多様な機能を備えています。

Figmaでできること

Figmaでできることは、主に以下の5つです。

• Webデザインの制作
• プロトタイプの制作
• コードの開発
• プレゼン資料の作成
• SNS投稿用画像の作成

Webデザインの制作

FigmaならWebサイトのサイトマップ・ワイヤーフレームの制作がブラウザ上でできます。複数人でリアルタイム編集やフィードバックをしながら、柔軟なUIデザインの作成が可能です。他のツールでも同様のことはできますが、ブラウザタイプでない場合はリアルタイムでの情報共有が難しい傾向にあります。

Figmaが多く使われるのは、Webサイトのレイアウトを決めるワイヤーフレームの作成です。ワイヤーフレームはサイトやアプリを作るためには欠かせないもので、各パーツの配置を決定します。Figmaではデスクトップとスマホで別々にテンプレートが用意されているため、デバイス別のワイヤーフレームを作りやすいのも魅力でしょう。

プロトタイプの制作

プロトタイプとは、Webサイトやアプリの動作確認をする試作品です。ワイヤーフレームは設計図といえる動きがないものですが、プロトタイプはより完成品に近く動作も確認できます。Figmaのプロトタイプではコーディングをおこなう前に、画面遷移やアプリケーションの動作がチェックできます。プロトタイプ専用のモードも用意されているため、コーディング初心者にも使いやすいでしょう。

また、しっかりと練ったプロトタイプを、ブラウザ上でエンジニアやディレクターなどに共有できるのも強みです。作ったものを動かしながらブラウザ上でフィードバックがもらえるため、より現場に近い形でのすり合わせが可能です。

コードの開発

Webデザインからコードへスムーズに移行できる機能がFigmaにはあります。作ったデザインから、プラグインを利用して自動的にコードが生成できることは大きな強みです。デザインをコードに書き換えなくても良いため、プログラマーがサイトを実装するまでの期間を短縮できます。開発者・デザイナー双方の負担を軽減したい人にはおすすめのツールです。

プレゼン資料の作成

Figmaには、使いやすいプレゼン資料のテンプレートが用意されています。PowerPointやGoogleSlidesのようなプレゼン資料が作成できるため、作ったデザインを発表する機会がある人は重宝するでしょう。

作成したデザインは右上にある再生ボタンを押せば、そのままプレゼンテーションモードに設定できます。ほかのソフトを使わなくても、プレゼンに簡単に移行できる利便性の高さは魅力的です。

SNS投稿用画像の作成

各種SNSへの投稿用の画像がFigmaでは作成できます。ペンやエフェクトなどのグラフィックデザインツールもあるため、画像の加工も簡単に可能です。編集画面では文字を挿入したり、図形ボックスを挿入したりすることもできます。文字の大きさの変更や太字化、挿入する図形の透明度の変更も自由自在です。

Figmaの料金

Figmaの料金プランは、以下の4つです。

有料のプロフェッショナルプランではバージョン履歴の数や、Figma上で作れるファイルの数が無制限になります。ビジネス以降のプランでは、デザインシステムアナリティクスやプライベートプラグインの活用が可能です。

Figmaの使い方

Figmaの使い方の手順は、以下の通りです。

1. アカウントを作成
2. デザイン作成
3. データ書き出し
4. データの共有

アカウントを作成

Figmaを使うには、まず公式ページでサインアップをクリックします。メールアドレスやパスワードを入力したら、アカウント作成ボタンをクリックしましょう。送信されてきたメールを確認し、認証するとアンケート画面が表示されます。簡単なアンケートに答えて、チームプランを選択すればアカウント作成は完了です。

新規ファイル作成

アカウントを作成したら、まず新規ファイルを立ち上げましょう。言語を好みのものに設定したら、下書きボタンからデザインファイルをクリックしてください。その後は自分の目的にあったデザインを作りましょう。Figmaには、デザインに関するテンプレートも用意されています。活用すれば素早く簡単にデザイン作成が開始できるでしょう。

デザイン作成

ファイルの立ち上げに成功したら、デザインを作成していきます。まずは静的な画面上でデザインが追加できる、フレームから作りましょう。

フレームデザインでは、背景デザインやグリッドレイアウト追加・ロゴの作成などができます。便利なツールを駆使して、自分が思い描く理想のWebサイトやアプリを設計してください。動的なデザインを作りたいなら、プロトタイプを作成するのもおすすめです。より実際の動作環境に近い状態で、デザインを行えます。

データ書き出し

デザイン作成が終わったら、プロパティからエクスポートをクリックしてデータの書き出し形式を選択しましょう。

選べる形式は、以下の通りです。

• PNG
• JPEG
• SVG
• PDG

圧縮されておらず鮮明なデータを希望するならPNGがおすすめです。ロゴやアートワークには、SVGを使ってください。汎用性が高く軽めのデータが欲しいなら、JPEGが向いています。なお、PDGは日本ではあまり流通していない形式です。PDFに近い電子書籍データのようなものと考えましょう。

データの共有

書き出したデータは、チームで共有できます。画面の右上の共有ボタンをクリックし、権限を設定するだけで簡単にチームでの作業が可能です。

招待を行う手順は以下の通りです。

1. 共有する人のメールアドレスを入力する
2. 表示された権限を編集または閲覧のみに設定
3. 「招待」をクリックする

招待されたユーザーのみがファイルを閲覧できるため、メールアドレスを登録していない人はデザインを閲覧できません。チームでの情報を共有できるため、Figmaはセキュリティ面の安全性も高いといえます。チーム内での権限も、閲覧のみと編集可のカテゴリに分けて設定可能です。デザインに関する知識がない人が完成したデータを触ってしまい、修復不可能になってしまう事態を避けられます。

Figmaの便利な機能

Figmaには前述で紹介したメイン機能の他にも便利な機能が多数備わっています。

チーム編集を便利にするコメント機能や、プラグイン使用で素材サイトを自由に活用できる画像挿入機能などは便利です。よく使うサイトの要素を部品化して、すぐ貼り付けができるようになるコンポーネント機能も人気です。

Figmaのメリット

Figmaには以下のようなメリットがあります。

• 共同で編集できる
• ブラウザで使える
• デザイン制作に必要なツールが揃っている
• プラグインでカスタマイズができる
• バージョン管理が容易

共同で編集できる

Figmaは違う場所にいるメンバーにも共有ができます。リアルアイムで共同作業が可能なため、現場で意見交換をしながら作業しているかのような感覚で活用可能です。

ブラウザ上で意見交換ができれば、PDFデータを送信したり印刷した図面を持ち込んで見せたりする必要はありません。コメント機能を活用すれば、修正依頼を直接図面に書き込めるのも魅力でしょう。

ブラウザで使える

Figmaはブラウザで使えるツールのため、ダウンロードやインストールが不要です。そのため導入のハードルが低く、パソコンの空き容量も圧迫しないメリットがあります。ブラウザで利用可能なツールは、端末を変えてもアカウントログインすれば利用可能です。

WindowsやMacなどのPC端末では、編集も閲覧もできます。スマートフォンで閲覧もできるため、どこにいてもデザインの状態を確認できるのは大きな強みです。端末を問わず活用できるため、会社と自宅で異なる端末を使って編集できるのも嬉しいポイントでしょう。

なおOSブラウザの条件は定められているため、自分のパソコンでFigmaが使えるかは事前に確認する必要があります。

デザイン制作に必要なツールを搭載

Webデザインを制作するために必要なツールが、Figmaには一通り搭載されています。以下のようなデザインツールを、追加ダウンロードは一切せずに活用可能です。

• 図形描画
• テキストツール
• レイアウト
• アニメーション作成など

簡易的なデザインだけでなく、レイアウトやガイドラインの設定、アニメーション作成などができます。一般的なWebサイトのデザインなら、このツールがあれば基本的にできるでしょう。

プラグインでカスタマイズができる

標準装備は一通り備わっているFigmaですが、追加でさらに新たなプラグインを装備できるのは大きな強みです。アイコンを挿入できたり、自動で画像背景を検出して削除したりできるプラグインが実装されています。商用利用ができる画像を取り込めるUnsplashも、非常に人気が高いプラグインです。

これらのプラグインをうまく活用すれば、自分の作業環境に合った機能を使えるため作業効率がアップするでしょう。プラグインは公式サイトで入手できるため、Figmaを使う際にはぜひ確認してみてください。

バージョン管理が容易

Figmaで作成したデザインは、バージョンごとで管理できます。これは30分ごとにバージョン作成保存をする、Figmaならではのメリットです。Figmaのロゴをクリックすれば、ファイル・バージョンの履歴を遡れます。ファイルを以前の状態に戻すのも簡単なため、前のデザインの方が良かったと感じた時も安心です。

なおスターター無料プランでは、バージョンの管理は30日間しかできません。本格的なFigmaの活用を検討するなら、プロフェッショナルやビジネス、エンタープライズプランを活用しましょう。

Figmaのデメリット

Figmaにはメリットだけではなくデメリットも存在します。主なデメリットは、以下の3つです。

• ヒストリー機能がない
• オフラインで作業ができない
• ガイド線が固定できない

ヒストリー機能がない

Figmaはバージョンが自動保存される代わりに、ヒストリー機能で各動作を巻き戻せません。過去のポイントを細かく指定して、いつでもその箇所に戻れるのがヒストリー機能です。戻りたい位置にいつでもピンポイントで戻れないのは、Figmaの非常に大きなデメリットといえます。

Photoshopなどのツールでは、ヒストリー機能を利用可能です。自由自在に好きな地点へ戻れる利便性を重視するなら、これらのツール利用を検討しましょう。

オフラインで作業ができない

Figmaはブラウザ上で作成・編集するツールのため、オフライン時には使えません。ネット環境のないところでは使えないため、外出先でノートPCを開き編集するにはWi-Fi環境が必須といえます。

Figmaと似たソフトであるMacソフト「Sketch」は、オフラインでも活用できます。インターネット環境がない場所や、外出先でデザインをする傾向の強い人はSketchをメインツールにするのも良いでしょう。

ガイド線が固定できない

Figmaの編集画面では、ガイド線の表示が可能です。しかし、ガイド線の固定はできないため、ずれたまま制作を進めてしまう危険性があります。ガイド線をしっかり固定できないと、最終地点ですべてのデザインバランスがずれていたという事態が起きかねません。定期的にガイドラインの位置を確認するマメさがないと、Figmaの使用は難しいでしょう。

Figmaと他のWebデザインツールとの違い

Figmaと似ているデザインツールは、以下の3種類です。

• AdobeXD
• Sketch
• Canva

それぞれのソフト別に強みや弱みは異なります。メリット・デメリットやFigmaとの違いを確認し、どれを導入するか決めましょう。

AdobeXD

Figmaはブラウザで使えるツールであり、AdobeXDはアプリです。どちらも他のユーザーと共有・共同編集ができ、デザイン作業も同レベルの機能をもっています。両者の特に大きな違いは、料金です。Figmaはフリープランがありますが、AdobeXDは料金がかかります。

なお、近年FigmaをAdobe社が買収したため、Adobe XDの単品販売は2023年に終了しました。Adobeソフトとの互換性が魅力だったAdobe XDですが、販売終了でアップデートの機会は今後減少するといわれています。これからデザイン業界に参入する人は、Figmaをメインに利用する方がアップデートで利便性を上げられる可能性は高いといえそうです。

Sketch

Sketchはデザインツールとしての歴史が長い、ロングセラーツールです。Windowsでは活用できず、Macユーザーのみ使えます。FigmaはWindowsでもMacでも使えるツールです。クライアントとPCのOSが違ってもデータを共有できるため、互換性の面ではFigmaに軍配が上がるでしょう。

料金は無料トライアル版がありますが、30日で終了してしまいます。対して、Figmaのスタータープランには期限がないので、期間を気にせず無料で試したい場合はFigmaのほうがおすすめです。

Canva

Canvaは無料プランでほぼ使える、ブラウザタイプのデザインツールです。Figmaも無料で基本的な機能は使えますが、複数人での編集は2人までしかできません。スマホで編集できるCanvaですが、Figmaでは閲覧のみで編集は不可能です。テンプレートの充実度はFigmaもCanvaも同程度ですが、初心者が使いやすいのはCanvaです。操作が直感的にできるため、簡単にバナーなどのデザインができます。

しかし、CanvaにはLP専用のテンプレートがないので、Webサイトのデザインにはやや不向きです。Figmaは縦型のデザインも自由作成できるため、うまくLPページを作れるのは強みです。サイトの完成見本であるデザインカンプの作成も、Figmaの方が行いやすい傾向にあります。

【kyozon編集部おすすめ】デザイン初心者でも使える動画制作ツール

Figmaと異なるツールを試したいと考えている人のために、kyozon編集部はおすすめのデザイン初心者でも使える動画制作ツールを抜粋しました。紹介するのは以下3つのツールです。

• OneStream
• SENLEN(センレン)
• LetroStudio

OneStream

業界最低水準！月額1万円以下で動画サイトが作れる

動画配信サイト制作に必要な要素がすべてまとめてある便利なツールです。配信したい動画をアップロードしたら、タグやカテゴリ、プレイリストなどで管理できます。ユーザー専用のアカウント作成ページを発行したり、課金の管理をしたりするのも簡単です。

また、パソコンだけでなく、スマホに最適化したサイトを作れるのもOneStreamの強みです。AndroidやiOS向きの動画配信サービスを作りたい方にもおすすめのツールといえます。

SENLEN(センレン)

手軽に資料や動画をユーザーに提供できる

自動チャットボットのような環境で、スムーズに動画をユーザーに提供できるツールです。サイトに訪れたユーザーに向けてアプローチをする、自動プレゼンテーション機能を搭載しているのが最大の特徴です。

複雑な操作や編集は必要ありません。持っている動画や資料をアップロードするだけで、プレゼンテーションは自動で作成できます。動画を見たユーザーから問い合わせが来た時に対応できるよう、ビジネスに必須のチャットやオンラインミーティング、資料共有スペースなども備えています。

コスパ最高ツール

レビュー内容この製品は、会計・販売・在庫管理など、ビジネスに必要な機能を網羅しています。顧客サポートについても、親切で迅速に対応してくれるため、安心して利用できます。また、月額利用料が非常にリーズナブルであるため、コストパフォーマンスにも優れています。ただし、柔軟性の高さから、複雑な操作が必要になる場合もあります。

もっと見る

• 業種： 小売 / 流通 / 商社系
• 会社名：-
• 従業員規模：1001〜5000人
• 部署：情報システム部門
• 役職：部長・課長クラス

無駄のないアクセスやアポ率の向上など、作業の効率化を図っていくことができる様になりました。

レビュー内容1 既存のデータを活用して分析し、顧客に対してナーチャリングをしてはターゲットを絞ってのアクセスがしていけるようになりました
2 成約率計測をしていけることから、商談などで交渉もしやすくなりました。
3 メッセージやチャットのやり取りをしていくことでアポイント率を確実に伸ばしていくことができる様になりました

もっと見る

• 業種：小売 / 流通 / 商社系
• 会社名：株式会社 筑波産商
• 従業員規模：31〜100人
• 部署：営業・販売部門
• 役職：係長・主任クラス

LetroStudio

簡単操作で未経験者でも動画制作がしやすい

動画制作初心者の人におすすめのテンプレート搭載型ツールです。800種類ものテンプレートが用意されており、活用媒体やイメージにぴったりの動画を作成できます。

編集はPowerPointのような感覚で直感的に進められるため、動画制作経験がない方でも、短時間で編集ができます。さらに専任コンサルタントが在籍しており、体制構築に対する悩みを相談できるのも嬉しいポイントです。

使い勝手がとてもいい

レビュー内容インストール不要でネット環境あれば会社でも自宅でも利用できます。製作した動画、取り込んだ素材をフォルダ管理しますが、階層が作れて整理しやすいです。グーグルスライドを編集する感じに近く未経験者でも習得速いです。直感操作で理解でき、習得コストがほとんどかからないです。文字入れなど思い通りにできます。

もっと見る

• 業種：IT / 通信 / インターネット系
• 会社名：-
• 従業員規模：31〜100人
• 部署：総務・法務部門
• 役職：一般社員・職員

テンプレで簡単に動画作り

レビュー内容テンプレートを使用することで簡単に動画を作ることが可能という点が使って見てすごいなと感じた点で、テンプレを組み合わせるうえで、ソフトウェアを介さずに、インターネット上のブラウザ上ですべての作業を終えている点がすごいと感じました。自社での動画制作の効率を3分の1ほど短縮できましたので動画制作の効率もアップしたと思います。

もっと見る

• 業種：IT / 通信 / インターネット系
• 会社名：-
• 従業員規模：31〜100人
• 部署：マーケティング部
• 役職：契約・派遣・委託

まとめ

Figmaはブラウザで使用できる、Webデザインツールです。基本無料で活用でき、コメント機能などを使ってデザイナーとマーケターがコミュニケーションを取りながら制作ができます。

現在提供されているWebデザインソフトのなかでも、機能性は抜群です。コードやプロトタイプの制作はもちろん、SNS画像やプレゼンテーション資料の作成にも活用できます。本記事を参考にFigmaを賢く利用して、業務の効率化に役立ててください。