ウェブ・アプリエンジニアのためのFigma入門 (1) Figmaを使うわけ

FigmaはWebブラウザ上で動作し、複数人同時で編集が可能なデザインツールです。

従来UIデザインの分野ではSketchやAdobe XDといったツールが使われてきました。そういったデザインツールの分野にFigmaは複数人同時編集・Webアプリという特長を活かし登場しました。現在は5000万ドル以上の資金を調達するに至る、極めて注目度の高いツールに成長しています。

本連載ではUIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニアに向けに注目度の高まっているFigmaを導入すると嬉しい理由と使い方をお伝えします。

連載の一本目である本記事では、なぜFigmaを使うのか・今までのツールと何が違うのか？という点を重点に解説します。

対象読者

UIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニア
デザインファイルの管理で困っているエンジニア・デザイナー

Figmaを使う理由

SketchやAdobe XDといった先行するUIデザインツールが強いなか、FigmaはWebサービスの現場やOSS開発でも使われるようになっています。まずは、Figma以前に存在した問題、Figmaがなぜ使われるようになったのか・チーム開発に向いているのかを解説します。

デザイナー以外も触れる環境になる

一般的なデザインツールはデザイナーが一人でデザインを作って、そのツールで出力した画像を実装するエンジニアに共有するフローが想定されていました。また、通常のデザインツールはネイティブアプリとして実装されており、その編集にはネイティブアプリをインストールする必要があります。

こういったハードルからデザイナー以外がデザインファイルを触ることは稀で、デザインは常にデザイナーだけのものになりがちでした。

FigmaはWebアプリとして実装されているため、インストールは必要ありませんし、常に最新の状態が共有される仕組みになっています。このことから、FigmaではURLさえ共有すればチーム全員が同じデザインを触っていじれます。

近年のSketchやAdobe XDといったツールはWeb上に共有ページを生成したり、ページ上でコメントを残せたりするような機能を増やしてはいますが、Figmaを触ったあとの自分としては機能不足を感じています。

チーム内で作るものの認識を揃える

最近は新型コロナウイルスの影響で、リモートワークが増えてきました。ウェブアプリやスマホアプリを作る会社は特にリモートワークが採用されていると思います。そういった場面で問題になりがちなのがコミュニケーションです。

特に「エンジニアとデザイン」のコミュニケーションという場面で重要なのが、「作るものの認識を一致させる」点です。リモートワークでなくても難しいポイントなのですが、リモートワークでは更に困難になり、SlackがUIの議論だけで埋め尽くされることもあるでしょう。

そういった課題に対して、FigmaではUIに直接コメントを残せる機能を提供しています。UIモックに直接書き込めるだけでフィードバックは伝わりやすくなり、コミュニケーションコストは大きく下がります。また、Figmaでは同時編集に対応しているので、ZoomやSlack通話をつなげながら直接みんなで触っていくといった仕事の進め方も可能です。

筆者は仕事でこの方法を取り入れており、その場で「これでいこう」といった同意を取り付けています。普通であれば、「ミーティングまでに直して共有します」となり意思決定に時間がかかりがちですが、その場で見せられるFigmaがありチーム全体の開発速度を落とさずデザインを進めることができています。

もちろんデメリットも

ここまでFigmaはいいぞ、素晴らしいぞといい面だけを紹介しましたが、もちろんデメリットも存在するので紹介します。

1つはWebアプリであることです。ここまでさんざんWebアプリで実装されているからメリットだとお伝えしましたが、反面デメリットにもなっています。

例えば、クリックした位置の色を取得するスポイトツールです。ネイティブアプリとして実装されているツールでは、ウィンドウの外にある色を取得することができますが、FigmaではWebブラウザのウィンドウ内の色しか取得できません。

また、ローカルに存在するフォントを利用するにも一手間必要です。初期状態でもGoogle Fontsに存在するフォントを使えますが、（特に日本語で）ローカルに存在するフォントを利用したい気持ちがあると思います。利用するにはFigmaのデスクトップアプリを入れるか、「Figma Font Helper」（Linuxは未サポート）というアプリケーションをインストールする必要があります。

他にも、ネイティブアプリと比べてドラッグ・アンド・ドロップが貧弱、ブラウザとセットで固まる、Adobeツールとの連携が弱い等の細かい挙動が目につきます。

もう一つはデザイナーのマインドセットです。これは自分の経験則ですが、デザイナーの中には作成途中のものを見せたくないと考える人達がいます。そういった人たちからすると製作途中も見えてしまうFigmaに抵抗感があるそうです。