Figma大型アップデート：コードレイヤー、アニメーション対応、AI機能が一斉公開

デザインツールの「コード化」への転換

TechCrunchの独占報道によると、Figmaが2026年6月25日にリリースした新バージョンでは、「コードレイヤー」機能が最大の目玉となっている。従来の「CSSプロパティのコピー」とは異なり、コードレイヤーはデザイナーがキャンバス上に直接実行可能なコードスニペットを埋め込み、ビジュアル要素とリアルタイムで同期させることを可能にする。デザイン要素が変更されると、対応するコードブロックが自動的に更新される——これにより、フロントエンドエンジニアはデザインカンプとコードの差分を手動で比較する必要がなくなる。

この機能は、デザインと開発の間に存在していた「ガラスの壁」を実質的に打ち破るものだ。業界アナリストは、Figma以前にこれほど深いコードレベルの統合を提供できた商用デザインツールはほとんどなかったと指摘する。これまで類似の試みはZeplinやAvocodeといったサードパーティ協業ツールに集中していたが、それらは真の双方向同期を実現できなかった。Figmaのこの取り組みはデザイン納品時のエラー率を下げるだけでなく、WebおよびモバイルプロダクトにおけるPプロダクト開発ワークフローを根本的に変える可能性を持つ。

アニメーションとシェーダー：プロトタイプを「動かす」

コードレイヤーに加え、FigmaはCSSアニメーションとWebGLシェーダーのネイティブサポートも今回導入した。デザイナーはデザイン環境を離れることなく、プロトタイプのインタラクションに複雑なタイムラインアニメーション、マイクロインタラクション効果、カスタムパーティクルシステムを追加できるようになった。これまでFigmaのプロトタイプアニメーション機能はプリセットのトランジション効果に主に依存しており、比較的限定的だった。しかし「モーション」モジュールの追加により、デザイナーは要素の位置・スケール・回転・透明度をフレーム単位で制御でき、ベジェ曲線に基づくイージング関数にも対応した。

シェーダーサポートは、より高度なビジュアルニーズに応えるものだ。たとえばゲームUIやブランドのマーケティングページにおいて、デザイナーはデザイン上で直接、グロー・ディストーション・ノイズなどのGPUアクセラレーションエフェクトをプレビューできる。この機能によってFigmaの適用範囲は、従来のUI/UXを超えてより広いクリエイティブ領域へと拡張された。

「これはフラットデザインからインタラクティブ体験デザインへのパラダイムシフトだ。」——著名なUXブロガーがSNSでコメント

AIが駆動するカスタムプラグイン生成機能

最も注目すべきはAI強化機能かもしれない。新バージョンのFigmaは「プラグインジェネレーター」を導入した。ユーザーが自然言語でやりたいタスクを記述するだけで（例：「すべての矩形の角丸を8pxに変更する」「使用されていない画像コンポーネントをすべて確認する」）、システムが内蔵の大規模言語モデルをもとに対応するプラグインコードを自動生成し、ワークスペースへのワンクリックインストールを可能にする。

これはすべてのデザイナーに専属のプログラミングアシスタントを与えるようなものだ。これまでFigmaプラグインの作成にはTypeScriptやFigma APIの知識が必要で、ハードルが高かった。しかし今や、技術的なバックグラウンドを持たないデザイナーも会話形式のインタラクションで自動化スクリプトを作成できる。この機能は個人の効率を高めるだけでなく、Figmaのプラグインエコシステムが爆発的な成長を迎える可能性も示唆している——あらゆるデザインニーズが瞬時に再利用可能なツールへと変換できるからだ。

また、Figmaはその他のAI支援デザイン機能も強化した。デザインバリアントの自動生成、スマートなレイヤー命名、ワンクリックでの複数画面サイズへの対応といった機能が今回のアップデートで最適化されている。

編集後記：デザインツールがコードを「理解」し始めるとき

今回のアップデートを総じて見ると、Figmaの戦略的意図は非常に明確だ。生成AI時代において、同社はもはや単なる「キャンバス」であることに満足せず、デザイン・開発・自動化をつなぐハブになろうとしている。コードレイヤーの導入によりデザインファイル自体が「実行可能なドキュメント」となり、AIプラグイン生成機能は自動化を手の届くところに引き寄せた——これはまさに現在の技術変革の波の中で最も希少な能力、すなわち創造ツールの敷居を下げることにほかならない。

もちろん、課題も存在する。コードレイヤーは特に複数人が同時にコードブロックを編集する場合、バージョン管理の複雑化を招く可能性がある。AIが生成したプラグインにはセキュリティやパフォーマンス上のリスクも潜んでいるかもしれない。Figmaはオープン性とコントロール性のバランスを見つける必要がある。しかしいずれにせよ、Figmaの今回のアップデートはデザインツール業界全体に新たな基準を打ち立てた。Adobe XDやSketchといった競合製品が近く類似機能を追いかけてくることは容易に予想できる。

より広いマクロな視点から見れば、私たちは「デザイン＝コード」という概念が現実のものとなる瞬間に立ち会っている。将来、デザインツールは開発環境とますます融合し、ビジュアルの文法とプログラミングのロジックの両方に精通した「デザインエンジニア」という全く新しい役割を生み出すかもしれない。それはAI時代がデザイン業界に与える最大の贈り物となるだろう。

本記事はTechCrunchをもとに翻訳・編集したものです。