Figma Config 2026の発表内容メモ

2026年6月24日、「Figma Config 2026」が開催されました。

コードレイヤー、Figma Motion、AIシェーダーフィル、MCP対応エージェントなど、6つの大型アップデートが一気に発表。デザインから実装までを一つのファイルで完結させようとするFigmaの野心が、いよいよ現実になってきました。

自分用メモとして残しておきます。（間違ってたらごめんなさい。最後の出典リンク乗せてます。）

Config 2026の6大発表まとめ

今回発表された主なアップデートはこちらです。

• コードレイヤー：デザインレイヤーをコードに変換・相互行き来が可能に
• Figma Motion：タイムライン付きアニメーション機能
• AIシェーダー：WebGPUベースのビジュアルエフェクトをプロンプトで生成
• プラグイン：AIを活用したプラグイン拡張
• Weaveツールのメインキャンバス統合
• AIエージェントの強化：MCP対応・チーム共有・スキル登録が可能に

以下のショート動画がとてもわかりやすかったです。

Figmaはすでに Design、Dev Mode、FigJam、Slides、Draw、Sites、Motion、Weaveなど幅広いプロダクトを展開しています。
こうやって見てみるとすごいですね⋯。
今回のアップデートで、アイデア出しからモックアップ・ハンドオフ・ローンチまで、すべてを一つのファイルで完結させる世界がぐっと近づきました。

Figmaがデザインツールから統合プラットフォームになろうとしてるのがよくわかる発表だったな。

コードレイヤーについて

デザインファイル上の任意のレイヤーをワンクリック、またはプロンプト一つでコードに変換できます。
2026年7月からアーリーアクセスがスタート。figma.com/config-betas でウェイトリストに登録すると先行で試せるみたいです。

「コードからデザイン、デザインからコード」の双方向変換

双方向に変換できる点がコードレイヤーの大きな特徴です。
GitHubリポジトリのクローンやローカルコードベースのアップロードも可能で、既存コードからインタラクションフローをデザインレイヤーとして抽出することもできます。

デザインを変更したらワンクリックでコードに反映、コードが更新されたらデザインに引き戻す…この行き来ができるようになるんです。

デザイナーとエンジニアが同じファイルで作業できるってコト！？

Figma MotionとMCP連携で、アニメーション実装のコストが激変

Figma Motion：タイムラインからコードを直接書き出せる

Figma Motionは、タイムライン・キーフレーム・イージングカーブ・スプリングアニメーションを備えたアニメーション機能です。Config 2026と同時にリリース済みで、今すぐ使えます。

さらにFigma MotionはMCPに対応。FigmaのMCPサーバーを通じてClaude CodeやCursorなどのAIコーディングエージェントにアニメーション情報を渡せます。スクリーンショットではなく構造化データで連携されるため、実装精度がぐっと上がります。

アニメーションをそのままAIエージェントに渡せるのはかなり便利そう。

シェーダーについて

AIシェーダーは、プロンプトや画像を参照してWebGPUベースのビジュアルエフェクトを生成できる機能です。

「こういう雰囲気にしたい」と言葉で伝えるか、参考画像を渡すだけで、Figmaのエージェントがエフェクトを生成してくれます。生成後はキャンバス上でパラメーターを直接調整できるので、細かい仕上げも手放しにならないのが嬉しいところ。

言葉でエフェクトを作れるってこと！？ヒエ⋯

AIエージェントの4つの強化ポイント

Figmaのエージェント機能も今回大きく進化しました。

• チーム独自のワークフローをスキルとして登録・再利用できる
• MCP経由で外部ツールと連携できる
• Webからリアルタイムデータを取得してデザインに反映できる
• エージェントとの会話履歴がチーム全体に共有される

デザインシステムの運用やコンポーネント管理をAIに任せながら、外部データと連携したダイナミックなデザインが現実的な選択肢になってきました。
これを機に、自分のワークフローを見直してみる価値は十分あると思います！

進化に追いつけないよ～～～