こんにちは。デザイン事業部でデザイナーをしている野田です。

先日（2025年5月8日に）開催されたFigma Config 2025 @ サンフランシスコで5大新機能が発表され、既に試したり、実践している方も多いのではないでしょうか。5大新機能のうち、3機能は、現在beta期間中でこの期間しか無料で試すことができないため、まだトライしていないという方は今がチャンスです。
この記事では、これら新機能についてKeynote動画の内容をベースに、関連動画や記事、Playgroundなどへのリンクを交えながらまとめていきたいと思います。

※本記事内では、Figma公式のリンクや動画、画像などを中心に引用させていただいています。

Config 2025 現地Keynote動画

○ Config 2025: Figma product launch keynote (Dylan Field, CEO & Co-founder, Figma) LIVE at Moscone

本題に入る前の余談ですが、
Config 2025 Keynoteのデモ中に紹介されているKotoの美しいデザインも必見です。
→ linkedinの投稿へ

5大新機能

Config 2025で発表された順番でまとめていきたいと思います。

  1. Grid
  2. Figma Sites (Beta)
  3. Figma Make (Beta)
  4. Figma Buzz (Beta)
  5. Figma Draw

01. Grid (Figma Designの新機能)

Figma Gridは、Figmaの既存の強力なレイアウト機能である「Auto Layout」に2次元のグリッド構造の概念を導入する新機能です。

WebのCSS Gridのように、行と列を使って複雑なレイアウトをより柔軟かつ効率的に作成・管理でき、UIの構造化や開発との連携がスムーズになります（開発は、Dev modeに切り替えることでCSS gridのプロパティを確認できます）。
これまでAuto Layoutだけでは難しかった、行と列が絡み合う複雑なUIレイアウトを、より直感的かつ簡単にデザインが可能になりました。

  • 複雑なレイアウトを楽に: 行と列を使って、入り組んだデザインも直感的に作れます。
  • 開発連携をスムーズに: Web開発で使うCSS Gridに近いので、デザイナーと開発者の認識のズレをなくします。
  • レスポンシブデザインを効率化: 複数の画面サイズに合わせる調整が、グリッド基準で正確にできるようになりました。

以下は、Grid Playgroundで紹介されているGridの基本的な作成方法です。

○ Figmaグリッド：グリッド間隔の追加と調整

Gridの特徴

  • Auto LayoutにGridオプションが追加: Auto Layoutに、新たに「Grid」オプションが追加。（今まで使っていたAuto Layoutオプションも引き続き利用可能）
  • 行と列の自由な設定: 行数や列数を決めたり、それぞれにサイズや間隔を設定が可能。また、特定の要素を複数の行や列にまたがって配置（セル結合）ができる。
  • 直感的な操作: ドラッグ操作でグリッドのサイズなどを視覚的に調整できる。
  • 開発との相性抜群: CSS Gridの概念に近いため、デザイナーが定義したグリッドが、そのまま開発におけるCSS Gridの構造にスムーズに変換されやすい。

▼使用権限

Figma Designの編集権限があればどなたでも利用可能です。

▼類似サービス

Figma Grid の2次元レイアウトを構築する概念は、今までにない新しいサービスと言えるのではないでしょうか。Figma Gridに似ているように見える、Penpot (ペンポット)は、Web技術（SVG）を基盤としており、CSSグリッドの概念をよりダイレクトにデザインツールに持ち込んでいますが、Figma GridのAuto Layoutシステムとはまた別の概念のサービスと言えそうです。

▼関連動画や実践ツール

○ Config 2025: Figma Gridでデザインを構造化、自動レイアウトの新しい使い方
Config 2025 2日目に行われたFigma GridのDeep Dive動画。
Gridの基本的な概念から柔軟な使い方までを詳しく説明しています。

○ Grid Playground: Figma Gridのあれこれを簡単に試せるFigmaが提供する実践ツール。

02. Figma Sites

Figma Sitesは、Figma Designとは独立したサービスです。
イメージとしては、FigJamと同じような存在です。

Figma Sitesは、Figma Designで作成したものを、そのままWebサイトとして公開できる新機能です。これまでのFigmaは「デザイン」まででしたが、Figma Sitesによって「公開」まで、Figmaのツール内で完結できるようになります。

  • デザインから公開までがスムーズに: コーディングなしで、デザインをそのままWebサイトとして公開できます。
  • 素早いWebサイト立ち上げ: 簡易的なサイトやLP（ランディングページ）を、デザイナーがすぐに作れるようになります。
  • ノーコード/ローコードでのWeb制作: コードの知識がなくても、Figmaのスキルだけでサイトが作れます。
  • コラボレーションの強化: デザインプロセスから公開までFigma上で一元管理できるため、デザイナー、開発者、マーケターなど、異なる役割のチームメンバー間の連携がスムーズなります。

