Design

クリエイティブとテクノロジーを繋ぐデザインプラットフォームFigma

2022-11-14

印象的でシンプルな図形とカラフルな配色のメンフィススタイルのグラフィックが目を惹くインターフェースデザインツールFigma（フィグマ）は、デザイナーだけでなくプロダクトマネージャーやエンジニアなどにも幅広く利用され、独自の創発的なエコシステムを構築することで、ユーザー数を急拡大してきました。本記事執筆時点でのユーザー数は約400万人を超え、GoogleやMicrosoft、The New York Timesなどの大手企業でも利用されており、2022年9月にはAdobeによる200億ドル(約2.9兆円)での巨額の買収提案を受け入れたことでも話題になりました¹。本記事では共同創業者であるディラン・フィールド最高経営責任者（CEO）とエヴァン・ウォレス兼最高技術責任者（CTO）が生み出したFigmaのこれまでの成長の背景と今後の可能性についてご紹介します。

世界中のデザイナーに愛されるコラボレーションツールFigmaとは

Figmaはインターフェースデザインをはじめとしたプロダクト作りに関わるチーム全体の生産性を高めるためのツールであり、コンセプトデザインからプロトタイプ作成、ユーザーフィードバック収集を一気通貫で行うことができます。チームにおけるあらゆるデザインプロセス及びアウトプットをFigma上で共有することで、デザイナーとノンデザイナー間の双方向のコミュニケーションが円滑になり、ユーザーにとってより使いやすくかつエンジニアにとっても実装しやすいインターフェースデザインが可能になります。

2020年のパンデミック真っ最中の米国大統領選挙では、バイデン＝ハリス政権のクリエイティブチームの活躍が話題になりました。ウェブサイト（JoeBiden.com）から選挙用飛行機、グッズ、SNSのポストに至るまですべてのアウトプットが1つのFigmaファイルで制作されており、リモート環境下で多くの関係者とスピード感のあるデザインコラボレーションが実現した背景にはコラボレーションツール、Figmaの存在がありました²。また日本国内においても、PayPayフリマがリリース当時（2019年10月）よりほぼ全ての画面をFigmaで作成しているなど³、大手企業のサービスから個人のデザインワークまでFigmaの導入事例は数多く存在します。

従来のデザインツールは、デスクトップ上の専用アプリケーションでデザインファイルの作成・編集・出力を行うものが主流であり、ファイル閲覧や簡易な編集を行うにも有料アプリケーションの購入が必要など、デザイナー以外にとって敷居の高いものであることが一般的でした。一方Figmaは、「デザインプロセスに関わるすべての人が、摩擦を起こすことなくシームレスでロスレスなやりとりができること」を目指し、新しい技術（WebGL、Operational Transforms、CRDT等）を積極的に取り入れることで、ユーザーが特別なアプリケーションを導入しなくてもブラウザ上でストレスなくデザインファイルが閲覧可能な環境を実現しています。¹

「デザインはチームスポーツ。だから、コラボレーションが不可欠なんだ」¹
“And design is a team sport———it’s collaborative by nature.”

Figma公式サイトスクリーンショット — 記事執筆時点のFigma公式サイトを参照

インターネット・ネイティブなデザインツールを目指して

Figmaは2012年に創業者であるディラン・フィールドの個人プロジェクトから始まりました。カリフォルニア生まれのディランは、幼い頃からコンピューターサイエンスやアート、デザインへの関心が高く、科学、技術、工学、数学などのテクノロジー教育に強みを持つマグネットスクールに進学します。その後ブラウン大学のコンピュータサイエンス学科にて、後のビジネスパートナーとなるエヴァン・ウォレスに出逢います。エヴァンはPixarでインターン経験があり、WebGL（ブラウザ上でインタラクティブなグラフィックスを実現できるJavaScript API技術）を学んでいたことが後の「ブラウザ・ファースト」なFigmaの開発にも活かされていたようです。

