ウェブ・アプリエンジニアのための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がありチーム全体の開発速度を落とさずデザインを進めることができています。

最新版のファイル探しから開放される

先程も触れましたが、歴史的な経緯によりデザインツールはネイティブアプリで提供されてきました。ネイティブアプリということはデザインはローカル上にファイルという形で保存されることになります。

このファイルという形が厄介で、同じデザインのハズなのに複数のファイルが存在したり、チームメンバー間でファイルの中身がずれてしまったりする原因になってきました。ソフトウェアエンジニアのソースコードはGitを始めとするバージョン管理ツールが一般的になる一方で、デザインツールにおけるバージョン管理の決定打は存在していませんでした。

Abstractといったデザインファイルに特化したバージョン管理ツールは存在していますが、Gitのような知名度はありませんし、Gitで大容量のファイルを扱えるGit LFSを使う手法も一般的にはなっていません。筆者はソフトウェアエンジニア以外に厳密なバージョン管理を求めるのは正直現実的でないと考えています。

こういった点でもWebアプリという形をとったFigmaが問題を解決しました。Figmaではデザインをファイルといった形では通常出力せず（一応出力する方法は用意されています）、Google Driveで管理するDocumentやSpreadsheetと同じくクラウド上にファイルが存在しています。こういったことから、複数ファイル間やユーザー間でファイルが乱立することはなくなり、常にユーザー間で最新版が維持されています。

筆者もSketchやAdobe XDを使う職場で働いたことがありましたが、Gitで管理すると言いつつも「最新版がそこにない」といったシチュエーションは複数経験しています。こういった悩みを解決するだけでもFigmaのメリットは大きいと感じています。

もちろんデメリットも

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

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

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

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

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

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

まとめ

今回は、Figmaを使うと解決する課題を軸にメリット・デメリットについて紹介しました。以上のようなメリットやデメリットを知った上で、Figmaを使いたいと思ってもらえたでしょうか？

次回の記事では、UIモックを作る基本的な機能について説明を行います。本連載ではメディアの特性上、エンジニアが触るデザインツールという観点でUIモックの作成とパーツの再利用を重点的に解説を行う予定です。

余談: 本記事のサムネイル・本文中画像もFigmaで作っています。ファイルはこちら