Config 2025: Figma product launch keynote (Dylan Field, CEO & Co-founder, Figma)
https://www.youtube.com/watch?v=HXVlgVWI7tc
Figmaが年次カンファレンス「Config 2025」で発表した5つの大型アップデートを体系的に解説します。
デザインワークフローを変革する新機能の全貌と、それらがもたらす可能性について深掘りします。
目次
- はじめに：Figmaの製品ポートフォリオ拡大
- Figma Designの進化：Grid機能
- Figma Sites：デザインからウェブサイトへ
- Figma Make：AIによるプロトタイピング革命
- Figma Buzz：マーケティング素材作成の効率化
- Figma Draw：表現力豊かなビジュアルデザイン
- 機能の利用可能時期とライセンス情報
- まとめ：Figmaが描く次世代デザインの未来
はじめに：Figmaの製品ポートフォリオ拡大
Figmaは「Config 2025」カンファレンスで、製品ポートフォリオを4つから8つへと倍増させる大規模なアップデートを発表しました。既存のFigma Design、FigJam、Figma Slides、Dev Modeに加え、新たに4つの製品が登場します。これらの新製品は、アイデアから完成品までのプロセスをさらに迅速かつシームレスにすることを目指しています。
また、Figmaは日本語を含む多言語対応の拡充も進めており、新たにブラジルポルトガル語のサポートを追加。2025年初頭から現在までに56のアップデートを実施し、スマートシンボル、スタイルのコピーと複製、折りたたみ可能なレイヤーパネルなど、多くの要望に応える機能強化が図られています。
基盤部分でも大きな改善が行われており、特に大規模ファイルのパフォーマンス向上に注力。平均ファイルサイズが18%増加する中、コピー＆ペーストやレイヤー選択、ページ切り替えなどの基本操作を最適化し、最も処理の遅いファイルのロード時間を33%短縮しました。
Figma Designの進化：Grid機能
グリッドレイアウトの重要性
グリッドレイアウトはデザインの基礎として長い歴史を持ち、ウェブサイトからモバイルアプリまであらゆるデザインの基盤となっています。1960年代にはグリッドの活用が広がり、現代ではCSSグリッドがウェブ開発の標準となっています。
しかし、これまでのFigmaでは二次元レイアウトを作成する際、Auto Layoutの入れ子構造が複雑になりがちで、他のデザイナーが理解するのに時間がかかる問題がありました。
新しいGridオプション
Figmaに追加された新しいグリッド機能は、Auto Layoutの新たなオプションとして実装されました。これにより、複雑な入れ子構造を作らずに二次元レイアウトが作成可能になります。
主な特徴：
- 行と列を自由に指定できるグリッド構造
- アイテムの自動スパン（複数の列や行にまたがる配置）
- 各列・行の個別リサイズ
- グリッド内での絶対位置指定（Controlキーを使用）
- CSSグリッドプロパティへの自然なマッピング
グリッド機能の活用例
デモでは、「Flu」というアプリのデザインを例に、ベントーボックスのようなレイアウトやカレンダーの作成が紹介されました。グリッド機能を使うことで、以下のようなデザインが容易に実現可能になります：
- ベントーボックスレイアウト：ブランドアイデンティティを表現する不規則なグリッドデザイン
- カレンダー/日付ピッカー：均等な間隔の日付表示
- ロゴウォール：複数のロゴを整列させた表示
- タイポグラフィとの組み合わせ：グリッドを「破る」デザイン表現
さらに、Dev Modeでは、このグリッドレイアウトがCSSグリッドプロパティに自然にマッピングされ、デザインと開発のギャップをさらに埋める役割を果たします。
Figma Sites：デザインからウェブサイトへ
ウェブサイト構築への新アプローチ
Figma Sitesは、Figmaのデザインからライブウェブサイトを素早く作成するための新製品です。デザインツールとウェブ開発の間のギャップを埋め、デザイナーがコーディングなしでウェブサイトを公開できるようにすることを目的としています。
主要機能
レスポンシブデザイン
- 複数のブレークポイント（デスクトップ、タブレット、モバイル）をサポート
- ブレークポイント間のマルチ編集で変更を同期
- ブレークポイント固有の調整も可能
コンポーネントとライブラリ
- 既存のFigmaライブラリを活用可能
- コンポーネントセットのバリアントは各ブレークポイントに自動適応
インタラクション
- プリセットインタラクション（ホバーエフェクト、パララックス、ドラッグ可能など）
- 既存のFigmaプロトタイピング機能との互換性
プレビューと公開
- リアルタイムHTMLとCSSへの変換
- レスポンシブプレビュー
- ワンクリックでの公開とカスタムドメイン対応
今後追加予定の機能
CMS機能
- コンテンツ管理システムの統合
- ブログ記事などの動的コンテンツ管理
- デザイン要素とCMSデータのマッピング
- インラインエディタによる素早い編集
コードレイヤー
- 複雑な機能のためのコード統合
- デザインから自動生成されるReactとTailwind CSS
- NPMモジュールのインポート
- ライブプレビューによるリアルタイム更新
Figma Make：AIによるプロトタイピング革命
アイデアを実現するAIパワー
Figma Makeは、既存のデザインをプロンプト（指示文）を使って完全にコード化されたプロトタイプに変換する新製品です。アイデアを素早く検証するための障壁を下げ、デザイナーが実際に動作するプロトタイプを手軽に作成できるようにします。
主な特徴
デザインの理解
- 単なる画像ではなく、デザイン構造とメタデータを活用
- レイヤー構造を理解し、適切なコード生成
AIプロンプティング
- 自然言語による指示
- 「CDを回転させる」などの具体的な動作指定が可能
ポイント編集ツール
- 特定の要素をターゲットにした編集
- サイズ、色、フォントなどの直接操作
- ポイント＆プロンプトによる局所的な指示
高度な表現
- シェーダーなどの複雑なグラフィック
- 3Dオブジェクトの操作
- ゲームなどのインタラクティブコンテンツ
- デバイスハードウェア（カメラなど）へのアクセス
活用シナリオ
1. インタラクションの検証
音楽アプリのCDプレーヤー要素がどのように動作するかを検証。CDの回転やボタンのクリック感など、実際の使用感を短時間で確認できます。
2. データ可視化の探索
サイクリングアプリのルートや標高データを視覚的に表現。実際のAPIデータと連携して、リアルなユーザー体験を確認できます。
3. 新機能のプロトタイピング
クリニック検索機能など、地図APIを活用した機能の検証。実際の操作感を伴うプロトタイプによって、開発前の議論を活性化させます。
Figma Sitesとの統合
Figma MakeはFigma Sitesと統合されており、ウェブサイト作成時に複雑な機能をプロトタイピングできます。Sitesでのデザイン作業と、Makeによるコード生成・動作検証を組み合わせることで、より表現力豊かなウェブサイトを構築できます。
Figma Buzz：マーケティング素材作成の効率化
マーケティングコンテンツ制作の課題解決
Figma Buzzは、マーケティング素材やブランドコンテンツの作成に特化した新製品です。Figmaでマーケティング素材を作成する数が増加していることに対応し、デザイナーでない人でも簡単に高品質なコンテンツを作成できる環境を提供します。
主な特徴
簡素化されたUI
- Figma Designに似た操作性だが、よりシンプルで直感的
- 非デザイナーでも使いやすいインターフェース
ブランドライブラリ統合
- 共有ブランドライブラリへの簡単アクセス
- ロゴ、イラスト、テンプレートの一元管理
テンプレートベースのワークフロー
- プリセットテンプレートから素早く作成
- コンテンツ編集パネルで簡単編集
- バリアントの切り替えによるデザイン調整
一括編集と作成
- 複数アセットの同時編集
- CSVデータからの一括生成
- スプレッドシートとの連携
ユースケース：イベントプロモーション
デモでは、教育関連のライブストリームシリーズのプロモーション素材作成を例に、Figma Buzzの活用方法が紹介されました。
- テンプレートの選択と基本レイアウトの決定
- タイトル、スピーカー名、日時などのコンテンツ編集
- 画像の差し替えとスタイルの自動適用
- バリアントの選択で背景パターンなどを変更
- 全アセットの一括編集で統一感を維持
- CSVデータからの一括生成で複数イベントの素材を効率的に作成
Figma Draw：表現力豊かなビジュアルデザイン
ベクター編集の完全な再構築
Figma Drawは、Figma Designのベクター編集機能を大幅に強化し、より表現力豊かなビジュアルデザインを可能にする新しいモードです。Dev Modeトグルを使用してアクセスでき、UIがビジュアルデザイン向けに最適化されています。
主な機能改善
1. ベクター編集の強化
- 複数シェイプの同時ベクター編集
- シェイプビルダーツール
- 頂点のためのラッソ選択ツール
2. 形状操作の新機能
- 放射状リピート
- パスに沿ったテキスト
- テクスチャエフェクト
3. ビジュアルエフェクト
- プログレッシブブラー
- ブラシストローク
- ダイナミックストローク
- パターンフィル
- 可変幅ストローク
- 回転原点カスタマイズ
活用シナリオと実装例
1. 食品アイコンのベクター編集
複数シェイプの同時編集とシェイプビルダーを使用してパスタのような形状を作成。ラッソ選択で頂点を精密に選択し、コーナー半径を調整。
2. ブランドアセットのデザイン
放射状リピートを使って円周に沿った装飾を作成。テキストをパスに沿って配置し、テクスチャエフェクトで手作り感を追加。
3. モバイルプロトタイプの改善
プログレッシブブラーを使用してスクリム（半透明オーバーレイ）を作成し、ナビゲーション要素を目立たせる。開始点と終了点のブラー値を調整可能。
4. イラストレーションの表現力向上
ブラシツールやダイナミックストロークを使って手描き感を表現。パターンフィルで繰り返し要素を効率的に作成。可変幅ストロークで漫画のような線の強弱を表現。
Figmaエコシステムとの統合
Figma Drawで作成したデザインは、Figma Designの既存機能（カラー変数、コンポーネント、ダークモードなど）と完全に互換性があります。例えば、テクスチャやパターンを適用したイラストでもカラー変数を使用すれば、ダークモードへの切り替えが可能です。
機能の利用可能時期とライセンス情報
各製品・機能の利用可能時期と料金体系は以下の通りです：
Figma Design Grid機能
- 利用可能時期：発表日（Config 2025）から利用可能
- 料金：すべてのユーザーが利用可能
Figma Sites
- 利用可能時期：ベータ版が発表日から利用可能
- 料金：ベータ期間中は有料プランのフルシートユーザーに提供、今後Starterプランにも展開予定
- 注意点：ベータ終了後、ホスティング、カスタムドメイン、帯域幅要件に応じて追加料金が発生予定
Figma Make
- 利用可能時期：今後数週間でフルシートユーザーに順次提供
- 料金：ベータ期間中は一定の使用制限付きで無料、ベータ終了後は有料製品となる予定
Figma Buzz
- 利用可能時期：ベータ版が発表日から利用可能
- 料金：ベータ終了後はフルシート、開発者シート、および新設の「コンテンツシート」に含まれる予定
Figma Draw
- 利用可能時期：発表日から利用可能
- 料金：すべてのユーザーが利用可能
コンテンツシート（新ライセンスタイプ）
- 概要：Buzz、Sites CMS、その他の製品向けにコンテンツを提供するコラボレーター用
- 含まれるもの：FigJamとSlidesへのアクセス権
- 利用可能時期：2025年後半に提供予定
まとめ：Figmaが描く次世代デザインの未来
Config 2025で発表された5つの大型アップデートは、Figmaのビジョンを明確に示しています。それは「アイデアから製品へのプロセスをより速く、より創造的にする」というものです。
これらの新機能と新製品により、Figmaは単なるデザインツールから、デザインプロセス全体をカバーするプラットフォームへと進化しています。Grid機能によるレイアウト設計の向上、Sitesによるコードレスウェブサイト構築、MakeによるAIを活用したプロトタイピング、Buzzによるマーケティングコンテンツ作成の効率化、Drawによる表現力の拡大は、それぞれ異なるワークフローの課題に対応しています。
また、これらの製品は互いに連携し、シームレスなワークフローを実現します。例えば、Figma DesignでGridを使ってレイアウトを作成し、それをSitesに持ち込んでウェブサイトとして構築し、Makeを活用して複雑なインタラクションを追加するといった流れが可能になります。
Figmaのこの方向性は、「デザインはプロセスの一段階ではなく、プロセスそのもの」というビジョンを体現しています。AIの発展により、ソフトウェア構築が容易になる中で、デザインの質とクオリティがより重要になっているという認識に基づいています。
これらの新製品と機能は、デザイナーだけでなく、マーケター、開発者、コンテンツ作成者など、さまざまな役割の人々がデザインプロセスに参加できるようにすることで、より創造的でコラボレーティブな未来を築く基盤となるでしょう。
10年前にはブラウザベースのデザインツールという概念自体が革新的でしたが、今では当たり前になりました。同様に、今日のFigmaの革新も、近い将来には当たり前のものとなり、デザインの可能性をさらに広げていくことでしょう。
Config 2025の発表は、Figmaが単なるデザインツールを超え、創造のためのエコシステム全体を構築していく意思を示すものでした。デザインの民主化と創造性の拡大というミッションに向けて、Figmaはこれからも革新を続けるでしょう。
これらの新機能を活用して、より創造的なプロジェクトに取り組むことができる未来に、大いに期待が高まります。
本記事で紹介した機能・製品は、執筆時点での情報に基づいています。実際の提供開始時期や詳細な仕様は、Figmaの公式発表をご確認ください。