ディランはLinkedIn、Flipboard でのインターンを経験した後、ティール・フェローシップ（ピーター・ティールによる大学を中退した若い起業家向けの投資プログラム）への採択を経て、大学を卒業したばかりのエヴァンとFigmaを共同創業しました。ドローン用のソフトウェアやミームジェネレーターなどの様々な事業アイディアの検討を経て、最終的にPhotoshopの代替に挑戦するプロダクトを作ることを決めました。当時の記事⁴では「ユーザーがオンラインで創造的に自分自身を表現できるようにするテクノロジースタートアップ」と紹介されており、デザイナーのためのプロダクトであることが強調されています。

当初はプロダクトが上手く立ち上がらずFigmaベータ版の公開に数年を要しており、不満を抱いた多くのメンバーが去っていくなど順調とは言えない滑り出しでした。当時Figmaは主に無料版をエントリーモデルとして提供していましたが、マイクロソフト社のあるユーザーに「無料のスタートアップツールは信用できない」とのフィードバックを受けてプラン改定をするなど、様々な試行錯誤を行っていたようです。

その後オーストラリアのソフトウェア企業であるAtlassianから着想を得てシンプルな価格設定に変更したり、ノンデザイナー向けを重視した機能を拡充したりすることでプロダクトとしてもビジネスモデルとしても輪郭が定まり、2016年にようやく正式版がリリースされました。その後2017年にマルチプレイヤー編集を含めた革新的な機能を追加しソフトウェアの開発と改善を続け、デザイナーコミュニティが熱狂するプロダクトにまで進化を遂げました。

Figmaの成長を加速させたノンデザイナーのための「ブラウザ・ファースト」

Adobeをはじめとする競合製品はデザイナーのための素晴らしいプロダクトであり、それらを通して多くのクリエイティブが生み出されてきました。それに対してFigmaはデザイナー個人だけではなく、ノンデザイナーを含むプロジェクトチーム全員の生産性向上を重視した設計思想を持つプロダクトです⁵。このファイルは最新のものなのか、閲覧・編集のためにどのアプリケーションをインストールしておかなければいけないのか、デザインへのフィードバックはどこでどうやって行うべきなのかなど、デザインプロセスにおいてノンデザイナーが抱く疑問や課題にも真摯に向き合ってきました。

それを象徴するのが「ブラウザ・ファースト」な機能の数々です。従来のデザインツールではファイルの閲覧・編集を行うためには有料のデスクトップアプリケーションのインストールを求められることが一般的であったのに対して、Figmaでは共有URLをWebブラウザで開くだけで誰もがハイパフォーマンスな作業環境で、デザインファイルの共同編集をリアルタイムで行うことができます。そもそもFigmaが生まれた当時はブラウザ上で動作するWebベースのデザインプラットフォームは珍しく、またパフォーマンスを維持しながら複雑なグラフィックスをレンダリングするという体験や複数ユーザーが同時参加・編集する機能自体もそれまでのデザインツールの常識を覆すものでした。

その結果ノンデザイナーがデザインプロセスの早い段階からモックアップやクリエイティブを確認することができ、またFigma内のコメント機能によってデザインへのフィードバックのハードルを大きく下げることにも成功しています。従来のデジタルプロダクト開発においてはビジネス要件や機能要件が決定された後にデザインプロセスがスタートすることも多く、ユーザー体験及びインターフェース設計がそれらの制約を受けてしまうことも少なくありませんでした。近年ではよりユーザーファーストなプロダクトを作るためにコンセプトデザインやモックアップデザインなどがプロダクト構想の初期プロセスに組み込まれ、デザイナーがビジネスや開発のミーティングに参加する機会も増えています。

デザイナーのためのデザインツールと、チームのためのデザインツール「Figma」 — 当社作成

またデザインコラボレーションが容易になったことでノンデザイナーの業務内容にも変化をもたらしています。コピーライターは、デザインファイルに直接コンセプトワードを入れて見栄えの確認や完成した姿を想像することができたり、ソフトウェア開発者はデザインやマークアップが苦手であってもデザイン及びコード変換データを簡単に手に入れたりすることが可能になりました。ノンデザイナーの体験をも重視したFigmaは、デザインだけでなく開発プロセスやその他の業務を変革し影響を与えるプロダクトに発展しています。

