はじめに
2026年6月に開催された Figma Config 2026 で、デザインと開発の境界を再定義する大型アップデートが相次いで発表されました。
この記事では、発表された主要6機能を整理してご紹介します。
1. Code Layers
任意のデザインレイヤーをインタラクティブな「コードレイヤー」に変換できる新機能です。
これまでの「デザインかコードか」という対立を解消し、
コードを画像やベクターと同列のデザイン素材として扱う というコンセプトの機能です。
デザインフレームとコードレイヤー間を相互に行き来しながら、複数の方向性を検討できるようです。
できることは、以下の通りです。
- コードレイヤーを複数並べて実装案を比較（デザインフレームの複製と同じ感覚）
- 「見た目」だけでなく「実際の動作」を確認しながら検討
- Extract designs でコードの現状をキャンバス上の編集可能レイヤーに変換
- コードエディタで直接編集・注釈を追加
- ワンクリックでコードレイヤーを更新 → リポジトリにプッシュ
2. Figma Motion
デザイン・図形描画・開発モードと並ぶ、モーションをキャンバスネイティブで扱う新しいモードです。
これまでAfter Effectsなど別ツールが必要だったモーション設計を解消し、
アニメーションをデザインシステムの一部として管理する というコンセプトの機能です。
デザインファイル内でアニメーションを完成させ、開発者にそのまま渡せるようになります。
できることは、以下の通りです。
- タイムライン上でレイヤーをドラッグしてタイミング調整
- キーフレームで位置・スケール・回転・不透明度を独立制御（自動キーフレーミングあり）
- フェード・移動・スケールなどのプリセットを重ねがけ・シーケンス設定
- モーション変数でイージングを定義し複数アニメーションに一括適用
- 開発モードでタイミング・イージング曲線を検査
- CSS / JSON / React へ直接エクスポート
- MCP対応でコードエージェントに設計文脈を渡せる
3. Shader Fills & Effects
WebGPUを活用した、シェーダーエフェクトとシェーダーフィルという2種類のカスタマイズ可能なビジュアルツールです。
単色・グラデーションといった従来の表現を超え、
ツールの制約を超えた独自のビジュアル表現を自分で構築する というコンセプトの機能です。
複数のエフェクトをスタックしたり、Figmaネイティブのエフェクトと組み合わせて調整できます。
できることは、以下の通りです。
- シェーダーエフェクト：パーティクル伸張・レンズ歪み・カラーアウトラインなどを既存レイヤーに適用
- シェーダーフィル：水彩・モアレ・パターングリッドなど動的・生成的な塗りを適用
- 複数のシェーダーをスタックし、ネイティブエフェクトと組み合わせて調整
- パラメータ化されているためキャンバス上でリアルタイムに操作可能
- Figma Motion と連携し、シェーダーのプロパティをキーフレーム化してアニメーション化
4. Generative Plugins
デザインエージェントへのプロンプトだけで、再利用可能なプラグインをデザイナー自身が作成できる新機能です。
従来はプラグイン開発に技術スキルと開発環境が必要でしたが、そうした障壁を取り除き、
すべてのデザイナーが自分のワークフローに合わせたツールを持てる というコンセプトの機能です。
PropsKit を活用しているため、Figmaネイティブのツールと見た目・操作感が統一されています。
できることは、以下の通りです。
- プロンプトを入力するだけでプラグインを生成（ローカル開発環境不要）
- HTMLのキャンバスへのインポート、ダッシュボードレイアウトの自動生成、データの可視化など
- キャンバス上に直接配置され、繰り返し作業を効率化
- 外部APIやAIサービスとの連携が必要な場合はクラシックプラグインのアーキテクチャを使用
- チーム内での共有も可能
5. Figma Weave Tools
生成AIを活用したクリエイティブワークフローツール「Weave」を、Figma Design内から直接利用できる新機能です。
昨年買収したWeaveのノードベースワークフローをFigmaに統合し、
デザイン制作とAI生成パイプラインを同じキャンバス上で完結させる というコンセプトの機能です。
フリーフォーム入力なしで一貫した結果を得られる簡潔なUIに設計されています。
できることは、以下の通りです。
- Weaveツール（Figma Design内）：スタイル転送・アイコン生成・テクスチャ適用・背景置換・製品フォトシュート生成など20以上のAI画像タスクをパネルから直接実行
- Figma Community上のワークフロー共有：自作ワークフローをテンプレートとしてチーム内・コミュニティに公開
- Figma node（2026年夏予定）：FigmaフレームをWeaveキャンバスに貼り付け、フレームの変更をワークフロー全体にリアルタイム反映
現状： Weaveツールはオープンベータ（ベータ期間中は無料）、Community上のワークフローは公開済み
6. Figma Agent
ファイル添付・Figmaファイル参照・Web検索・MCPコネクタの4つの方法でコンテキストを受け取り、チームの作業内容を理解した上でデザインをサポートするAIエージェントです。
「良いコンテキストはエージェントに情報を与えるだけでなく、何を作るかを形作る」という考えのもと、
プロジェクト・ブランド・チームの文脈に近いほど精度が上がる というコンセプトの機能です。
できることは、以下の通りです。
- ファイル添付：ユーザーインタビュー・UXコピー・データレポートなどをチャットに直接ドロップして参照
- Figmaファイルリンク参照：他のFigmaファイルのコンポーネント・トークン・レイアウト・スタイルの完全な構造にアクセスし、デザインパターンを正確に再現
- Web検索：Figmaを離れずに競合UXパターン・リアルなモックアップ用コンテンツ・最新情報を取得
- MCPコネクタ：GitHub・Atlassian・Slack・Linearなど外部ツールのコンテキストを直接統合し、チケット参照や更新の自動投稿も可能
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。