Figmaの何が革新的？ 知らないと損する「超活用術」

Webやアプリのデザインの領域において、フリーミアム型ツール「Figma（フィグマ）」の利用が近年広がっている。Webブラウザー上で大半の機能が動作する利便性に加え、コラボレーション機能が強力なことから人気だという。

「デジタルマーケターズサミット 2025 Winter」では、フリーランスのWebデザイナーで、Figma解説書の執筆経験もある相原典佳氏が登壇。マーケターが知っておくべきFigmaの特徴について、徹底解説した。

そもそも「Figma」って？ コラボレーション作業が得意なデザインツール

Figmaとは、米国サンフランシスコを拠点とするFigma, Inc.が開発・提供するデザインプラットフォームだ。WebやUIデザインに必要な各種機能が一元化されており、無料で使える機能もある。有料プランは単月契約の場合は月額3,000円、年間契約の場合は月額2,400円（2025年3月11日から値上げ）。

Figmaは基本的にWebブラウザー上で動作する。デザインの対象となるのはWebサイト、Webアプリ、スマートフォンアプリなど幅広い。「コンポーネント」あるいは「スタイル」「バリアブル」と呼ばれる機能の活用により、一度作成した要素や性質を簡単に使い回せるため、デザインを効率的に作れる。

Figmaは複数のサービスから構成される。中核となるのが「Figma Design」で、デザイン作業には本機能を用いる。通常、「Figma」といえばこの「Figma Design」を指す。この他にホワイトボード作成機能「FigJam」、スライド作成機能「Figma Slides」がある。

たとえば、Webブラウザーだけで、デザインを共有したり、編集したりできる。このほか、有志によって作成される各種プラグイン、配布データの豊富さもクリエイターの観点からは魅力だ。なお無料のスタータープランでも、機能は充実している。共有・コラボレーション機能には制限があるものの、デザインそのものは作成、編集、完成まですべて行える。

同時閲覧、コメントなどコラボレーションを促進する機能の数々

Figmaのコラボレーション関連機能について、相原氏が解説していった。

デザイン表示とプロトタイプ表示

Figmaで作成したデザインを共有する場合、共有される側はFigmaのアカウントがなくても、Webブラウザーさえあれば閲覧できる。

データ表示は2種類に大別される。1つ目は「デザイン表示」だ。これは一般的なデザインツール同様、作成過程の画面をほぼそのまま共有できる。

2つ目が「プロトタイプ表示」だ。こちらは編集過程ではなく、最終的な完成に近い状態を示すために使われる。Webサイト開発では、たとえば入力フォームなどを最終的に盛り込むとしても、作成途中はプログラミングなどの都合で最終完成型を示せないケースが多々ある。その状態でもデザインが意図どおり進行しているか、確認する際にプロトタイプ表示が活躍する。

コメント機能

デザイン表示かプロトタイプ表示かにかかわらず、マウスカーソルなどで任意のポイントを指定して、コメントを残せる。

たとえば修正依頼を出すとして、「このページの2段落目の3行目が……」のように書く必要はありません。コメントを残せば、相手にもメンションが自動的に届きますし、また「解決済み」ボタンを押すとそのコメントは非表示にできます（相原氏）

1つのデザインに対して、同時に複数人で閲覧ができ、閲覧中にコメント入力も可能。さらに「マルチプレーヤーカーソル」機能を用いると、指定したユーザーがデザインのどの部分を画面に表示しているか、スクロールを自動追従することができる。

加えて、Figmaの有料プランを契約していれば、編集を複数人で同時に行ったり、Figma上で直接通話する（ZoomやMicrosoft Teamsを介さず）ことも可能だ。

データの確認とDev Mode（開発モード）

デザイン作業が終わり、実際のWebサイト開発のためにコーディングをする際には、たとえば画像と文章段落の間に何ピクセル分の余白を空けるかなど、より厳密なレイアウト指定が必要になってくる。こうした設定値の確認・共有についても、Figmaでは十分考慮されている。

さらに有料プランでは、Dev Mode（開発モード）が用意されている。無料プランでは、キーボードのAltキーないしOptionキーを押している間のみ、レイアウトに関するピクセル数表示ができるが、Dev Modeであればキー押下の有無に関係なく常時表示が可能。CSSで具体的にどういった要素が指定されているかも、よりわかりやすく表示される。

なお「アノテーション」を使えば、コメントを残すだけでなく、レイアウト幅などの指定値も共有できる。

バージョン履歴

