こんにちは！Goodpatchでデザイナーをしております柿迫です。最近Goodpatchの多くのプロジェクトでデザインツールにFigmaを採用する機会が多いので、実際に使ってみて働き方がどう変わったかをまとめてみます。Figmaを導入することに悩んでいたり、使ってみたけどいまいちという人の参考になれたらと思います。

Figmaって何？

FigmaとはサンフランシスコのFigma Inc.という会社が提供するデザインツールです。
WebサイトやスマートフォンアプリのUIデザインを行う、SketchやAdobe XD等と同じデザインツールになります。

Figmaの特徴

UIデザインツールとして一番のシェアをもっているSketch、Adobeシリーズとの互換性抜群のAdobe XDと比べ、Figmaはどのような特長があるのか？全てではないですがいくつかの機能をご紹介します。

Windows/Mac/アプリ/ブラウザでの利用OK

Sketchを使っている時に困ったのが、クライアントや開発パートナーが非Mac環境だった時。他のツールと掛け合わせたり、PDF化してフィードバックをもらったりと手間が多かったように感じます。
Figmaであれば、URL一つで、Windows環境であっても、Figmaのアプリをインストールしていなくても、閲覧編集が可能です。
大人数でのクライアントとのMTGでは、
URLをその場にいる人全員に共有し、それぞれがそれぞれの環境で開けばOKです。
わざわざ印刷物を用意したり、プロジェクターに投影する必要はありません。

コラボレーション

Figmaはデザインを同時に複数人が編集することが可能です。Figmaを採用する大きな理由がこの機能なのではないでしょうか。
今までは、複数人でUIデザインをするときは、ファイルを共有するもしくは別々のファイルで作業したものをマージする形が普通でした。
Figmaの場合は、同時に一つのワークスペースで編集ができるので、デザイナーAがトップページ、デザイナーBがそれを見ながら下層ページを同時に作っていくということが可能です。
ファイルを受け渡したり、ページによってファイルを分けたりする必要がないので、とても効率的です。

コメント機能

画面単位やパーツ単位でコメントを記載する事が可能です。
フィードバックを記載したり、仕様のメモを書いておきたいときに有効です。

その他の機能

これは他ツールにも搭載されている機能ですが、コンポーネント機能やプロトタイピング機能も搭載されています。
コンポーネントはSketchで言うところのSymbolで、ボタンやナビゲーションメニュー等の共通して使う部分をコンポーネント化できます。
また、プロトタイピングは軽度な切り替えアニメーションをつけることが可能です。クライアントに対しデザインのプレゼンテーションをする場合やユーザーテストをする場合にも使えます。

Figmaが加速させるコラボレーション

リアルタイム同時編集で作業分担が加速する

ペルソナ像をまとめたペルソナシートからカスタマージャーニーマップ、ワイヤーフレームから実際のビジュアルデザインに至るまで、一つの広大なワークスペーズで複数人が同時に作成・編集することが可能です。
別のアプリで作成し、別々のファイルで管理を行っていた旧来のやり方に対し、チーム内で役割を分けたメンバーが同時に作業を進めることが可能なので、効率的です。例えば、ワイヤーフレームからビジュアルデザインに入るフェーズで、一人のメンバーがワイヤーフレーム、別のメンバーがFIXしたものからその下のスペースで差が要することができます。

ファイルの受け渡しが不要

デザインワークの中では、クライアントやエンジニアに対したデザインデータのファイルを渡すことが多いと思います。バージョンが古いものを渡してしまったり、誤字が含まれたものを渡してしまうことも。
Figmaはバージョンという概念がなく、編集されたものが常に最新なので、クライアントやエンジニアにはFileのURLを共有すればOK。共有のやりとりもシンプルです。

Hangoutと掛け合わせた新しい会議体

これまで、クライアントからデザインの確認とフィードバックをもらう打ち合わせでは、デザインを印刷し、打ち合わせ解錠まで移動し、フィードバックをもらい、オフィスに戻って修正し、メールで直したものを送ることが必要でした。
オンラインMTGツールのHangoutを使い打ち合わせを行い、Figmaを使いリアルタイムでフィードバック内容をアップデートしていきます。リンクをすでに共有していればファイルの送信も不要です。

まとめ

上記のようにメリットの多いFigmaですが、プロジェクトのフェーズや内容によって選択するかしないかを決めたほうが良いと考えています。リアルタイムで同時編集ができるのでスピードを求められるプロジェクトでは有効ですが、「バージョンを管理したい」「コンポーネントをルール化して運用したい」「Mac環境下での操作性を求めたい」等のニーズがある場合はSketchの方をおすすめしたいと考えています。
また、Sketchからも同時編集機能が今後追加させると発表があったので、今後の動向を見守る必要があります。
Figma導入を考えている方は、まずトライアルで使用してみて、その機能性を体感して、ご自身のプロジェクトにフィットするかどうかぜひ試してみてください！

Share on

柿迫 航
Goodpatchで、デザイナーをしています。