Sitesの特徴

  • デザインを忠実に再現: FigmaのデザインをWebサイトに反映できる。
  • レスポンシブ対応: PC、スマホなど、どの画面サイズでもきれいに表示される。
  • 豊富なプリセットインタラクション: インタラクションはワンクリックで追加が可能。
  • 柔軟なコード編集: コードは、直接編集することはもちろん、ノンコーダーには嬉しいAIプロンプトを使った編集も可能（近日公開予定）。
  • CMS機能: 記事などのコンテンツが簡単に更新できるように（今後搭載予定）。
  • 独自ドメイン接続: 独自のURLでサイトを公開できる。
  • SEO対策: 検索エンジン最適化（SEO）のための基本的な設定（メタディスクリプション、タイトルタグなど）もサポートされる予定。
  • FigJam連携: FigJamでブレインストーミングやワイヤーフレーム作成を行った後、その内容をFigma Sitesに直接取り込んでサイト構築を進めるような連携も可能になる予定。

▼使用権限

ベータ期間中は無料。正式リリース後は有料化予定。
※正式リリース後の料金体系については、Figmaの公式発表を待つ必要があります。

▼類似サービス

Figma Sitesの最も直接的な競合と言えるのが、コーディングなしでWebサイトを構築できる以下のようなサービスが挙げられます。

  • STUDIO (スタジオ): FigmaからSTUDIOへのデザインインポート機能なども提供されていますが、今後はFigma Sitesだけで完結するか（？）
  • Framer (フレーマー): FramerはFigmaと同じくデザインから公開までを目指す点で近いコンセプトを持っている。

▼関連リンク

○ Figma Sitesの紹介サイト

03. Figma Make

Figma MakeもFigma Sitesと同様、Figma Designとは独立したサービスです。
イメージとしては、FigJamと同じような存在です。
※残念ながら、現時点でまだ順次ロールアウト中で私の方ではハンズオンができない状態のため、内容だけになりますが特徴をまとめたいと思います。

Figma Makeは、アプリ開発において、Figma DesignのプロトタイピングプロセスをAI（人工知能）の力で劇的に加速できる新機能です。デザイナーがプロトタイプを作成する際の労力を減らし、より多くのアイデアを素早く試せるようにすることを目指しています。

  • プロトタイプを速く作れる: AIが手助けして、アイデアの検証を効率化します。
  • 多様なプロトタイプを試せる: 指示やデザインから、いろいろな動きのプロトタイプを自動で作ります。
  • 新しいアイデアを発見できる: AIが提案する動きから、思いがけないヒントを得られます。

Makeの特徴

  • テキストで指示するだけ: 「スワイプで次へ」のように、文字で伝えるだけでAIが動きを作成。
  • デザインから自動生成: 作ったデザインから、AIが最適な画面の動きを自動で提案・作成。
  • 動きのバリエーション: AIが、同じ動きの違うパターンをいくつか提案してくれる。
  • 賢いアニメーション: AIが自然で洗練されたアニメーションを自動で生成。
  • 生成結果を編集: AIが生成したコードやデザインを更に手動で編集が可能。

▼使用権限

ベータ期間中は無料。正式リリース後の料金は未定。
※正式リリース後の料金体系については、Figmaの公式発表を待つ必要があります。

▼類似サービス

一概にこのサービスが競合になりえると言い切れませんが、近しいサービスとして以下のようなAIの力でデザインやプロトタイプ作成を自動化・効率化しようとするサービスとも今後比較していっても面白いかなと思いました。

  • Uizard (ウィザード): 手書きのスケッチやテキストプロンプトからUIデザインを自動生成し、ワイヤーフレームやプロトタイプに変換する機能が強力。
  • Visily (ビジリー): スクリーンショットや手書きのスケッチからAIがUIを生成し、ワイヤーフレームやプロトタイプを素早く作成してくれる。
  • Stitch (Google Labs): Googleが開発中の実験的なAI UIデザインツールで、自然言語や画像入力からレスポンシブなWeb/モバイルUIを生成してくれる。（Galileo AI (ガリレオAI)もジョインして更に進化しそう）

▼関連リンク

○ Figma Makeの紹介サイト

04. Figma Buzz

Figma Buzzもまた、Figma SitesとFigma Makeと同様、Figma Designとは独立したサービスです。
イメージとしては、FigJamと同じような存在です。

デザイナー以外のチームメンバー（マーケター、コンテンツクリエイターなど）が、ブランドガイドラインに沿ったマーケティングアセットなどを効率的に大量生成・共有できるツールです。

以下は、Figma Buzzのアセット作成方法のダイジェスト動画です。
○ Figma Buzz: アセットの作成方法

