デザインツールの年に一度の祭典、Figmaの開発者会議Config 2026。今年の発表を一言でまとめると「キャンバスが立体的に動き出した」だ。アニメーション、質感、3D、そしてコードそのものが、デザインを描くキャンバスの上に同居し始めた。
発表が多くて追いきれなかった人向けに、この記事では主要アップデートを「何ができるようになったか」で整理する。デザイナーでなくても、資料やLPを作る人には関係のある変化だ。
- Figma Motion: タイムラインまたはAIエージェントで本格アニメーションを制作。全プランでオープンベータ。
- Shaders / 3D変形: 「こういう質感」と言葉で頼むとAIがシェーダーを生成(6月24日〜ベータ)。平面デザインに奥行きが付く。
- Code Layers: コードのレイヤーをキャンバスに直接配置。リポジトリから画面フローを取り込んでデザインと並べられる。
Motion——「動き」がプラグイン不要になった
これまでFigmaで凝ったアニメーションを作るには、プロトタイプ機能の限界と付き合うか、After Effectsなど外部ツールへ持ち出すしかなかった。Figma Motionはタイムライン編集を本体に組み込み、しかもAIエージェントに「ふわっとフェードインして」と頼む作り方まで用意した。
再利用できるアニメーションシステムとして組めて、開発者に渡せる形で書き出せる——つまり「動きのデザイントークン化」だ。バナーやLPの制作フローからAfter Effectsが消える現場は、実際に出てくるだろう。
ShadersとCode Layers——言葉が質感になり、コードが素材になる
Shadersは、欲しい質感を言葉で伝えるとAIエージェントがシェーダー(表面の質感プログラム)を書いて適用する機能。ざらつく金属、揺らめく水面、ノイズの走るガラス——これまで画像素材を探して貼っていた表現が、その場で生成・共有できる。6月24日から有料プランのフルシート向けにオープンベータが始まった。
そして地味に革命的なのがCode Layersだ。リポジトリをクローンし、コードから画面フローを抽出してデザインレイヤーとして並べられる。「実装済みの画面」と「これからのデザイン」が同じキャンバスに載る——Figma MCPの双方向連携と合わせると、デザインとコードの境界線は今年、本格的に溶け始めた。
figma.com Config 2026: New Materials, New Tools and a More Expressive Canvas(公式まとめ) 全発表の一次情報。各機能の対応プラン・ベータ状況はここで確認できる。この方向転換は何を意味するか
Config 2026の発表群には、はっきりした方向がある。「画面の設計図を描く道具」から「動く最終成果物を作る道具」へ。静的なUIカンプはAIが数秒で吐ける時代になり、道具の価値は「表現の到達点」へ移動する——Figmaはそこに賭けた。
競合の動きと並べると立体的に見える。Canvaが「プロ機能のタダ配り」でデザインの民主化を進めるのに対し、Figmaは表現の上限を引き上げる方向へ走る。裾野を取るCanva、頂を高くするFigma——AI時代のデザインツール二強は、対照的な登り方を選んだ。
今日から触れるもの・待つもの
Motionは全プランでオープンベータなので、無料アカウントでも今日から試せる。Shadersは有料プランのフルシートから。Code Layersはチームでの導入設計が要るので、まず個人ファイルでMotionを触り、「動きまでFigmaで完結する」感覚を確かめるのが良い入り方だ。
デザインツールの進化は、結局「専門職の技能が一般人の道具になる」歴史だ。今年キャンバスに来た動き・質感・奥行きも、数年後には資料作りの当たり前になっているだろう。早めに触った人から、その「当たり前」を先取りできる。
出典: Figma Blog「Config 2026 Recap」 / Figma公式ヘルプ「What’s new from Config 2026」 / TechCrunch(2026年6月24日)。提供状況は2026年7月12日時点。
