デザインツール大手Figmaが2026年6月24日、複数の機能を一度に追加する大型アップデートを発表しました。コードをキャンバスに直接取り込める「コードレイヤー」機能、アニメーション・3Dトランジションの内部制作、AIが生成するシェーダーエフェクト、プロンプトで作れるカスタムプラグイン——デザイナーと開発者の協働スタイルを変える変更が揃い踏みです。コードレイヤーは即日利用可能で、その他の機能も順次展開されます。
背景と文脈
Figmaはデザイナーと開発者が共同作業する「マルチプレイヤーキャンバス」として成長してきたツールです。デザインファイルの共同編集、コメントによるフィードバック、開発者向けのCSS・スタイル情報エクスポートなどを核に、多くの製品チームにとってデファクトの協業基盤となっています。
一方、従来のFigmaには「デザインとコードの分断」という根本的な課題がありました。デザイナーが作ったアニメーションやインタラクションは、エンジニアが実装する際に一から書き直す必要があり、Figmaで完成したデザインをエンジニアに「ハンドオフ」してコードを書き始めるという直列的な流れが当たり前でした。レビューのたびにデザインと実装がずれるという問題も長年の課題です。
Figmaは2025年のWeavy社買収など、コードとデザインの統合に向けた戦略的投資を続けてきました。今回のアップデートはその延長線上にあります。CPOのYuhki Yamashita氏は「マルチプレイヤーキャンバスはコードの品質を気にしなくていい強力な場だ」と述べており、プロダクションコードとは切り離した「探索と試作の空間」としてのFigmaを明確に位置づけています。
技術/ビジネス面
今回の主要な追加機能は4つです。
①コードレイヤー: リポジトリをクローンしてコードフローをキャンバス上のレイヤーとして展開できます。プロダクションコードの品質を気にせず、デザインの反復サイクルにコードの文脈を持ち込めます。即日利用可能です。
②アニメーション・3Dトランジション内部制作: これまで外部ツールで作成しコードへ変換する手間があったアニメーションを、Figma上で直接作れるようになりました。トランジションや3D変形も対象です。
③AIシェーダーエフェクト・フィル: テキストプロンプトを書くとAIが繰り返し使えるシェーダーエフェクトや塗りつぶしパターンを生成します。カスタムのビジュアル表現をすばやくプロトタイプできます。
④プロンプトで作るカスタムプラグイン: Notion・Excel・GitHubといった外部ツールとの連携プラグインをテキストプロンプトだけで作成できます。デザイン作業に必要な外部コンテキストをFigmaへ引き込む「ワークフロー自動化」が個人レベルで可能になります。
ビジネス面では、Figmaの今回のアップデートはAdobe Expressやフロントエンド開発ツールとの競争領域に踏み込むものです。デザインからコードまでを単一のキャンバスで管理できれば、チームが使うツールの数を減らせるという提案でもあります。
これからどうなるか
コードレイヤーとAIプラグイン作成の組み合わせは、デザイナーが自分のワークフローをプロンプトで自動化できる環境を意味します。ノーコード・ローコードの次の形として、「書く」を使わず「指示する」だけで作業を定義できるツールの広がりを先取りしています。
開発者の観点では、コードレイヤーは実装途中のコードをFigmaに持ち込んでデザイナーと議論する新しいレビューフローを開きます。「Figmaのデザインと実装の差分」を早い段階で可視化し、手戻りを減らすことが期待できます。PRレビューとデザインレビューを同じキャンバスで行う実験が、先進的なチームで始まる可能性があります。
Weavyとのワークフロー統合は2026年後半に展開予定です。設計・実装・レビューが単一のキャンバス上でループするパイプラインが現実に近づいており、Figmaの活用範囲はデザイン専用ツールを大きく超えていきそうです。
まとめ
FigmaはコードレイヤーとAIアニメーション機能の追加により、デザインと開発の境界をさらに溶かすステップを踏みました。プロンプトでプラグインを作れる機能は、技術系デザイナーや開発者の作業自動化に直接効いてきます。協業ツールの変化として継続的に注目する価値があります。
参考リンク
アイキャッチ画像: Photo by Hal Gatewood on Unsplash