Buzzの特徴

  • テンプレートベースのワークフロー: デザイナーが作成したブランドテンプレート（SNS投稿、広告バナー、ポスターなど）を基に、テキストや画像を簡単に差し替えて新しいアセットを生成。
  • 簡易的な編集機能: デザイナーモードに切り替えなくても、テキストや画像の変更、色の一部調整など、限られた範囲での編集が可能。
  • 一括生成機能 (Bulk create): スプレッドシート（.xlsxや.csv）のデータをインポートすることで、複数のバリエーションのアセットを自動で大量生成できます。これにより、多言語展開やA/Bテスト用のバナー作成などが劇的に効率化できる。
  • AI活用: まだbeta版ですがAIによる画像生成機能なども搭載されており、コンテンツ作成をさらに加速できる。
  • デザイナー以外のユーザー向け: 専門的なデザイン知識がなくても、ブランドの統一性を保ちながら、必要なアセットを迅速に作成・管理できるよう設計されている。

▼使用権限

ベータ期間中は無料。テンプレート公開は有料プランで可能。
※正式リリース後の料金体系については、Figmaの公式発表を待つ必要があります。

▼類似ツール

どちらかというと、canvas（キャンバ）の機能がごっそりFigmaに導入されたようなイメージで、尚且つ、Figma Buzzは、オリジナルデザインコンポーネントをライブラリから読み込めるため、デザインに一貫性を持たせられる（ブランドイメージを崩さずにプロモーションができる）便利なツールです。

▼関連リンクや動画

○ Figma Buzzの紹介サイト
○ Figma Buzz: ブランドテンプレートの公開方法

05. Figma Draw (Figma Designの新機能)

Figma Drawは、Figma Designに追加された新機能です。

ベクター編集機能を大幅に強化し、より表現豊かなイラストレーションをFigma内で直接作成できるようになりました。これまでのFigmaはUI/UXデザインに特化していましたが、Figma Drawの登場により、イラストや複雑なグラフィック作成の可能性が大きく広がります。

  • 表現の幅が広がる: 手書き風のイラストや複雑なグラフィックをFigma内で描けるようになります。
  • ワークフローが効率化: これまで別のツールで行っていたイラスト作成作業をFigmaに統合し、ファイルのやり取りをなくせるようになります。
  • UI/UXデザインに活用: アイコンや装飾など、UIに必要な高品質なグラフィックをFigma内で完結できます。

以下は、Config 2025で行われたFigma DrawのDeep Dive動画です。
ちょっと長めですが、Drawで実現可能なことが全て盛り込まれています。
○ Config 2025: Figma Drawで表現力豊かなデザインとイラストレーションを

Drawの特徴

  • ブラシツール: 鉛筆やマーカー、水彩のような様々な質感の線が描ける。
  • ストロークの調整: 線の太さだけでなく、ギザギザやふわふわ、毛糸のような独特の線を表現できる。
  • シェイプビルダー: 複数の図形を簡単に結合したり、切り抜いたりして、複雑な形を素早く作れる。
  • パスに沿ったテキスト: 曲線など、自由に引いた線に沿って文字を配置できる。
  • テクスチャとノイズ: 作成した図形や線に、リアルな質感やざらつきを追加できる。
  • 強化されたベクター編集: より精密で効率的なベクターパスの選択・編集が可能。

▼使用権限

Figma Designの編集権限があればどなたでも利用可能です。

▼類似ツール

今まで、Figma Designでベクター要素を編集する際、ベクターポイントが予期しない方向へ飛んだり、複数のベクター要素が統合されてしまいFigma上での編集が困難となったり、あまりベクター編集には向いていない印象でしたが、Figma Drawの登場により、Illustrator や Procreate の代替となりえるくらい、確かにベクター編集が強化されていると思いました。

▼関連リンクや実践ツール

○ Figma Draw の紹介サイト
○ Figma Draw Playground: Figma Drawのあれこれを簡単に試せるFigmaが提供する実践ツール（動画を見なくてもこれだけやれば使い方はほぼ網羅できそうです）

最後に

よりパワフルになったFigmaを目の当たりにできたConfig 2025でした。

個人的には、ベクターの進化に特に驚きました。Figma Drawのベクターの強化が細かい調整を可能にしてくれ、FigmaをUIデザインだけでなく、イラストレーションもこなせる万能なデザインツールへと進化させていると感じました。
また、Figma Gridは、Figmaのレイアウト機能を次のレベルに引き上げ、特に複雑なWebサイトやアプリケーションのUIデザインにおいて、デザイナーの生産性と開発連携の品質を大幅に向上してくれそうです。

独立した新サービス群（Figma Sites, Figma Make, Figma Buzz）の発表は、これからのFigmaファミリーの拡大を予見できる事態で、まだまだその拡大が見られそうという期待も積もります。

その他、今回取り上げた5大新機能の情報がまとめられているリンクや動画（Figma公式より）

○ Config 2025で発表された新機能の全てが説明されているFigma公式ページ
→ https://www.config.new/

○ Config 2025で発表されたすべての製品 | Figma

○ Osaka Config Watch Party 2025 / FoF Osaka #08 [→ 記事へ]