どうしてこんなに人気なの？今更聞けないFigmaの強みと活用法を解説！

こんにちは、千葉県船橋市のweb制作会社 株式会社ノベルティのデザイナーせがわです。

ノベルティのデザインチームでは今年の春から約半年間かけてwebデザインの制作ツールをFigmaに移行する大改革を行いました。

導入する会社も非常に増えているFigmaですが、そもそもどういったツールで、どんな場面に使うことが適しているのか、実際に活用してみて感じたメリットと共に紹介します。

この記事で分かること

• Figmaは何を得意としているツールなのか？
• どんな機能があるのか？
• 実際にどんな活用ができるのか？

Figmaってどんなツール？

Figmaは、より良いデジタルプロダクトをより速く提供できるようにするために、複数のメンバーがコラボレーションできるデザインツールです。

1つのファイルに複数人が同時にアクセスし、互いの操作に干渉することなく編集することができます。

また、デザインを元にCSSを自動生成しコピー＆ペーストすることが可能なので、コーディングの際の補助ツールとしても優れています。

Figmaの強みは？スゴイポイント8選

なぜFigmaがオススメされるのか、オススメを裏付けるFigmaの強みを紹介します。

1.快適な共同作業

コラボレーションを前提としたツールで、複数人が同じファイルを同時に編集できます。

リアルタイムで同時編集が可能で、互いの操作が干渉して元に戻ってしまうことはありません。

一言程度のやり取りができるカーソルチャットや音声通話が搭載されているので、リモートワークでもコミュニケーションを取りながら進められる機能が充実しています。

2.URLで最新データを簡単共有

共有URLを発行するだけで相手に制作中のデザインを見てもらうことができます。

デザインを都度PDFやJPEGに書き出す必要がない上に、常に最新状態を反映した状態で共有することができます。

3.様々なツール、プラグインでデザイン作業を効率化

オートレイアウト、バリアントなど、デザイン作業を効率化できる便利な機能が充実しています。（機能は今後別の記事として解説予定です）

また、デフォルトには無い機能を補填したり、デフォルトのままでは使いにくいツールを使いやすく開発したものがプラグインとして多数公開されています。

プラグインを活用することで、より作業を効率化することができます。

4.高品質なプロトタイプ作成

マウスホバー、ドラッグ、クリックなどのインタラクションを付与することで、実際にアプリやwebサイトを操作しているような動きをつけたプロトタイプを作成することができます。

※インタラクション…人間が何かしらのアクションを起こしたとき、相手側のシステムや機器がそのアクションに対応したレスポンスをすること

5.アプリ活用によるミラーリング

スマホアプリでミラーリングすることで制作中のデザインをリアルタイムで実機確認することができます。

アプリからデザイン確認やコメントも可能なので、外出先での急な確認も可能です。

6.クロスプラットフォーム

WindowsとMacどちらにも対応し、ブラウザ上で動作が可能です。

閲覧から編集までブラウザで完結できるので、クライアントに共有するときも相手にアプリをダウンロードしてもらう必要はありません。

7.自動保存によるバージョン管理

変更内容は自動保存されるのでいつでも最新の状態で共有可能です。

ローカルでファイル管理は不要になりますが、ローカルデータへの書き出しも可能です。

万が一のときには過去のバージョンに戻って復元することができます。

8.無料プラン（スタータープラン）でも使える充実した機能

一部の機能やファイル数に制限はあるものの、制作に関する機能は無料プランでもほぼすべて使うことができます。

Figmaの活用場面

Figmaは共同作業に優れているツールですが、実際にどんな場面で活用できてどんなメリットが生まれるかを紹介します。

デザイナー×デザイナー

制作のスピードアップ

複数人で分担してデザイン制作ができるので、デザイン全体が完成するまでのスピードアップが見込めます。

トンマナの統一

互いの作業状況を把握しながら作業できるので、デザインのトンマナを揃えやすくなります。

デザインチームで分担する前にデザインスタイルを作成し使用カラーやルールを決めてから進めることで、担当者ごとにデザインのブレが無い状態で制作を進めることができます。

コンポーネント機能をうまく活用すれば、複数ページを跨いで流用しているパーツに修正が加わったとしても、全箇所に簡単に反映することができます。

後輩デザイナーのスキルアップ

先輩デザイナーの進め方や作り方を実際に見ることができるのでスキルアップに繋がります。

ライター×ディレクター

ディレクターが作るワイヤーにリアルタイムで原稿入力

ワイヤーの進捗を見ながらそれに合わせて原稿を考え、同時に流し込みを進めることができます。

ワイヤーが上がってくるまで待つ必要もありませんし、ライターから原稿が上がってきたタイミングで内容や文字数を見ながらもう一度ワイヤーの手直しをする、というラリーが不要になります。

デザイナー×コーダー

常に最新ファイルを参照できる

自動保存機能によりファイルは常に最新の状態を維持することができるため、デザイナーが更新したファイルの共有を忘れたことにより古い状態のままコーディングを進めてしまうようなトラブルが発生しにくくなります。

また、コーダーまで回ってくる前の段階だとしても制作中のデザインを見ながらパーツ作成を進めることもできるので、待ち時間を利用して効率的に制作を進めることができます。

コーディングに特化した開発モードを搭載

インスペクト（コーディングに必要な情報）をスムーズに取得でき、それを元にコーディングした仕上がりがデザインに非常に忠実であることから、作業効率が上がるだけでなくクオリティアップにも繋がります。

さらに、開発モードの登場によりデザインデータを元に自動でCSSを発行しコピー＆ペーストができるようになりました。

他にもVSCodeなどのアプリと連携ができるなど、コーディング作業の効率化に役立つモードが実装されています。

※開発モードは2023年にベータ版として提供されていましたが、2024年から編集権限を所有するユーザー限定の機能となります。

クライアント×ディレクター or デザイナー

プロトタイプで実装イメージに近い状態での共有が可能

プロトタイプを作成してデザイン確認に活用することで、実際にwebサイトを操作しているかのような状態でクライアントにデザインを見てもらうことができます。

UIデザインなどでは実際の使用感を確かめながら進めることもできます。

直感的に使えるコメント機能でクライアントが要望を伝えやすい

デフォルトで搭載されているコメント機能はファイルの編集権限が無いユーザーでも活用することができるため、クライアントによるワイヤー＆デザイン確認でも使用することができます。

修正してほしい箇所に直感的な操作でコメントをつけることができるので、不慣れなクライアントでも使いやすく的確に要望を記入できます。

まとめ

Figmaがどんなツールでどんな機能があるのかについて紹介しました。

webやUIのデザインツールとして有名ですが、デザイナー以外も便利に活用できたり、業務フロー全体の効率化に役立つ機能が盛り沢山です。

次回はイラレ一筋10年のせがわが感じた「イラレとFigmaのちがい」について紹介したいと思います。

みなさま良いお年を！