FigmaがCursorやAfter Effectsに対抗、「Config 2026」でコードとデザインを融合する新機能を多数発表
2026年6月26日 17:50
Figmaは、米国時間2026年6月23日から25日にかけて開催された年次カンファレンス「Config 2026」にて、AIコーディング環境やモーションデザイン領域に踏み込む大幅な機能拡張を発表した。GitHubと連携する「Code Layers」や、本格的なキーフレームアニメーションを実現する「Figma Motion」などが登場し、デザインとコードの境界線をさらに曖昧にする。これらの新機能は、デザイナーやエンジニアの協働プロセスを大きく変える可能性がある一方で、一部の高度な機能は有料プラン限定での提供となる。
■Code Layers：GitHub連携でデザインとコードの「ハンドオフ」を解消
今回の発表で最も構造的な変革をもたらすのが「Code Layers（コードレイヤー）」だ。これにより、開発チームはGitHubに連携されたリポジトリをデザインキャンバス上に直接取り込み、ビジュアルコンポーネントと並行して作業できるようになる。ユーザーはワンクリックまたはプロンプト入力だけで、リポジトリのクローン作成、デザインレイヤーのインタラクティブなコード化、コードからの編集可能なデザインフレームの抽出、そして変更内容のコードベースへの同期までを、すべて同一のファイル内で行うことができる。
Figmaのチーフ・プロダクト・オフィサー（CPO）であるYuhki Yamashita氏は記者団に対し、このマルチプレイヤーキャンバスの強みについて、チームがコードの品質に縛られることなく、新しい方向性を模索し、本番環境への影響を気にせずに実験を繰り返すことができる点にあると説明した。Code LayersはカスタムのReactコードで動作し、モーションライブラリや3Dフレームワークを含むnpmパッケージをサポートしている。
デザイナーが作成したFigmaファイルをエンジニアに渡し、エンジニアがそれをコードで再構築する「ハンドオフ（引き渡し）」のプロセスは、長年にわたり実装のズレや調整の手間を生む原因となってきた。CursorやReplitといったAIコーディングツールが開発プロセスをデザイン側に近づけようとする中、Figmaはデザインキャンバスをコードベース側に近づけるアプローチをとる。Code Layersの早期アクセスは、2026年7月に「figma.com/config-betas」を通じて開始される予定だ。
■WebGPUがもたらすブラウザ上の強力なグラフィックス処理
有料プランのFullシートユーザー向けに、WebGPUを活用した「シェーダー塗り（Shader fills）」の提供が開始された。技術的な観点において、従来のWebGLとWebGPUの差は単なる見た目の違いにとどまらない。
長年Figmaのレンダラーを支えてきたWebGLは、2007年に設計されたOpenGL ES 2.0のJavaScript移植版であり、現代のDirect3D 12やAppleのMetal、VulkanといったGPU機能を十分に活用できなかった。一方、W3Cのワーキンググループによって標準化されたWebGPUは、これらの現代的なAPIに直接マッピングされている。Chrome、Edge、Opera、Safariなどの主要ブラウザで標準サポートされており、2026年6月時点でのグローバルなブラウザサポート率は約82%に達している。
最大の違いは「コンピュートパイプライン」の有無だ。WebGLはグラフィックスの描画処理しか行えなかったが、WebGPUは描画と並行して汎用的なGPU計算（GPGPU）をサポートする。これにより、従来はネイティブアプリやサーバーとの通信が必要だった重い処理を、ブラウザのタブ内でGPUの速度で直接実行できるようになる。Figmaは2023年からレンダリングバックエンドのWebGPU移行を進めており、今回のConfig 2026では、ユーザーがプロンプトを使ってデザインエージェントに指示を出すだけで、自動生成されたWGSL（WebGPU Shading Language）プログラムによる高度な視覚効果（ディザリング、ぼかし、すりガラス、液体金属など）をキャンバス上で直接操作できるようになった。
ただし、2026年中頃の現時点で、Firefoxではセキュリティやドライバーの安定性の懸念からWebGPUがデフォルトで無効化されているため、Firefoxユーザーはシェーダー効果のレンダリングを確認できない。また、ユーザーの入力にリアルタイムで反応するインタラクティブシェーダーは「近日公開」とされており、現在もパフォーマンスの最適化が進められている。
■Figma Motion：CSS、React、MP4書き出しに対応したキーフレームタイムライン
アニメーション機能「Figma Motion」のオープンベータ版も提供が開始された。Figma Designファイル内に本格的なキーフレームタイムラインを追加し、イージングカーブやスプリングアニメーション、プリセットなどを利用できる。作成したアニメーションコンポーネントは、Figmaのプラットフォーム上で定義されているため、他の画面や共同作業者のファイルでもその挙動がそのまま維持される。
書き出し形式の豊富さも特徴であり、CSS、JSON、React、MP4、WebM、Animated SVG、GIFに対応している。CSSやReactでの出力はそのままエンジニアへの引き渡しに利用でき、MP4やWebMはプレゼンテーションやマーケティング用途をカバーする。なお、アニメーションコンポーネントのパブリッシュや高解像度MP4の書き出しには、有料プランのFullシートが必要となる。
■Figma Weaveと生成AIプラグイン：キャンバス上での画像生成
Figmaの生成AI画像機能は「Figma Weave」として統合された。Figmaは2025年10月に、この技術を持つイスラエルのAIスタートアップ「Weavy」を2億ドル（約324億円、1ドル=162円換算）以上で買収しており、今回のアップデートでProfessionalプラン以上のFullシートユーザー向けに、背景の置き換えやロゴの挿入、アスペクト比の調整といったワークフローテンプレートが提供される。
さらに、開発環境やAPIの知識がなくても、デザインエージェントへのプロンプト指示だけでカスタムプラグインやシェーダーをキャンバス上で作成できる「生成プラグインフレームワーク」も導入され、30以上のスタータープラグインが提供されている。
■競争激化とプラットフォームの現状
今回のConfig 2026は、Figmaが2025年7月にニューヨーク証券取引所（NYSE）へ12億ドル（約1944億円、1ドル=162円換算）規模の新規上場（IPO）を果たして以来、初の大型製品発表となった。上場後の競争環境は大きく変化しており、一時は52週高値の142.92ドル（約23,153円）に達した株価は、2026年6月時点で約19ドル（約3,078円）まで下落している。これは、AIコーディングツールが従来のデザインワークフローを代替することへの懸念や、AnthropicやOpenAIなどの外部モデルを利用する際の高い推論コストが要因とみられている。
しかし、業績自体は成長を続けており、2025年度の売上高は前年比41%増の10億5600万ドル（約1710億7200万円）、2026年第1四半期の売上高は前年同期比46%増の3億3340万ドル（約540億1080万円）を記録している。
Figmaの共同創業者兼CEOであるDylan Field氏は、基調講演の締めくくりとして「AIは床（参入障壁）を下げたが、天井（表現の限界）を上げてはいない。デザイナー、クリエイター、そして構築者である皆さんが、その天井を上げるのだ」と語り、デザインキャンバスがコードやモーションなどの周辺ツールを吸収していく方向性を示した。
なお、Figmaを巡っては、2025年11月に「顧客のデザインファイルを同意なく生成AIモデルのトレーニングに使用した」として集団訴訟（Khan v. Figma Inc.）が提起されている。Figma側はこの主張を否定しており、許可なく顧客データを使用することはないとし、データ使用の際も匿名化保護措置を適用していると説明している。
■注目ポイントQ&A
●Figmaの「Code Layers」とは何ですか？いつから使えますか？
Code Layersは、GitHubリポジトリをFigmaのキャンバス上に直接取り込み、デザインレイヤーとコードを双方向に同期できる新機能です。Reactコードやnpmパッケージに対応しています。2026年7月に早期アクセス（ベータ版）が開始される予定です。
●「Figma Motion」はAfter Effectsの代わりになりますか？
Figma Motionは、Figma内で完結するキーフレームアニメーション機能で、CSSやReact、MP4など多様な形式で書き出せます。WebやアプリのUIアニメーションをエンジニアに渡す用途には非常に強力ですが、複雑な合成やエフェクトなど、製品UI以外の高度なモーショングラフィックス分野では、引き続きAfter Effectsが必要とされる場面もあります。
●WebGPUとは何ですか？Figmaのシェーダー塗りにどう影響しますか？
WebGPUはWebGLの後継となる新しいWeb標準規格で、現代のGPU API（Vulkan、Metal、Direct3D 12など）に直接アクセスできます。これにより、従来はサーバーやネイティブアプリが必要だった高度な並列計算処理をブラウザ上で高速に実行できます。Figmaではこれを利用して、プロンプトから生成された高度なシェーダー効果（ぼかしやノイズなど）をリアルタイムで描画します。ただし、Firefoxでは現在デフォルトで無効化されているため、効果が表示されません。
●FigmaはCursorやReplitなどのAIコーディングツールとどのように競合していますか？
Cursorなどはプロンプトからコードを生成して開発をデザイン側に近づけていますが、FigmaのCode Layersは本番環境のコードをデザインキャンバス側に引き込みます。これにより、デザインシステムやコンポーネントの整合性を保ったまま、同一ファイル内でデザインとコードの調整やコラボレーションが可能になり、従来の「ハンドオフ（引き渡し）」の手間を削減できる点が強みとされています。
元記事: Figma Config 2026: Code Layers Challenge Cursor as GPU Shaders Hit Paid Plans