Figmaが新機能4つ発表、ノーコード＆ワンクリックでWebサイトを即公開「Config 2025」現地レポ（前編）

「Config」初日のキーノートでは、待望の4機能を発表

Figmaのローンチからおよそ10年経ち、今や多くの日本企業でもFigmaの導入が進んでいる。今回の「Config」には8,500人以上が現地参加し、世界45カ国で100以上のウォッチパーティが開催された。またカンファレンスが始まる2日前からは、プレパーティやGitHubとのコラボイベントなど、さまざまなネットワーキングイベントが実施され、各国のデザイナーたちが交流を深めていた。

「Config」初日のキーノートでは、待望の4機能が公表された。Web担当者にとって最も注目すべき機能は「Figma Sites（フィグマ・サイツ）」だろう。

新機能1Figma Sites：デザイン、プロトタイプ作成、公開まですべて1画面で完結

これまで、デザインからWebサイト構築までには次のような悩みがあった：

• クライアントなどへのデモ画面共有には別ツールを使わなければならない……
• 開発者を雇ったり、大量のコードを書かなければならない……
• デザイナーが完璧に仕上げたデザインも、実装後にイメージと異なる仕上がりになることがあった……

そこで誕生したのが 「Figma Sites」だ。いつものFigmaの画面と異なるのは、左側に「公開」ボタンが追加された点。このボタンを押すだけでURLが自動的に指定され、ユーザーがアクセスできるWebサイトが公開される。何も設定しなければURLはFigmaのサーバー上に自動的にホスティングされるが、カスタムドメインやサーバーももちろん利用可能だ。

コードを書くことなく、ワンクリックで公開まで完了する。つまり、デザインからプロトタイプ作成、そして公開までが、すべて同一画面内で一気に完結できるようになったのだ。

また、画面上にレスポンシブ対応のテンプレートが用意された。デスクトップ用画面を修正しながら、同時にスマホやタブレットでの表示を確認できるため、安心して作業を進められる。さらに画面左のライブラリからコンポーネントやアニメーションなども、ドラッグ＆ドロップで挿入できる。

デザインに動的な要素を持たせたいときは、コードを埋め込んで拡張する「コードレイヤー機能」も近日実装予定だ。たとえばサイト上に静的な棒グラフを置き、ページ読み込み時に、グラフが0地点から上に成長するように動かして見せたい場合は、次の2ステップで完了する：

1. 「Make interactive with code（コードを使ってインタラクティブにする）」ボタンを押すと、まずデザインがコードに変換される。
2. その後、プロンプト（AIにコード生成を依頼できる機能）で「グラフ読み込み時にバーが上へ伸びるようなアニメーションを加えて」と指示するだけで、動きを加えたコードに自動変換してくれる。

自分でコードを1行も書く必要がなく、もはや開発者へ依頼する必要すらないかもしれない。

FigmaのCEO ディラン・フィールド氏はキーノートで、あるユーザーが「ワンクリックでWeb公開できるボタンを5年間ずっと待っている」と書いたXの投稿を紹介し、「今日、叶ったよ」と述べると、観客から大きな歓声が湧き上がった。

「公開」ボタンはすでに実装済みで、AIによるコード作成、ブログなどのCMS編集機能も今年後半に公開される予定だという。Figma Sitesは現在、フルライセンスを持つユーザー向けにベータ版が利用可能だ。

新機能2Figma Make：AIにプロンプトで指示するだけで、実際に動くプロダクトを生成

アイデアを形にするまでにはスキルや時間を要するなど、次のような悩みがあった：

• アイデアがあっても、製品として実装するには高いコーディング能力が必要とされる場合がある……
• 複数の案があるのに、A案のプロトタイプを作るだけで手一杯。B案C案まで見せる時間がない……
• 動的なプロトタイプを一つ作るにも、エンジニアに協力を仰がねばならない……

これらの悩みは「Figma Make」で解決できるかもしれない。AIをフル活用し、プロンプトからコードへ変換する機能だ。初心者デザイナーはもちろん、非デザイナーでも、どのようなサイトを構築したいか、既存デザインをどう変更したいか、どのように動かしたいかなどを、まずは「文章」で説明できればOK。思いついたアイデアを、AIが動くレベルにまで形にしてくれる。

キーノートでは、今年1月にFigmaに入社したばかりというホリー・リー氏​がとてもわかりやすいデモを行った。たとえば、次のようなことが可能になるという。

• 音楽アプリを作る場合
  1. プロンプト・ボックスに「画面上に配置したCDのデザインを、曲の再生に合わせて回転させて」と指示する。
  2. AIがレイヤーの中の該当箇所を探して、コードを生成する。
  3. 実際に数分で、動作する機能が追加される。
  4. さらに「画面にCDを8個並べて」や、「3Dの動きを追加して」といった指示も追加できる。
      