デザインプラットフォームとしてのFigmaコミュニティ

ノンデザイナーのためのコラボレーション機能だけでなく、熱狂的なファンコミュニティがあることもFigmaの大きな強みの一つです。Figmaのアプリケーションをインストールしてアカウントを開設すると同時に、Figmaの世界中のユーザーに繋がるソーシャルネットワークサービスにアクセスすることができます。 Figmaユーザーの個人や企業が自分のデザインをFigmaのコミュニティサイト上に簡単に公開することでき、共有されたデザインファイルは誰でも即座にコピーして自分のワークスペースで編集できます。オープンソースソフトウェア開発で一般的に行われていた知的資産(ソースコード)の共有と同じようなことがデザインファイルでも可能になったのです。日本でも新型コロナ対策サイトのデザインデータとして、2020年3月にFigmaのデータが公開され話題になりました⁶。GitHubでも同様にソースコードが公開されており、開発者であれば誰でも改良に貢献でき、さまざまな改善策がIssuesとして寄せられていました。

Dribbbleなどのデザインポートフォリオ共有サイトは数多く存在しますが、画像ファイルのみでレイヤーやコンポーネントを含むデザインファイル全体を確認できないことは珍しくありません。UIキットやデザインシステムなどをGitHub上で公開している例も少なくないですが、GitHubはソフトウェアのソースコードの共有及び管理に特化して開発効率を向上させるプロダクトであり、Figmaが構築したコミュニティはそのデザイン版と言えるものでした。さらにFigmaの利便性を高めるプラグインも無数に存在しており、それらの開発もFigmaコミュニティ内にて活発に行われています。例を挙げると、ダークモードのデザインを自動的に生成する、外部データを取り込んでデザインのフォーマットエラーを検知修正するなど、便利なプラグインが常に実装され続々とコミュニティユーザーたちによってリリースされています。

コミュニティ内においてデザインファイルやプラグインが盛んに公開されることで、あらゆるFigmaユーザーのデザイン業務の効率化が進み、またデザイナーだけでなくソフトウェアエンジニアやプロダクトマネージャーのような職種のユーザーが増加したことで新たなデザインファイルやプラグインの公開に繋がるという好循環型エコシステムが形成されています。Figmaは熟達したデザイナーにとって利便性の高い機能を数多く提供するだけでなく、ビギナーが先人たちの技術を学び倣う機会や居心地の良いコミュニケーション機会を提供するプラットフォームサービスとして、世界中のデザイナー・ノンデザイナーに愛されています。

デザインツールの歴史とFigmaの位置付け

Figmaの買収を発表したAdobeは、1980年代にデザインの世界に革命とデジタルデザインの概念をもたらし脚光を浴びてきました。MacintoshによるDTPブームに乗じて、Adobeは「PostScript」という美しく印刷を行う画期的な技術ツールを提供する企業として名前が知られるようになりました⁷。Adobeは当時多くのシェアを占めていたIBM PCではなく、Apple社のMacintoshを活躍の舞台として選びその価値を高め、今日のDTPや印刷業界において絶対的な主流ブランドとして君臨し続けています。他の追随を許さず、Adobe IllustratorやAdobe Photoshopといった誰もが知っている優秀なデザイン用アプリケーションを多数リリースし、クリエイター及びデザイナー層から絶大な支持を受けるプロダクトとなりました。⁸

そんなデザインツールの急先鋒であったAdobeに対して、2010年以降ではWebデザイン需要の急増を背景にベクター主体のデザインツールであるSketchが頭角をあらわしはじめます。SketchはMac向けに開発されたライトな操作性とmacOSの「ルックアンドフィール」に沿ったシンプルなインターフェースが特徴的であり、アプリ・Web制作に特化した新しいデザインツールです。フラットデザインの登場、SVGの台頭、レイアウト修正がしやすいなどの点から、ベクターグラフィックスの優れた操作性が注目され始めたこともSketchの成長を加速させました。ベクター描画はスケール操作において画像の歪みが生じにくく、かつ印刷の見栄えも良いことに加え、Macintosh＝デザイン特化というブランドイメージも重なり、Sketchはより新しくアップデートされたデザインツールという印象づけに成功しました。またサブスクリプション型サービスに全面移行していたAdobe製品に比べ、当時買い切り型ツールだったSketchはコスト面でも優位な状況でした。現在はSketchも価格モデルをサブスクリプションに変更し、Sketch Cloudに移行することに重点を置いています。

