Figmaとは？特徴とSketch等との違いを比較

Webサイトのデザインツールは無料のものから有料のものまで、数多く存在します。その中でも近年注目されつつある「Figma」とはどのようなツールなのか、その特徴と他のデザインツールとの違いを紹介します。

ライター：CLIP編集部

「Figma」とは？

FigmaとはWebブラウザ上で簡単にデザイン作成ができるツールです。
主な特徴として、リアルタイムで共同編集ができるためチームでの作業に向いていることや、Webブラウザさえ起動できれば、場所を選ばずにどのパソコンからでも使用できること、Webブラウザ上で操作するため、PC本体の容量を消費しないことなどがあげられます。また無料プランが存在するため、手軽に利用できるのも嬉しいポイント。
これまでは英語版のみでしたが、2022年7月に日本語版がリリースされたことでより一層利用しやすくなりました。

Figmaで作成できるもの

Figmaを活用することで作成できるものをご紹介。

ワイヤーフレーム

Figmaでは初心者の方でも、Webページのレイアウト設計図であるワイヤーフレームを手軽に作成できます。
その基本操作について簡単に紹介します。

まずは、以下の手順でアカウント作成を行いましょう。

1．公式Webページの右上「Get Started」をクリック。
2．メールアドレスまたはGoogleアカウントのどちらを利用して作成するかを選択。
3．名前を入力し、使用目的に関する簡易アンケートを回答。

以上でアカウントの作成は完了ですが、Figmaをすぐに試したい方はその後表示される画面にて「Team」を作成し、「Starter」プランを選択。次の画面で「Design with Figma」を選択すれば、作業画面に移行します。

すでにアカウントをお持ち方は所属しているチーム画面のなかで「デザインファイルを新規作成」をクリック。英語表示の方は「New design file」がそれに該当します。

一般的なデザイン作成に必要なフレームはツール内にあらかじめ準備されているので、誰でも状況に応じたフレームの利用が可能。
その方法は左上のメニューから「フレーム」を選び、その後右側に表示される「デザイン」タブの中から必要なものを選ぶだけ。

次に紹介するのが図形の挿入方法です。図形の挿入は左上の「□」をクリックし、挿入したい図形を選択。

あとはフレーム内でドラック＆ドロップをすれば好きな大きさ、好きな位置に配置できます。色や枠線の種類、細かい配置などは右側の「デザイン」タブから指定しましょう。

テキストの入力は左上の「T」をクリックし、フレーム内でドラック＆ドロップ。こちらもフォントやサイズなどの細かな指定は右側「デザイン」タブから！

今ご紹介した最低限の基本操作だけでも、簡単に以下のようなものを作ることができます。当然他にもさまざまな機能があるので、より精度を高めたい方は一度調べてみてはいかがでしょう。

ホームページやアプリのプロトタイプ

FigmaではWebデザインの作成が可能。デザインファイル作成時に、右側の「プロトタイプ」というタブを駆使すれば、作成したデザインに動きをつけたり、テスト的にWebサイト公開時のような画面で動きを確認したりすることができます。

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

他の主要デザインツールとの違いをそれぞれ比較し、解説します。

Adobe XDとの違い

FigmaとAdobe XDの大きな違いは無料プランの存在です。Figmaには無期限の無料プランが存在しますが、Adobe XDは有料のみ。そのため、費用を抑えたい方にはFigmaがおすすめです。
Adobeのコンプリートプランに登録している方は、Adobe XDをプラン内で使用可能。この場合はAdobe PhotoshopやAdobe Illustratorと連携が可能という点で、利便性ではAdobe XDの導入に軍配が上がるでしょう。

Sketchとの違い

デザインツールの先駆けとしてリリースされたSketchは使いやすさに定評がありますが、現在はFigmaの成長も著しく、一概に扱いやすさで優劣をつけることは難しいかもしれません。
しかしSketchはWindows非対応、かつ言語環境は英語のみという大きなデメリットも存在します。これらを理由にSketchを利用候補から外される方も多いのではないでしょうか。

Canvaとの違い

Figmaと同じようにCanvaも完全無料で利用できます。
Figma では無料での共同編集機能をはじめとした、ワイヤーフレームの制作に便利な機能が豊富であることや、プロトタイプの制作時により詳細な動きをつけることが可能。そのためワイヤーフレームの作成にはFigmaがおすすめです。

一方でチラシやプレゼン資料など、画像を多く用いる場合にはCanvaが向いているかもしれません。その理由は利用できるデザインテンプレートの数にあります。
Canvaについて、もう少し詳しく知りたい方は下記の関連記事をご確認ください。

まとめ

デザインツールの利用を検討されている方は、手始めに無料で利用できる「Figma」から試してみてはいかがでしょうか？ こちらご利用の際は、まず公式ホームページからログインするアカウントの作成を！