バージョン履歴は、デザイン修正の履歴を残しておき、過去のバージョンを簡単に呼び出すための機能だ。自動保存されるだけでなく、特定のタイミングを指定しての保存もできる。無料プランの場合は、保存期間は30日分までに制限される。

有料プランの中でもより上位のプランであれば、保存した各バージョンからさらに分岐（ブランチ）したものも保存しておける。

「オートレイアウト」がおすすめ！ まだある便利機能

ここまでは、非デザイナー向けのFigmaの基本機能。この他にも、デザインの大量生産ををサポートするための機能は多い。

オートレイアウト

オートレイアウトは、文章や画像を文字どおり自動的にレイアウトするための機能。余白のコントロールに長けており、たとえば3つの文章段落が並んでいたとして、これらに対して1回、指定値の変更作業を行えば、すべての段落間スペースに調整がかかる。

他のデザインソフトだと、文字入力枠を一度指定すると、文章の加筆をして枠を超える行数になった場合、枠のサイズを（マウスのドラッグで）指定し直さないといけません。それだけでなく、関連する要素を配置し直したり、ページ全体に対して設定していた余白の指定がやり直しになったりします。オートレイアウトを設定しておけば、そうした手間が省けます。Figmaを学ぶなら、ぜひ覚えておいてほしい機能です（相原氏）

コンポーネント

Webサイトにおけるボタンなどのデザインは、1回作るとさまざまなページで共通利用される。しかし、デザイン修正の過程で仮にボタンデザインを修正するとなると、これまでは全ページに対して修正作業を行わなければならなかった。

しかしコンポーネント機能のもとで共通ボタンを作っておけば、修正が比較的簡単になる。ボタンに記載するコメントだけでなく、色なども変更できる。後の修正を容易にするためには、初期段階である程度の作り込みが必要とのことだが、たとえば規模の大きなサイトでボタンデザインを10～20個作るようなケースでは、管理が圧倒的に楽になると相原氏は補足する。なお講演では詳しい言及はされなかったが、「スタイル」及び「バリアブル」機能も非常に便利なので、名前だけでも知っておいてほしいという。

AI機能

Figmaにおいても生成AI機能の導入が進められている。現状では英語版サービスでの開発が先行しているが、日本語版でも一部機能が解放されつつある。

現在示されている機能としては、「インタラクションを追加」（画面遷移の自動指定）がある。たとえば「サインアップ」ボタンを押したら登録画面Aに遷移し、「バック」ボタンが押されたホーム画面に戻るというような指定は、通常なら手作業で行う。しかし、これがAIで自動化される。正しく機能しているかの精査は絶対的に必要だが、地味に時間がかかる作業を効率化できる可能性があると、相原氏は期待を寄せた。

たとえば「1.Lemon Cake」という項目がある場合、これをマウスのドラッグ操作で複製し、さらにAI機能の「コンテンツを置換」を実行すると、「2.Chocolate Mousse」「3.Carrot Cake」というように、連番を直したり異なる商品名を仮指定してくれる機能もある。

相原氏がすでに多用している機能として紹介したのが「レイヤー名を変更」機能。デザインソフトでお馴染みのレイヤー機能だが、なにぶん数多く作るため、レイヤー名の指定が煩雑で、初期値のままにし、結果的に連番だらけで意味がわからないという事態はままある。このレイヤー名を、AIが適切に指定・変更してくれる。

FigJam

Figma Designからは独立した別機能。企画案を立案する際などに活躍する、ホワイトボード機能・作図機能を提供するものである。たとえばフローチャートなどを作成できる。

白紙状態から作るのではなく、数多く用意されているテンプレートの中から1つを選んで活用したほうが効率的でオススメ。またこちらでも、ベータ版ながら生成AI機能がある。入力したテーマに応じて生成AIが自動に作図してくれるという。

Figma Slides

2024年にリリースされた新機能。Figmaの操作体系で、プレゼン用スライドを作成できる。よって有料プランを契約していれば、前述のオートレイアウト機能なども利用可能。

ノンデザイナーも有効活用してみよう！

相原氏はここまでの解説を終え、「FigmaはUIデザイン、Webデザインに適しているだけでなく、コラボレーション機能が充実しているおかげで、デザイナーではない人にとっても有効に活用できる」と、その魅力を改めて強調。FigJam、Figma Slidesの登場によって利用機会も増えていくだろうとも展望した。

なお相原氏は自身のX（旧Twitter）アカウントでFigma関連の情報を日々発信中という。Figmaについて知りたい方はぜひフォローをと呼びかけ、講演を締めくくった。