Sketchも世界中の多くのデザイナーに愛されるプロダクトですが、Mac専用のツールであるためWindowsユーザーは対象外であり、当時はプロトタイピングをするためにInVision（プロトタイピング用ソフトウェア）等を組み合わせて利用しなければいけないなどの課題がありました。SketchもFigma同様にプラグインのインストールによる機能追加が可能であるもの、プラグイン自体はSketchが管理するソフトウェアではなく製作者が公開しているGitHubページ等から別途インストールする必要があり、特に法人で利用する場合にはプラグインのパフォーマンスや安定性、セキュリティ面などの懸念もありました。またSketchのデザインファイルを閲覧・編集するためにはどのユーザーも同じプラグインの事前インストールが必要になるなどファイルのサイズが膨大になりやすく、編集はローカルPC用のアプリケーションを利用することになるため、バージョン管理やファイル管理が論点になることも少なくありませんでした。

そのような背景のなかで、既存製品の様々な課題を解決するサービスとしてFigmaが生まれました。Figmaのユーザーは常に同じデザインファイルにアクセス出来るため、複数ユーザーの同時編集で起こるコンフリクト回避やバージョン管理のためにデザインファイルを一時的にコピーをする必要がなくなりました。デザイン、プロトタイピング、ファイル共有、開発者のハンドオフなど様々なアプリケーションを兼ね備えているため、画面遷移のプロトタイプを作成するために別のプロダクトを利用することも不要になりました。その結果として前述の通り、ノンデザイナーにとってハードルの高かったデザイン業務ツールをあらゆるプロジェクト関係者にとってのコラボレーションツールにまで進化させることに成功しています。

またFigmaは2021年よりチームのコラボレートを一層加速するため、、2つ目のプロダクトとなるデジタルホワイトボードのFigJamをリリースしています¹。Figmaはビジュアルやユーザーインターフェースを作成には便利であるものの、その前段階のアイディアの整理やフローチャート作成などの用途としては、ピクセルやレイアウト設定などの機能が多すぎるという課題がありました。コロナ禍でリモートワークが増えていたという背景もあり、会議をより活発にするためのオンラインホワイトボードツールとしてFigJamが生まれました。FigmaとFigJamは一つのアプリケーション内に共存しているためコピー＆ペーストでデザインをシームレスに共有することができます。対面で行うホワイトボードでのブレーンストーミングの快適さや臨場感とは異なる体験であるものの、会議を盛り上げるためのステッカーやテンプレートの機能などが充実していることも特徴的です。このようにFigmaは一貫してデザイナーとノンデザイナーの垣根を超える機会の創出に取り組んでいます。

Figmaの今後の可能性について

Figmaとデザインエンジニア

さまざまな領域に新しい風を吹き込んだFigmaは、デザインエンジニアというデザイナーとエンジニアの領域を跨く人材の輩出及び活躍にも貢献していると考えられます。ユーザーがオンライン上で目にする全てのWebデザインやUIデザインの背景には、フロントエンド、システムインフラ、ワークフローなどさまざまな技術の上に構成されたアーキテクチャが存在しています。デザインの背景にある多様で高度な技術はあまり注視されない部分です（キツネが星の王子さまに伝えたように、目に見えるものはとてもわかりやすいのです）。

