Figma Motion・シェーダー・Weaveツール徹底解説：Config 2026で広がったAIデザイン素材の使い方

2026年7月9日

2026年6月のFigma Config 2026で、Figmaのキャンバスに「モーション」「シェーダー」「生成プラグイン」「Weaveツール」という新しい”素材”と”道具”が一気に追加された。単発の新機能というより、デザインファイルの中でAIに動きや質感を作らせる土台が整った、というのが今回のポイントだ。実際にどこで何ができるようになったのかを、Webデザイン実務の視点で整理する。

Config 2026で追加された5つの新機能

まず全体像を表で確認する。いずれもFigmaのデザインファイル内、同じキャンバス上で使える点が共通している。

機能	できること	状態（2026年7月時点）	対象プラン
Figma Motion	キャンバスにタイムラインとキーフレームを追加し、プロンプトでもアニメーションを作成	オープンベータ	全プラン（フルシート）
シェーダー（Fills / Effects）	プロンプトでブラー・メッシュグラデーション・パターンなどの視覚効果を生成	オープンベータ	全プラン
Generative plugins（生成プラグイン）	コードを書かずにFigma agentへの指示だけで自分専用のプラグインを作成	オープンベータ	有料プラン
Figma Weave tools	画像の質感変更・アイコン生成・スタイル転写など20以上のAIツールをキャンバス上で実行	オープンベータ	Professional以上・フルシート
Code layers	デザインレイヤーをその場でコード化し、キャンバス上で直接編集	クローズドベータ	招待制

Figma Motion — キャンバスにタイムラインが宿る

Figma Motionは、ツールバーの切り替えだけでキャンバスの下部にタイムラインが現れ、そのままキーフレームアニメーションを組める新モード。従来はPrototypeのイージング設定程度だった動きの表現が、本格的なモーション設計に置き換わる。

オートキーフレーム：再生ヘッドを動かしながらプロパティを変更すると自動でキーフレーム化
モーション変数：duration・delay・easingなどをvariableとして定義し、ファイル全体で再利用
プロンプトでモーション生成：Figma agentに「ちらつくようなタイプアニメーションを、図形をずらして」のように指示するだけで動きの土台ができる
Dev Mode連携：作ったアニメーションは本番用コードとしてそのまま書き出し可能

コンポーネント・バリアブルと同じファイルに共存するため、デザインシステムの一部として動きを標準化しやすい。詳細は公式ブログ「Introducing Figma Motion」にまとまっている。

デザイナーのワークスペース、複数モニターでUI設計をしている様子 — Photo: Johan Larsson / CC BY 2.0, Openverse経由

プロンプトで作るシェーダー——shader fills / shader effects

もう一つの新素材がシェーダー。レイヤーのFillやStrokeに「シェーダーフィル」を追加し、欲しい視覚効果を文章で説明するとFigma agentがその場で生成する。

Fill（塗り）：メッシュグラデーション、ノイズ、パターンなどをレイヤーの新しい”マテリアル”として適用
Effect（効果）：既存のレイヤーの見た目を変形するタイプ（例：ガラス風のブラー、ディストーション）
できたシェーダーはドロップダウンから差し替え・再編集でき、色マッピングやグラデーションの詳細も後から調整できる

使い方の詳細はFigma Help Center「Use shaders in designs」、生成手順はクイックスタートガイドを参照。以前紹介したshaders.comのようなWebGPUエフェクト集と役割が近く、コンポーネント化した効果をFigma内で直接使えるようになった点が違いだ。

Generative plugins——コードを書かずに”自分専用ツール”を作る

Generative pluginsは、Figma agentに「こういう入力を受け取って、こういうルールで、こういう出力を返すプラグインを作って」と説明するだけで、チーム専用の使い捨てツールを作れる機能。プラグインAPIの知識も開発環境も不要で、繰り返し作業（命名チェック、ダミーデータ差し替え、アセット書き出しなど）をその場で仕組み化できる。

デザインシステム運用でありがちな「毎回手作業でやっている変換」を、エンジニアを介さずデザイナー自身がツール化できるのが実務上の価値。手順は上記のクイックスタートガイドに、生成プラグインとシェーダーの両方が解説されている。

Figma Weave tools——20以上のAIツールがキャンバスに直接乗った

Figma Weaveは画像・動画・モーション・VFXの生成・編集を担うFigmaのAIプラットフォームで、これまでは別サービス（weave.figma.com）として展開されていた。Config 2026でその一部ツールがFigma Designのキャンバス上に統合され、画像を選んでツールを選ぶだけで使えるようになった。

Texturize：選んだ画像に指定した質感を適用
On-brand icons：「searchのアイコンを、このスタイルで」のように指示してブランドに合ったアイコンを生成
Transfer style：参照画像のスタイルを別の画像に転写し、一貫性を保つ

2026年6月24日からProfessionalプラン以上・フルシートのユーザーに順次ロールアウトされている。使い方はHelp Center「Use Weave tools in Figma」、背景は公式ブログ「Connecting Figma and Weave」にまとまっている。より高度なワークフローはFigma Community上の「Weave workflows」として公開・共有されている。

Code layers（クローズドベータ）

デザインレイヤーをワンクリック（またはプロンプト）でインタラクティブなコードレイヤーに変換し、キャンバスを離れずにコードを書き換えられる機能。リポジトリのクローンや既存コードからの新パターン生成、レイヤーへの抽出、コードへの同期まで一つの画面で行える構想で、現時点は招待制のクローズドベータ。設計から実装まわりの往復コストを減らす狙いが強い。