進化が止まらない！最新ツール

Figmaが新機能4つ発表、コード・3D・アニメも同一キャンバスで共同作業が可能に【Config現地レポ】

Figmaの年次カンファレンス「Config2026」現地レポート。発表された4つの機能について紹介する。

井田奈穂

7:05

Config2026で発表された4つの新機能

今回Figmaが示したのは、AIエージェントを介してチーム全員がプロダクト開発の過程に携わり、ローンチまでを共に歩む「フルスタックのデジタル創造の場」としての進化だ。

初日のキーノートセッションで公表された主な新機能は、次の4つ：

コードレイヤー（Code layers）
モーション（Motion）
シェーダー（Shaders）
Figma Weaveワークフロー

それぞれ簡単に紹介する。

新機能1コードレイヤー（Code layers）
コード⇔デザインの反復作業を同じキャンバスでできる

同一キャンバス上にデザインとコードを配置でき、チームでの共同編集をより身近にした「コードレイヤー」

デザインだけでなく、コードも同じキャンバス上で直接編集し、チームで共同作業ができるようになった。いまやデザイナーにとっても「コードもレイヤーの1つ」として扱える。ワンクリック、あるいはプロンプトを入力するだけで、任意のデザインをコードに変換できる。

これにより、同じファイル内でデザインとコードの両方に対して、自由に意見を出し合え、コメントをつけてスピーディに修正指示も出せるようになった。逆に、コードからデザインを抽出することも可能なため、「見た目担当（デザイナー）」と「実装担当（エンジニア）」が分断されることなく、1つの画面を見ながら協業できる。

新機能2モーション（Motion）
アニメーションもチームで生成・編集

アニメーションや3Dの生成だけでなく、タイムライン上でも直接編集ができる「モーション」

アニメーションやトランジション、3D変換といった「動き」の演出も、同じキャンバス上で直接生成・編集できるようになった。たとえば、次のようなAIへのプロンプト入力で、まるで命を吹き込むように「動き」を追加できる。

この図形をバウンドするアニメーションに

滑らかなスタイルで動かして

さらに「Devモード（開発者モード）」に切り替えると、動画のタイムライン上でも手動で調整が可能だ。アニメーションのコードは、CSS、JSON、またはフレームワーク対応のReactに直接コピーができる。またMP4、WebM、アニメーションSVG、GIF形式でのエクスポートにも対応している。

新機能3シェーダー（Shaders）
視覚にダイナミックなエフェクトを

グラデーションマップ、リソグラフ印刷、輝度パーティクルなどのシェーダー効果を重ね合わせたイメージを生成できる「シェーダー」

ファッションブランドや音楽系の広告表現に見られるような、多様でダイナミックな視覚表現が誰にでも可能になる新機能だ。

パソコンのグラフィック処理能力を引き出す最新技術である「WebGPU」が搭載されており、この技術により、プロンプトを使って自分のイメージどおりのエフェクトやカスタムツールを構築できる。ディザリング、ピクセル化、各種ぼかしなど、これまでFigmaでは利用できなかったエフェクトをキャンバス上で直接作成することが可能になった。