Figmaとは？　チームのコラボレーションを支えるデザインツール

エンジニアやPdMも活用するデザインツール「Figma」

WebデザインやUIデザインのツール「Figma(フィグマ)」をご存知でしょうか。

FigmaはWebブラウザ上で複数のメンバーがデザインの共同編集をすることができるデザインコラボレーションツールです。現在、MicrosoftやGoogle、Spotify、Netflixといったグローバルなテック企業のデザイナー、エンジニアやPdM(プロダクトマネージャー)に活用されています。

また、日本国内でもフリーランスのデザイナーのほか、富士通やリクルート、Yahoo! Japan、楽天、Qiitaといったさまざまな企業のプロダクトデザイン、Webデザインに携わる方々がFigmaを利用してデザイン業務を行っています。

今年1月には日本法人のFigma Japanが発足し、この夏には日本語ローカライズ版のローンチを予定しています。

本連載では、Figmaの基本的な利用方法から実務に役立つTipsまで、さまざまなFigmaユーザーに登場いただいて幅広く紹介していきます。

Figmaで何ができる？ 最大の特徴は「ブラウザで動く」こと

Figmaの最大の特徴は、「ブラウザ上で動く」ということです。専用のアプリケーションをPCにインストールする必要はありません。

ブラウザ上でツールが動くことの大きなメリットは、プロジェクトの共有が簡単にできること。作業中のページのURLを共有すれば、異なるチームや社外の人でもすぐに編集作業のページに参加できます。

• Figmaを利用したWebページデザインの画面イメージ(1)

Web制作やアプリ開発を進めていて、こんな経験をしたことはないでしょうか？

• デザイナーから「制作中の画面イメージをチェックしてほしい」とファイルが送られてきたけど、専用アプリケーションを持っていないのでファイルが開けない

• 画面イメージをPDFで受け取ったものの、エフェクトやアニメーションなど動きのあるデザイン部分がイメージできない

• 最新版のファイルを探すのに時間がかかったり、修正ファイルを間違えて先祖返りしてしまったりする

• ファイル共有をするたびにストレージサービスへのアップロードとダウンロードを行わなければならず、ファイルの受け渡しにかかる時間がもったいない

こうした非効率的なプロセスは、Figmaを使うことで解決できます。

文書や資料の作成をGoogleドキュメントやGoogleスプレッドシートで共有しながら行うことで、作業効率が向上したという経験はないでしょうか。Figmaを使えば、デザイン業務でも同様の効率化が実現できるのです。

もちろん、デザインツールとしての機能も充実しています。シンプルな操作性を実現するUIを採用しているため、ベテランのデザイナーの方はもちろん、デザインが専門ではない職種の方も扱いやすいでしょう。Figmaユーザーからは「動作が軽い」という声も多くいただきます。

豊富なデザインテンプレートも用意されており、さまざまなプラグインも無料で提供されています。専門知識がなくても、テンプレートやプラグインを組み合わせることでWebやアプリのデザイン設計を気軽に行えます。

• Figmaを利用したWebページデザインの画面イメージ(2)

Figmaでは創業時から「すべての人がデザインにアクセスできるようにする」を企業のビジョンに掲げています。

Webブラウザ上で動かせ、チームでの共有がしやすく、誰でも直感的に操作できるツールとしているのも、根底には「デザイナーだけでなくすべての人にとってのツールにしたい」という思想があります。

オンラインホワイトボードツール「FigJam」

Figmaではデザインコラボレーションツールである「Figma」のほかに、オンラインホワイトボードツール「FigJam」を提供しています。

FigJamは、Figmaと同じくブラウザ上で動作し、簡単に共有・共同編集ができるオンラインホワイトボードツールです。会議の議事録として使ったり、プレゼンテーション資料を作成したりと、いろいろな使い方が可能です。2021年春にBeta版として、Figmaとは独立したツールとして提供開始し、2022年2月に正式ローンチしました。

• FigJamを利用したWeb会議の様子

FigJamは付箋やマスキングテープを貼り付けたり、フリーハンドに矢印を引っ張ったりと、自由度や直感性が高く、アナログツールのように使うことができます。

FigJamを使ってブレインストーミングを行い、その成果をFigmaに連携してデザイン作業を進めるというように、リモートワークでのWeb開発をさらにサポートしてくれます。

また、何より使っていて楽しいツールです。ツールを楽しく使えるということは、より良いアイデアが生まれやすくなるということ。ツールを選定する上で、”楽しさ”は、すごく重要な要素だと思います。

Figmaの料金体系

「Figma」と「FigJam」は、基本機能を無料で利用できる「Starter」プランのほか、有償の「Professional」「Organisation」「Enterprise」プランを提供しています。

「Starter」プランでは、利用できるファイル数や、履歴の保存期間に制限がありますが、デザインをしたり共同編集をしたりといった基本的な機能はすべて利用できます。

• FigmaとFigJamの料金体系

細かい差分はFigmaの料金ページに記載がありますが、プランごとに以下の要素に差があります。

• 機能面の差分(上位プランでは、音声通話やプラグイン管理などの機能が利用できる)

• 階層構造(より整理され、作業効率を向上させるワークスペースを追加できる)

• ユーザー承認・ロール設定(承認されたユーザーのみアカウントに入れる機能や、デフォルトでのユーザーロール設定など)

• セキュリティ(SSO、 SCIMなどへの対応)

次回は、Figmaの考える「デザインの民主化」のほか、Figmaの特徴の1つでもある活発なユーザーコミュニティについても紹介します。