《Figma Config 2026現地レポ》Figma、6つの新機能を発表──デザインからコードまで、“すべてが1つのキャンバスに”

2026年6月25日

米国時間2026年6月24日、Figmaは年次カンファレンス「Figma Config 2026」にて、6つの新プロダクト「Code layers」「Figma Motion」「Shaders」「Weave tools」「Agent skills and context」「Generative plugins」を発表しました。

これらの新ツールは、デザイン・コード・AIをひとつのキャンバス上でつなぎ、プロダクト開発のワークフローをよりシームレスにすることを目指しています。

本記事では、それぞれのプロダクトが持つ機能や特徴を解説します。

「Config」とは？

「Config」は、Figmaが主催する年次カンファレンスで、デザイナーや開発者、プロダクトマネージャーが一堂に会し、最新のプロダクトやワークフロー、業界のトレンドを共有するイベントです。

2026年は6月23日から25日まで、米サンフランシスコの「モスコーン・センター」で開催され、会場には1万人以上のプロダクトビルダー（PM・デザイナー・エンジニアを含む、プロダクトをつくるすべての人）が来場し、世界中から多くの方々がオンラインで参加しました。

イベントのオープニングを飾ったキーノートには、Figmaの共同創業者兼CEOであるディラン・フィールド氏が登壇。スピーチの中で、6つの新プロダクト「Code layers」「Figma Motion」「Shaders」「Weave tools」「Agent skills and context」「Generative plugins」が発表されました。

6月23日〜25日に米サンフランシスコにあるモスコーン・センターで開催されたFigmaの年次カンファレンス「Config 2026」（写真提供：Figma）

Figma Config 2026で発表された新ツール

Code layers

「Code layers」は、Figma Designのキャンバス上で、コードを直接操作できる機能です。リポジトリのクローン、Figmaのエージェントによる新しい方向性の提案に加え、フローを編集可能なデザインレイヤーとして抽出したり、コードへの変更を同期したりすることが可能です。

今回の発表で特徴的なのは、コードそのものをデザインの“素材”として扱う考え方です。従来の「デザイン vs コード」という構図を見直し、コードを画像やカラーと同様に扱える要素として位置づけています。

これにより、アイデアは実装を待つものではなく、思考と同時に試しながら調整していく対象へと変化します。複数の実装をキャンバス上に並べて比較・検証し、チームでコメントや改善を重ねながら進めることで、設計と実装を分断せずに進行できる点も特徴です。

さらに、GitHubリポジトリやローカルコードの取り込みに対応し、既存の開発資産も活用可能です。操作の記録からユーザーフローを可視化することで、全体像を把握しながら設計できる環境が整えられています。

Figma Motion

「Figma Motion」は、アニメーション、トランジション、3Dトランスフォームを、Figma上で直接、共同でデザインできる機能です。

タイムラインやキーフレーム、プリセットを使ってモーションを構築できるほか、AIによる生成や手動による微調整にも対応しています。さらに、モーションはデザインシステムと連携し、コードと紐づいた状態で、そのままリリースできる状態で提供されます。

また、エージェントを使って、アニメーションの生成や補助もできます。さらに、モーションはシェーダーと組み合わせることで、従来よりも高い表現力を持ったデザインを実現。

Shaders

「Shaders」は、プロンプトでシェーダーエフェクトやフィルを構築できるツールです。これまで高度な技術が必要だったシェーダー表現を、Figmaエージェントを通じて誰でも生成できるようになりました。画像やテキストで指示することで、目的に応じたエフェクトを作成できます。

この機能を使えば、WebGPUを活用したカスタムビジュアル表現により、ディザー、ピクセレート、各種ブラー処理など、これまでFigmaで実現できなかったエフェクトを、キャンバス上で直接作成できます。

シェーダーには大きく分けて、
・フィル（素材としての色やテクスチャ）
・エフェクト（既存のレイヤーを変形・加工）
の2種類があり、いずれもパラメータ化されているため、キャンバス上で直感的に調整できます。

さらに、エフェクトは重ねて適用できるため、歪み・ノイズ・色収差などを組み合わせることで、従来のFigmaでは実現できなかった高度なビジュアル表現が可能になります。

Weave tools

「Weave tools」では、20以上のWeaveツールをFigmaに統合することで、複雑なAIワークフローをキャンバス上のシンプルな操作で扱えるようにし、一貫性のある高品質なビジュアルを生成できます。

さらに、異なるベンダーから集まった製品画像のばらつきを自動で調整し、統一されたビジュアルスタイルへ変換する「スタイル転送」にも対応しています。これにより、帽子・靴・シャツなど異なる素材であっても、統一感のあるビジュアル表現が可能となりました。

こうしたワークフローは一度構築すれば、すべてのプロダクトに横断的に適用でき、再現性の高い制作プロセスを構築できます。また、これらのWeaveワークフローはFigmaキャンバス上のツールとして利用可能で、複雑なノード構造を意識することなく、入力と出力だけで簡単に扱えます。

これは、今年後半に予定されているFigma Weaveとの完全統合に向けた第一歩です。

Agent skills and context

「Agent skills and context」を使うことで、繰り返し行う作業をスキルとして再利用可能にし、チーム全体で一貫した形でエージェントを活用できます。

外部ツール（Notion、GitHubなど）との連携やファイル添付により、より多くのコンテキストを取り込みながら作業できる点も特徴です。

Generative plugins

「Generative plugins」は、エージェントを使ってカスタムの再利用可能なプラグインを構築し、Figmaの機能を拡張できる機能です。プロンプトからツールを生成し、調整・共有が可能です。多くの場合、コードを書くことなくプラグインを生成できます。

さらに、実演では以下のような活用例が紹介されました。

音声波形のようなUIを生成するプラグイン
Bentoレイアウトを自動生成するツール
実データをもとにレーシングコースを生成するビジュアル生成プラグイン

これらはすべて、プロンプトだけで生成され、ファイル内で直接利用・共有可能です。プラグインは個人のワークフローだけでなく、チームやブランドに最適化した形で構築できます。

また、作成したプラグインはプロジェクトと一緒に共有できるため、「デザイン資産」だけでなく「制作ツール」そのものも引き継ぐことができます。

Figma Japan カントリーマネージャー川延浩彰氏のコメント

また、Figma Japanのカントリーマネージャーを務める川延浩彰氏は、今回の発表やAIの進化について次のように語ります。

「AIの登場によって、これまで専門的なスキルが必要だったデザインや開発の領域に、より多くの人が参加できるようになりました。いわば“敷居が下がった”状態です。この点については、多くの方がすでに実感されていると思います。

一方で、我々が強く意識しているのは“天井を引き上げる”ことです。AIがあることで、デザイナーやクリエイターが置き換えられるのではなく、よりクリエイティブで本質的な価値創出に集中できる環境を整えることが重要だと考えています。

今回発表した機能群も、そうした思想のもとに設計されています。キャンバス上でデザインやコード、さらにはAIエージェントまでが一体となって作業できるようになることで、これまで分断されがちだったワークフローをシームレスにつなぎます。従来のように役割ごとに受け渡しを行うのではなく、同じ場で同時に進められることで、コミュニケーションロスや手戻りの削減にもつながると考えています。