メインコンテンツまでスキップ

Config 2026: 新素材、新しいツール、より表現力豊かなキャンバス

Dylan FieldCo-founder & Chief Executive Officer, Figma
AI支援型デザインおよび開発ワークフローを示すコラージュスタイルのプロダクトグラフィック。プラグイン作成プロンプト、視覚エフェクトコントロール、コード生成ツール、インタラクティブUIコンポーネントがクリエイティブワークスペースに配置されている。AI支援型デザインおよび開発ワークフローを示すコラージュスタイルのプロダクトグラフィック。プラグイン作成プロンプト、視覚エフェクトコントロール、コード生成ツール、インタラクティブUIコンポーネントがクリエイティブワークスペースに配置されている。

コードレイヤー、Figma Motion、シェーダー、生成プラグイン、Weaveツールを使って、キャンバス上で限界を超えましょう。

Config 2026: 新素材、新しいツール、より表現力豊かなキャンバスを共有

デザインとは、難しい質問をすることです。今、その質問はこれまで以上に大きく感じられます。何が変わっているのでしょうか。何が可能なのでしょうか。そして、創造するということの意味は何でしょうか。ここFigmaでは、私たちは常に1つのシンプルな前提に戻ります。それは、どんなツールもアイデアが進む先を制限すべきではないということです。

今年のConfigの発表は、キャンバス上での無限の表現についてです。あらゆる想像を表現するための新しい素材をサポートし、これまで以上にこれらの素材を形作り押し進めるための新しいツールを導入します。コード、モーション、シェーダー、生成プラグイン、そしてWeaveツール、そのすべてがFigmaキャンバスにあります。

過去のConfigでは、AIが下限を引き下げ、上限を引き上げることについて話しました。しかし、AIは下限を引き下げましたが、上限を引き上げることはありませんでした。

上限を引き上げるのは、デザイナー、クリエイティブ、ビルダー、そしてあなたです。

これからの数か月、数年の間に、創造性、リスクテイク、そして大胆な表現が爆発的に拡大すると信じています。Figmaの目標は、素材とツールを組み合わせて無限の方法でデザインできるようにし、そして考えると同時にリフと遊びが可能になるようにすることです。キャンバスは、あなたの作品の置き場所となるだけではありません。すべてがつながる場所でもあります。

こちらがConfig 2026で発表したすべての内容です。

キャンバス上のコード

長年にわたり、デザイン業界では「デザインかコードか」という議論があり、各ツール(Figmaを含む)はその選択を迫ってきました。しかし、これは誤った議論です。デザインとはプロセスです。コードは素材であり、画像、ベクター、デザインレイヤーと同様です。長い間、コードは線形思考のために構築されたシングルプレイヤー環境の中で用いられてきました。言い換えれば、素材はプロセスから切り離されていたのです。我々はコードを他のデザイン素材と同様に扱う必要があると信じています。そのため、Figmaにコードレイヤーを導入します。

キャンバス上では、デザインレイヤーをインタラクティブなコードレイヤーにワンクリック(またはプロンプト)で変えることができます。コードレイヤーをすばやく複製すると、デザインフレームと同様に、複数の方向性を並べて確認できます。

そこからは、キャンバスと同じように機能します。同じファイルで、チームメイト全員とアイデアを出し合い、コメントし、反復することができます。

コードからデザインレイヤーに戻りたいときには、デザインフレームを抽出して、編集可能なデザインレイヤーに変換できます。そして、再びコードレイヤーに戻りたいときには、ワンクリックで変更した内容で更新できます。

コードレイヤーの公開は7月に始まります。早期アクセスのためfigma.com/config-betasで待機リストに参加してください。

続きを読む →

説明会のウェブページ、生成されたチケット予約インターフェース、および対応するReactコードの実装を並べて表示する分割画面の製品コンセプト。デザインからコードへのワークフローを示している。説明会のウェブページ、生成されたチケット予約インターフェース、および対応するReactコードの実装を並べて表示する分割画面の製品コンセプト。デザインからコードへのワークフローを示している。
Figmaキャンバスでのコードレイヤーのオプションを見てみましょう。

