CodeZine(コードジン)

特集ページ一覧

「Figma」とは? テレワーク時代に効率的に共同作業ができる注目プロトタイピングツールの魅力を解説

共同作業に最適なプロトタイピングツール「Figma」入門 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

他デザインツールとの比較

 ブリューアスではFigmaの他にプロトタイピング(デザイン)ツールとしてSketchやXDを利用したことがあるため、いくつかの観点から3つのツールを比較してみました。

共同編集

 共同編集はXDでも可能ですが、環境やファイルサイズによってはタイムラグが大きくコンフリクトが頻繁に起きたことがあります。それからヒストリー機能はないためバージョンごとにファイル管理と共有が必要です。それに比べFigmaは、ファイルサイズに左右されにくくリアルタイムに編集内容が反映されます。またアプリケーションを必要としない分、開発メンバーやクライアントにデザイン制作過程を見せることも簡単にできます。

共有機能

 Figmaはデザイナー間での共有にも優れていますが、非デザイナーへの共有が圧倒的に楽です。特に好評だったのが、画面(フレーム)ごとにパラメータが振られており画面単位でURLを共有できることと、Viewerでも画面やパーツごとに画像をエクスポートできることです。画像出力はPNG、JPEG、SVG、PDFの4つの形式と倍率を選択することができます。また、任意の箇所にコメントを付けられる機能もあるため、デザインに関するやりとりをFigma上で完結させることもできます。

透明性

 SketchやXDのデザイン共有は、ツールの連携が必要なことから完成したデータの共有になることがほとんどですが、Figmaであれば基本ひとつのURL共有だけで済むのでワイヤーフレーム作成時などの早い段階からの共有がしやすいです。そのため、誰がいつどこで作業をしているのかがわかり、ブラックボックス化しやすいデザイン過程が可視化されます。また、デザイナーが編集したデータをそのまま見れるため、齟齬が起こりにくいです。

コンポーネント管理

 近年のアップデートによりSketch、XD、Figmaそれぞれ便利機能が増えているので甲乙つけがたくなってきているのですが、コンポーネントの差し替えなど細かいところのUXはSketchが使いやすい印象です。ただ、Figmaは別ファイルのコンポーネントやデザインスタイルを引用してこれるライブラリという機能があるため、複数ファイルで同一コンポーネントを利用する場合はFigmaが使いやすいです。それとFigmaであればViewerも各画面のインスタンスからコンポーネントへのアクセスが簡単に行えます。

履歴管理

 SketchやXDと連携させて利用するZeplinでは画面ごとに履歴を確認することができますが、Figmaはファイル単位でしか確認できないため、細かい修正などはコメントなどで補う必要があります。プラグインを利用すればFigmaからZeplinにデータを書き出すことが可能です。

おわりに

 ブリューアスでFigmaを本格的に利用するようになってからまだ1年も経っていないのですが、他のツールには戻れないほどFigmaにはたくさんの魅力があります。特に大人数が関わるプロジェクトでは作業効率がぐんと上がったのを実感しています。

 もちろん、日本語フォントの調節が上手くいかなかったり、パソコンのスペックや回線の状況によっては動作が重くなることがあったりと、気になる点もいくつかあります。他の競合ツールも日々アップデートが行われているため、今後の使いやすさはどうなっていくかわからない部分もあります。

 しかし、他のツールに劣る箇所は管理方法やプラグインの利用で補えるものが多く、頻度の高いアップデートによる機能の追加で解消される可能性も大きいです。同じようなツールを使った経験があれば、新規ツール導入による学習コストもそれほど高くありませんので、ぜひ一度利用してみてください。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:共同作業に最適なプロトタイピングツール「Figma」入門

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5