前述の通り、多くのプロダクト開発において、ソフトウェア開発とデザインは別のプロセスとして分断されてきました。これまでは共通言語の不足やツールの壁があるなかで、仕様漏れやコミュニケーションエラー等を防ぐためには、チームのデザイナーやソフトウェアエンジニア個人による配慮や努力に依存してしまうことが少なくありませんでした。デザインエンジニアに関する詳細は別記事でもご紹介していますが、デザインとエンジニアリングが交差する領域における問題解決の一助として、Figmaはデザインエンジニアに対してプロトタイピングをはじめとしたデザインプロセスをより円滑にするための機能を数多く提供しています。作成した画面をモックアップとして容易に動かせるだけではなく、デザインファイルからCSSやJavaScriptを出力するためのプラグイン等も存在しており、Figmaはデザインとソフトウェアの実装の差分を埋めるためのプロダクト改善を積極的に行ってきました。デザインとエンジニアリングの繋ぎ手となる人材にとっても優れたツールとして日々進化を続けており、今後ユーザーへのプロダクトの納品とアイディアの検証がより早いスパンで実現できるようになるでしょう。

"It might sound a bit silly, but I think computer programming is pretty much the closest thing we have to magic,"

「ハリー・ポッター』シリーズで育ったことにちなんで、ディランは、プログラミングやテクノロジーはマグルの魔法への挑戦に似ていると話しています。⁴

Figmaとエンタープライズ

Figmaが生み出すコラボレーションは同じ会社内のチームにとどまらず、企業間においても活発に行われています。伝統的な大企業でもスタートアップでも新しいデジタルプロダクトを生み出すプロセスに何ら変わりはありません。ただ前者はスタートアップ企業に比べて新しいSaaSやツールを導入するためのハードルが高く、時間がかかることは往々にして見られる状況です。大手企業でSaaSを導入するためには一定レベルのセキュリティ水準が必須であり、ステークホルダーに対して説明可能であることが求められます。

それに対してFigmaは2020年の時点で既にSOC 2 Type1、Type2を取得しており、クラウドに保存されている顧客データの機密性をさらに強化しセキュリティ投資を行っていくと公表しています。SAML SSOプロバイダを統合したことにより、専用のアプリケーションなしでも素早いURL共有とログインが安全かつ容易にできる機能やユーザーアクセスの制御などに対応することで、エンタープライズ用途でも安心して利用できる環境が整えられています。以前からサポートされていたOkta、Microsoft Azure Active Directory、OneLoginに加え、現在ではGoogle SSO、Active Directory フェデレーションサービス (ADFS)にも対応しています。⁹

またエンタープライズ導入という観点ではAdobeがFigmaを買収したことによって、Adobe製品というブランドが大手企業への導入を拡大する一助となることが予想されます。機能的にも、Adobeが今まで研鑽してきた多くの便利な機能が搭載される可能性もあるでしょう。

次世代のデザインツールに求められるもの

デザインにおける複合的な生産性の触媒として最終的なデザインアウトプットやコンポーネントのようなアセットに加え、複雑なインタラクションやアニメーションのプロトタイプなどのスマートな創造をFigmaが促進してきたことは言うまでもなく、Figmaのコミュニティプラットフォーム以外でも今後デザインプロセスに携わるすべての人のコラボレートネットワークは拡大を続けていくでしょう。著者個人の意見としては、上位プランには既にある機能ではありますが、GitHubのbranch機能やSketch+Abstractのような差分管理システムが標準プランにも充実することに期待しています¹⁰¹¹。また新しいデザインツールとしてPenbotが注目され始めています¹²。TechCrunchの記事によれば¹³、AdobeのFigma買収リリース後、同ツールのサインアップ数は5,600%急上昇し、オンプレミス展開は400%増加したと言及しています。Adobeによる囲い込みを懸念したデザイナーたちが、よりオープンで柔軟なコラボレーションツールを求めての行動であることが推察されます。

Figmaのような共同作業や相互運用が可能なソフトウェアツールへの需要は、今後ますます高まっていくと考えられます。デジタル時代のデザインは、基本的に目に見えるデザインアウトプットで完結するものではなく、ソフトウェア開発ともより密接に結びついていくためです。AdobeからSketch、SketchからFigmaへとデジタルデザインツールの体験がアップデートされてきたように、健全な競争が今後もなされていくことが予想されます。ディランとエヴァンが築いたムーブメントと新しい感性にAdobeが新しい息吹を吹き込むことで、デザインエンジニアリングとの結びつきやエンタープライズ展開など、Figmaはこれからも堅牢性と創造性に満ちたより良いプロダクトとして進化していくでしょう。