Figma Motionでデザインに命を吹き込もう

モーションデザイナーは、説明も再現も難しい方法で物事に生命を吹き込みます。多くの人々がこの同じ魔法を作り出そうと夢見ましたが、それは手の届かないもののように感じられていました。そのため、他のツールに移行してしまうことも少なくありません。今日から、Figmaで直接モーションを構築することができます。

Figma Designでは、タイムラインが追加されました。これにはキーフレーム、プリセット、その他多くの機能が含まれています。ゼロからモーションを構築することも、既存のデザインにレイヤーとして追加することも、Figmaエージェントに開始点を生成してもらうこともできます。Figma Motionが高度で、直感的で、使って楽しいものと感じていただければ幸いです。すでにモーションデザイナーである人にとっては、Figmaは繰り返しの作業を取り除き、創造性をさらに押し進めることができます。

モーションはFigmaのプラットフォーム上で構築されているため、デザインシステムの基盤要素として用いることができます。コンポーネントを一度アニメーション化すると、その動きはすべての画面やすべてのコラボレーターのファイルに、塗りやタイポグラフィと同じように伝わります。

最後に、Figma Motionはコードで動作するように作られています。Dev Modeに切り替えると、タイムライン全体が表示され、インスペクトできるようになります。すべてのタイミング値、すべてのイージングカーブ、すべてのキーフレームが、解釈作業なしで読めるようになります。アニメーションコードはCSS、JSON、またはフレームワーク対応のReactで直接コピーできます。MotionはMCP互換でもあるため、任意のアニメーションされたフレームを直接コーディングエージェントに渡して実装することができます。MP4、WebM、アニメーションSVG、またはGIFとしてエクスポートすることもできます。また、それ以外のフォーマットやエクスポートタイプの対応にも取り組んでいます。

続きを読む →

Figma Designの新しいタイムラインを使用してデザインにアニメーションを追加します。

シェーダーの塗りとエフェクト

Figmaにはシェーダーが常に存在していて、舞台裏でキャンバスのレンダリングを支えています。しかし、シェーダーを作るのは難しく感じることがあり、チームと共有するのも難しいことです。

今では、自分が欲しいものを説明するか、イメージを参考にすることで、Figmaエージェントがそれを構築してくれます。エフェクトはレイヤー内にあるものを変換し、塗りは新しい素材として機能します。これらはすべてFigmaエージェントで構築されているため、シェーダーの塗りやエフェクトはデフォルトでパラメーター化されます。これにより、キャンバス上に直接コントロールを追加して、自由に形作ることができます。

生成されるものは、最初からFigmaの一部であったかのような外観や動作を備えています。パラメーターはコントロールとして表れ、他のエフェクトとスタックすることが可能で、コードや一般的なフォーマットにスムーズに変換することができます。

インタラクティブシェーダーも間もなく登場します。現在はパフォーマンスを最適化するための作業中です。

続きを読む →

モーショングラフィックスエディターのインターフェース。ジェネレーティブなビジュアルエフェクト、調整可能なパーティクルグリッドパラメーター、キーフレームアニメーションコントロール、プロシージャルアートワークをアニメーション化するためのタイムラインが表示されている。モーショングラフィックスエディターのインターフェース。ジェネレーティブなビジュアルエフェクト、調整可能なパーティクルグリッドパラメーター、キーフレームアニメーションコントロール、プロシージャルアートワークをアニメーション化するためのタイムラインが表示されている。
グラデーションマップ、リソプリント、輝度パーティクルなどのスタックシェーダーエフェクト。

生成プラグイン

これまで以上に多くのチームが独自のツールを構築しており、これは素晴らしいことだと思います。すべてのデザイナーには独自のワークフローがあります。生成的プラグインにより、望むすべてのツールの作成が可能になります。生成的プラグインを作成するには、必要なツールの動作、コントロール、パラメーターを記述するだけです。ローカルの開発環境やプラグインAPIの知識は不要です。他のFigmaツールと同様に、キャンバスに自然に馴染みます。

