本記事では、特にスタートアップ企業では定番にもなっているデザインツール「Figma」の機能や導入するメリットについて詳しく解説します。弊社でも、WebサイトやアプリのUIデザインや資料作成、SNSや運用型広告のクリエイティブの制作まで幅広くFigmaを活用しています。

UIデザイナーはもちろんのこと、非デザイナーの方にとっても便利な機能が揃っているため、これからFigmaを活用していきたい方はぜひ参考にしてください。

Figma（フィグマ）とは？

画像：FIGMAデザインの概要

Figmaは、ブラウザ上でUIデザインやプロトタイピングが行えるツールです。WebサイトやモバイルアプリのUIデザインから、資料やバナーのデザインまで、幅広く活用されています。デザイナーにとっては必須のツールになっていますが、非デザイナーの方にとっても情報整理、資料の作成などに活用できます。

また、Figmaはアカウントにログインするだけでブラウザ上で作業することができ、操作性も非常に優れています。また、チームでのコラボレーション機能も充実しており、リモートでの共同作業にも最適なツールです。

日本では2022年に日本語対応が発表され、特にスタートアップ企業での導入が進んでいます。2022年9月にはAdobe社による買収も発表され、今後も拡大を続けていくことが予想されており、最も勢いのあるデザインツールとして導入が進んでいます。

Figmaを利用するメリット・特徴

Figmaの利用には以下のようなメリットがあります。以下にそれぞれ詳しく解説していきます。

ブラウザ上でクラウドに常に保存され、どこからでもアクセスできる

Figmaはブラウザやデスクトップアプリで利用可能です。ブラウザ版では、編集した内容がリアルタイムでクラウドに保存されるため、度々保存する手間がなく、あらゆるデバイスから、最新のファイルにアクセスできます。

共同編集・コミュニケーションがスムーズにできる

Figmaでは、他のユーザーとの共同編集を非常にスムーズに行うことができます。どの部分を他のユーザーが編集しているのかリアルタイムで確認可能で、さらにFigma上で直接チャットをすることも可能です。デザインプロジェクトを複数人で進行する際もコミュニケーションをスムーズに進めることができます。

画像：FIGMAデザインの概要

また、コメント機能を使えば、デザインへのフィードバックも直接行うことができます。別のツールや資料で修正点を伝える必要はなく、Figma上で直接コメントを残してもらえます。コメントへのリアクションやメンション機能も充実しており、コミュニケーションを円滑に行うことができます。

ワンクリックで簡単にファイルのリンクを共有できる

Figmaでは、ワンクリックで手軽にファイルの共有リンクを作成できます。さらに、共有する際の権限の設定も簡単です。この機能は、チーム内の共有はもちろん、クライアントなどチーム外の人とも簡単にファイルを共有する際に非常に便利です。

無料で使える機能が多い

Figmaでは、チームごとに料金プランの選択が可能ですが、スタータープラン（無料）でも多くの機能を活用できます。フリーランスや小規模プロジェクトに関しては、無料プランでの利用でもデザインの制作に十分です。

バージョン履歴機能がある

Figmaにはバージョン管理機能が備わっているため、誤ってファイルを削除してしまっても安心して復元できます。大人数での共同編集の際には、ファイルの誤削除などの人為的ミスが発生しやすいのですが、この機能により安心して作業を進めることができます。ただし、Figmaのプランによってファイルの保存期間が異なるので、チームのニーズに合わせて適切なプランを選択しましょう。

Figmaでできること

ここからは、Figmaで主にできること・実際の活用例を紹介していきます。

ワイヤーフレーム・UIデザインを作る

Figmaでは、ワイヤーフレームやUIデザインを制作することができます。Figmaは、PhotoshopやIllustratorほど、細かい機能があるわけはありませんが、Webサイトやアプリのデザインであれば十分にFigmaで作成することができます。

キービジュアルとして使う画像の修正やイラスト作成など、より緻密なデザインや修正が求められるところは、Photoshopやillustratorなどを適宜利用し、その素材を使ってFigmaでUIデザインを作成するのが便利です。

また、Figmaはプラグインが豊富に用意されているため、基本機能だけでは不足する場面でも、プラグインを利用して効率よくデザイン作業を進めることが可能です。そのため、PhotoshopやIllustratorを使用する前に、Figmaのプラグインで実現できるかどうか探してみるのもおすすめです。

※ 参考記事：【2023年度版】Figmaのおすすめプラグイン20選！プラグインのインストール方法から使い方まで解説

プロトタイプを作る

Figmaでは、プロトタイプを制作できます。画面間の遷移設定やアニメーションも追加することができ、コーディング前に実際のアプリやWebサイトの動作を再現できます。Figmaで制作したプロトタイプをもとにユーザーヒアリングやテストを行うことで、開発に着手する前に最適なデザインを検証できます。

画像：プロトタイプ作成機能

資料のデザインを作る

FigmaではPDF形式でのエクスポートも可能なため、PowerPointの代替として、資料の制作ツールとしても利用できます。PowerPointと比較して、操作の難易度は上がりますが、よりこだわったデザインや図解なども制作することができます。

広告クリエイティブやバナーのデザインを作る

広告やSNS等に用いるクリエイティブやバナーのデザインや、その他のグラフィックデザインもFigmaで制作することができます。Illustratorと比較すると機能性は劣りますが、プラグインを活用すれば、十分にクオリティの高いデザインも実現できます。

Figmaの料金

前述の通り、小規模なデザインプロジェクトならば無料プランでの利用で十分です。しかし、大規模なプロジェクトや、多数のファイルを扱うチームの場合、有料プランへのアップグレードがおすすめです。

figmaの料金は下記の通りです。

画像：Figmaの価格設定

まとめ

Figmaは、大人数での共同編集やリモートワーク時の課題を克服した優れたデザインツールです。デザイナーだけではなく、チーム全体のプロジェクト推進にも役立ちます。皆様も、是非Figmaをマスターしてみてください。