• 手書き文字を3Dビジュアル画面に加える場合
  1. AIに指示を出す。
  2. 「文字をガラスの質感に」や「金属の質感に」といった変更を加えていく。
      
• 没入型ゲーム画面で、森の背景を作成する場合
  1. シューティングゲームのアクションや音を追加する。
  2. 動作確認できるレベルに仕上げる。

生成されたアウトプットが理想通りではなかった場合でも、フォントや色の変更程度であれば、ツールバーから自分の手で直接編集も可能だ。

プロンプトの履歴を見れば、完成までどのような指示をAIに与え、デザインや機能を追加していったのかを後からチェックできる。Figma Sitesで作ったWebサイトの一部を動的にしたい場合も、わざわざコードを書く必要はない。Figma MakeでAIに依頼して生成したコードレイヤーを、Figma Sitesに持ってきて埋め込めばいいのだ。

ここで注目すべきは「プロンプトさえ書ければ、特別なスキルは必要ない」こと。たとえば「デザイナーが作ったプロトタイプを非デザイナーに渡し、クライアントと打ち合わせしながら動きを追加していく」といったことも、今後はできるようになるだろう。複数人での作業を前提とした、コラボツールであるFigmaならではの使い方だ。

新機能3Figma Buzz：ブランドのガイドラインに沿った統一感のあるデザイン量産を支援

コラボツールだからこそ生まれるのは、次のような悩み：

• ブランドイメージに沿ったテンプレートを、各メンバーが個々に改変してしまう……
• ズレた改変が加えられたまま、デザイン量産が完了。その結果、やり直しになるケースも……
• 非デザイナー側も、ブランドアセットのテイストを意図せず壊してしまうことを懸念……

デザイナーがブランドアセットを用意しても、多くの人がデザインに携わるとなると「ちょっと微妙な改変」「元のテイストから逸脱した成果物がクライアントからOKをもらって、後戻りできない」などのリスクがつきまとう。時には全部やり直しになり、デザイナーが一つ一つ尻拭いすることもあるだろう。そこでデザイナーとマーケター双方の業務効率を上げつつ、統一感のあるデザインを量産できるよう「Figma Buzz」が開発された。

デモでは、デザイナーが作ったデザインを、マーケターが量産化していく様子が再現された。

1. まずFigmaで作った共有デザインアセットから、Figma Buzzの画面に「講演の告知用テンプレート」をインポートする。
2. そこに「①教育機関向けのイメージで」「②Instagramのフィード用とLinkedIn用、それぞれに作りたい」という条件を指定したうえで、新しい講演者・タイトル・日付といった要素を加える。すると指定した条件通りのデザインが一度に複製されるのだ。

あらかじめ「写真は手持ち素材を挿入するだけで元イメージに沿った色味に変換」「アイコンは4種のバリエーションからしか選べないように制限」など指定しておくと、ブランドのガイドラインの範囲内でのみ編集が可能になる。これで、非デザイナーでも迷うことなく、デザインのテイストを損なうことなく量産できる。

ユーザーの約3分の2（約66%）が非デザイナーが占めるFigmaならではの環境から生まれた新機能といえる。​​

この機能が活躍しそうなユースケースとして真っ先に思い浮かぶのは、基本の商品ページから、色違い、サイズ違い、言語違いのページを横展開していく大規模ECサイトだろう。またバナーを量産するディスプレイ広告などにも向いている。

特にバナーは、出稿先に合わせたアスペクト比によってテキストを変えることがあり、情報をスプレッドシートなどで管理している企業も多いのではないだろうか。基本のバナーが完成したら、そのスプレッドシートとともにFigma Buzzにインポートすれば、AIでバージョン違いのデザインを一括生成してくれるというから便利だ。

Figma Buzzベータ版はすでに公開済みで全ユーザー向けに開放している。

新機能4Figma Draw：「クラフト感」を加えることでAI生成の弱点を一掃

アイコンやベクターをAI画像生成で作成する際、次のような悩みがあった：

• どれも似たり寄ったり、没個性的で既視感がある……
• ベクター画像がのっぺりとしていて平面的……
• 質感や表情に乏しく、人間味がない……

これを解決するために開発されたのが「Figma Draw」だ。視覚効果なので、デモを見たほうが早いだろう。

AIによって作られたベクター画像やイラストを、手書き風のブラシなどのテクスチャを加える機能によって、奥行きや温かみ、クラフト感のあるデザインに変えることができる。ざらざらした紙に水彩やクレヨン、鉛筆で描いたような質感を加えると「AIっぽさ」が消える。人の手で作られた感のあるデザインで差別化をはかりたい時におすすめの機能だ。

キーノートではそのほか、オートレイアウトをさらに柔軟に、やりやすくする機能「Grid」のデモも行われた。