生成用プラグインとシェーダーの両方で、自分用に何かを作り、それをファイル内の誰とでも共有することができます。すぐに、チーム、組織、または広範なコミュニティにツールを公開できるようになります。

続きを読む →

画像レイアウト生成プラグインは、アセットを整理するのに役立ちます。

Figma Weaveツール

Figma Weaveツールは視覚コンテンツに同じアプローチを適用しているため、表現豊かなワークフローを構築して再利用することができます。そして、これらのツールは現在Figmaキャンバスで利用可能です。

背景情報として、Weaveは、生成ワークフローを構築するノードベースのキャンバスです。モデルを接続し、アセットを変換し、出力を洗練し、アプローチを比較することができます。単一の結果を促すのではなく、粘土のようにモデルの出力を使って複数モデルのワークフローを形作り、頭の中にあるものを目に見えるプロセスに転換し、それを検査し、反復し、再利用できるようにします。

現在は、Weaveでワークフローを構築し、それを他の人が使用またはリミックスできるテンプレートとして公開できます。まもなく、それらをチーム、組織、またはコミュニティのためのツールとして公開できるようになります。まず最初に、インスピレーションの元となるWeaveツールを数多く追加しました。

続きを読む →

スタイル転送インターフェース。ターゲット画像、スタイル参照画像、生成されたウェブページプレビューが表示されていて、デザインアセット全体でAIを活用した視覚スタイルの適用を示している。スタイル転送インターフェース。ターゲット画像、スタイル参照画像、生成されたウェブページプレビューが表示されていて、デザインアセット全体でAIを活用した視覚スタイルの適用を示している。
スタイル転送Weaveツールを使用して、ソースイメージからターゲットイメージにスタイルを適用します。

あなたの働き方を知っているエージェント

Figmaエージェント(昨日公開)は、デザインキャンバスを理解するために作られています。

スキルは、ワークフローと慣習を、エージェント用の再利用可能な指示としてまとめたものです。独自のスキルを構築したり、チームのスキルを利用したり、コミュニティから引き出したりすることができます。コネクタを使用すると、エージェントは既存のスタック内のツール(例えば、Notion、Slack、Granola、Hex、GitHub、Atlassianなど)にアクセスし、更新を送信できます。添付ファイルには、調査、概要、または関連するアーティファクトを持ち込むことができます。

エージェントチャットはデフォルトでチームメイトにも表示されるようになりました。そのため、他の人がどのような方向性を探っているのかを確認し、それに基づいた考えを構築することができます。もちろん、必要に応じてチャットを非公開にすることもできます。

また、エージェントはFigJamやSlidesなど、より多くのサーフェスにも対応予定です。早期アクセスの待機リストに参加するには、figma.com/config-betasをご覧ください。

続きを読む →

AIアシスタントのアクションに囲まれたモバイルポスターデザイン。プラグインの作成、スタイルの適用、カスタムエフェクトの生成、デザインワークフロー内でのアクセシビリティの確認のためのタスクプロンプトが浮かんでいる。AIアシスタントのアクションに囲まれたモバイルポスターデザイン。プラグインの作成、スタイルの適用、カスタムエフェクトの生成、デザインワークフロー内でのアクセシビリティの確認のためのタスクプロンプトが浮かんでいる。
ファイルを添付し、他のツールと接続し、スキルを活用して、デザインエージェントにより多くのコンテキストを提供します。

Figmaキャンバス上には、これまでにない多くの可能性が広がっています。皆さんがどのようにその上限を引き上げるか楽しみです。自分だけの作品を作り上げてください。

Figmaのヘルプセンターでは、リリースの概要、その利用可能性、開始方法をご覧ください。Figmaのすべてに関する答えとインスピレーションはFigmaラーニングで見つかります。

Figmaを使った制作とコラボレーション

無料で始める