Figma

どんなソフトか

Figma は、ブラウザ上で動くデザインツールで、Web サイトやアプリの画面（UI）設計とプロトタイプ（操作できる試作）作りを、複数人が同時に進められる点を最大の強みとする製品です。デザイナーと開発者が同じファイルを見ながら作業できるため、UI デザインのデファクトに近い位置を占めています。

横にスクロール

米国の Figma 社が 2016 年に正式公開しました。「デザインを誰もがアクセスできるものにする」という思想のもと、当時は重いデスクトップアプリが主流だった画面設計を、インストール不要のブラウザに持ち込んだ点が画期的でした。インストール不要でブラウザから使え、Windows・Mac 向けの専用アプリも用意されています。2022 年に Adobe が買収を発表しましたが、独占禁止当局の懸念から 2023 年末に断念し、Figma は独立企業として運営を続けています。

主な特徴

• リアルタイム共同編集: 同じ画面を複数人で同時に編集でき、各自のカーソルと変更がその場で全員に反映される。Google ドキュメントの体験を画面設計に持ち込んだ点が核心。
• プロトタイプ作成: 画面同士を矢印でつなぎ、クリックや遷移・簡単なアニメーションを伴う「操作できる試作」として動作を確認できる。
• コンポーネントとバリアント: ボタンなどの部品を共通化し、状態違い（通常・ホバー・無効など）を「バリアント」としてまとめて管理でき、デザインの一貫性を保ちやすい。
• デザインシステム: 色・文字・余白などを「スタイル」「バリアブル（変数）」として定義し、チーム共通のライブラリとして配布・更新できる。
• 開発者への受け渡し（Dev Mode）: 各要素の寸法・色・余白を確認し、CSS などのコード片を取得できる専用モードで、デザインから実装への橋渡しがしやすい。
• オートレイアウト: 要素の増減に応じて余白や配置が自動調整される仕組みで、レスポンシブな画面を組みやすい。
• プラグインと FigJam: 機能を拡張するプラグイン市場と、付箋やフローを描くオンラインホワイトボード「FigJam」を併せ持つ。

仕組み・アーキテクチャ

Figma の編集画面は WebAssembly と WebGL（GPU 描画）で動くブラウザ内アプリケーションです。一般的な Web アプリのように DOM で画面を組み立てるのではなく、C++ で書かれた描画エンジンを WebAssembly にコンパイルしてブラウザ上で実行し、キャンバスを GPU で直接描画します。これにより、数千の要素を含む大きなファイルでも滑らかに操作できる性能を実現しています。デスクトップアプリも中身は同じ Web 技術基盤を共有しています。

リアルタイム共同編集の核心は、各クライアントの編集をサーバー側で集約して矛盾なくマージする仕組みにあります。Figma は完全な CRDT ではなく、サーバーを真実の源（権威）とし、各要素のプロパティ単位で「最後の更新を優先（last-writer-wins）」しながら同期する独自方式を採用しているとされます。誰かがオフラインで編集しても、再接続時に差分が反映され、複数人が同じ要素をいじっても破綻しにくいよう設計されています。

主なユースケース・向き不向き

向いているのは、Web・モバイルアプリの UI 設計、画面遷移のプロトタイプ作成、チームでのデザインシステム運用、そしてデザインレビューやハンドオフ（開発への受け渡し）です。リンク 1 つで関係者に共有でき、ブラウザでコメントを受けられるため、デザイナー・エンジニア・プロダクトマネージャーが入り混じる現代の開発フローと相性がよく、反復しながら作り込む進め方に適しています。FigJam を使えば、要件整理やブレインストーミングといった設計の前段も同じ場で完結します。

一方で、写真の精密なレタッチや印刷物の色管理（CMYK・特色）、複雑なイラストの作画、そして印刷入稿用の厳密な版下作成といった用途には向きません。これらは Photoshop や Illustrator など専用ツールの領域です。また、編集はオンライン前提のため、常時接続が難しい環境やクラウド保存が許されない機密案件では、設計上の制約になる場合があります。

競合・代替との比較

歴史的に最も比較されてきたのは、画面設計の先行ツールだった Sketch です。Sketch が Mac 専用のデスクトップアプリで、共有や共同編集を別ツールで補う設計だったのに対し、Figma はブラウザ完結とリアルタイム共同編集を最初から備えていた点が、普及の決定打になりました。

ほかにも、グラフィック全般の手軽な制作なら Canva、Adobe 製品との連携重視なら Adobe XD（新規開発は終息）や Illustrator、オープンソース志向なら Penpot などが選択肢になります。Canva が「ひな型を編集して量産する」発想なのに対し、Figma は「部品を組み立てて画面を設計する」発想で、得意分野が根本的に異なります。

料金・ライセンス / エコシステム

Figma は無料プランでも個人や小規模な利用には十分な機能が使えるフリーミアム型です。有料プラン（プロフェッショナル・組織・エンタープライズ向け）にすると、編集者数の上限解放、バージョン履歴の延長、共有ライブラリ、Dev Mode の高度な機能、シングルサインオンや権限管理といった組織向け機能が解放されます。プラン名・価格・無料枠の範囲は改定されることがあるため、最新の内容は公式の料金ページで確認するのが確実です。なお、編集権限を持つ人数（シート）に応じた課金が中心で、閲覧やコメントのみのメンバーは無料枠で扱える設計が一般的です。

オープンソースではなく、Figma 社が運営するクラウドサービスです。エコシステムとしては、コミュニティで公開されるテンプレート・UI キット・プラグイン、Slack や Jira などの業務ツール連携、各種フレームワーク向けのコード生成プラグインなどが充実しています。完全な代替を目指すオープンソースとしては Penpot があり、自前ホスティングや脱クラウドを重視する場合の選択肢になります。

導入・運用上の注意点 / 評価

運用面では、デザインデータがクラウドに保存される前提のため、機密性の高い案件では組織のセキュリティ方針やデータ保管場所の要件との整合を確認しておくと安心です。チームで使う場合は、コンポーネントとデザインシステムを早い段階で整備しておくことが、一貫性と保守性を大きく左右します。ファイルが肥大化するとブラウザの動作が重くなることがあるため、ページ分割や不要要素の整理も運用のコツになります。

総じて Figma は、画面設計とチーム共同作業に特化し、ブラウザ完結とリアルタイム編集でハンドオフまでを一気通貫にしたツールです。写真加工や印刷物には専門ソフトが向く一方、UI デザインの設計・共有・実装連携を 1 か所でまとめたい現場では、現状もっとも標準的で強力な選択肢になります。