「コードはデザインの素材だ」―Figmaで“作業待ち”がなくなるWeb制作の未来【Config 現地レポ#1】

Figma主催の年次カンファレンス「Config 2026」を現地取材。各セッションやFigmaの“中の人”へのインタビューなどを、全4回にわたってお届けする。

第1回となるこの記事では、発表された「4つの新機能」について、デモの様子とともに深掘りしていこう。

新機能1コードレイヤー （Code layers）

デザインとコードは対立するものじゃない。コードはデザインのための素材の一つなんだ

Figma共同創業者でCEOのディラン・フィールド氏はそう言って、プロダクトマネジャーであるニコラス・クライン氏（以下、ニコ）を壇上に招いた。

「コードレイヤー」は、デザインとコードの相互編集を同じキャンバス上で実現する機能だ。かつてのWebサイト構築には「デザインをほぼ終えてから、エンジニアに渡してコーディング」という工程があった。しかし新機能で、この「相手の作業待ち」が完全に過去のものになっただろう。

ドイツにいた大学時代、夜明けのグラデーションをコードで表現しようとしたほど“コードオタク”だったというニコが、実演デモを披露した。

自然言語でコードを生成し、双方向に反映

作業中のデザインファイルから1つのレイヤーを選び、この新機能で修正するケースを想定しよう。音声で「これをコードで構築して」と指示すると、同一キャンバス上にコードレイヤーが現れ、プロンプトに従ってAIがコードを生成していく。声を出せない環境でも、ツールバーに新しく追加された「｛ ｝コードを構築」をクリックして指示を書けば同様に動作する。

最大の特徴は、デザインの隣で直接コードを修正すれば、即座にデザインへ反映できる点だ。逆に、デザインを修正すれば、コードもワンクリックで反映される。途中で元に戻したくなった場合も、メンバー間のチャットやプロンプトのログが残っているため、過去の工程を容易に遡ることができる。

さらに、GitHubからリポジトリをインポートしたり、ローカルフォルダを直接Figmaキャンバスにアップロードしたりすることも可能だ。キャンバスを共有するチームでこの作業をくり返せば、「相手の作業待ち」は大幅に短縮されそうだ。

A案・B案の並行検討と「バードアイビュー」

3Dやアニメーションなど動きのあるデザインも、Optionキーを押しながらコードレイヤーをドラッグするだけで複製できる。A案の打ち合わせ中にレイヤーごと複製し、AIと対話しながら並行してB案を作り始めることも簡単だ。クライアントやチームに対して「今の意見を反映するとこうなります」と即座に示せるため、合意形成のスピードが格段に上がる。

デモで最も参加者を沸かせたのは、「Extract Designs（デザインの抽出）」という機能を使ったときだ。コードレイヤーから各状態の画面を抽出して、アプリやWebサイトの全体をバードアイビュー（俯瞰的図）で見られるのだ。

これからは1ページずつ「開く→確認する→閉じる→次を開く」をくり返す必要はない。全体のバランスや変更点をチーム全員で鳥瞰しながら作業を進められる。

コードは今や、皆さんが自由に扱うための直感的な素材。個人的には、“散らかして”ほしい。美しい混乱のように。なぜなら、それこそが共同で創造性を発揮するということだから（ニコ）

ニコはそう語ってデモを締めくくった。「コードレイヤー」は現在β版のウェイティングリストに登録すると、クローズドで試用が開始されるという。申請が承認されれば、Figma AIクレジットの消化なしで試用できる。

なお、4人のFigmaクリエイターが実践したセッションでは、ローカルのコードベースでデザインし、「コードレイヤー」を使ってキャンバス上でプロトタイプを作成、本番環境まで完結させる流れが解説されている。ぜひ参考にしてみてほしい。

新機能2Weaveワークフロー

続いて、2025年10月にFigmaに買収された生成AI企業「Weavy」の共同創業者であり、現在はFigma Weaveのクリエイティブ・ディレクターを務めるイタイ・シフ（Itay Schiff）氏が、「Weaveワークフロー」のデモを担当した。

2025年にリリースされた「Figma Weave」は、AIによるクリエイティブ制作をノードベースのワークフローとして構築・共有・再利用できるプラットフォームだ。

今回のアップデートでは、20以上のWeaveツールがFigmaキャンバスに統合された。これにより、今後先輩デザイナーが構築したワークフローをチームで共有・再利用しやすくなる。経験の浅いメンバーでも一貫性のある高品質なビジュアルを効率よく制作できる。

統一感のない画像を一括変換、ノウハウのパッケージ化も

たとえばECサイトの担当者が、あちこちから集めた統一感のない商品画像でページを作るとする。画角も背景も、照明のあたり方もバラバラな状態だが、Figmaキャンバス上のWeaveツールに画像をランダムに貼り付け、基準となるスタイルを指定したうえで「このスタイルを他の商材画像にも反映して」とAIに指示すれば、一瞬でトンマナがそろった画像や、360度アニメーションが手に入る。

Weaveワークフローの例は、Figmaコミュニティで公開されており、利用・編集ができる。Weaveツールはオープンベータ版で、期間中は無料で利用できるが、一般公開後はFigma AIクレジットを消費するため、早めに試してみよう。

新機能3シェーダー （Shaders）

これまでFigmaコミュニティではクリエイターが自作のプラグインを提供しており、視覚エフェクトだけでも30以上が存在していた。その進化系として登場したのが「シェーダー」だ。ジョージアとロージーのペアが、構想から4年半かけ、「自分でカスタムできる機能」へと昇格させた。

これは視覚効果なので、デモやプロモ動画を見たほうが早いだろう。

高度なエフェクト処理とAIによる操作パネル構築

具体的には、次のようなエフェクトを自在にコントロールできる：

• 原色の幾何学模様での加工
• メッシュのグラデーションのドットサイズやストライプのピクセル変更
• 遠近感の追加
• 色温度やにじみの幅の調整
• 水面や金属の質感を動画へ付与
• シンプルな造形への光のハレーションを追加
• 魚眼レンズのようなエッジ強調
• ページをめくったような視覚効果を加える

これらをカスタムメイドできるうえ、幅や色調をバー操作で変更できるパネルまでAIが自動構築してくれる。動画にも対応可能だ。予算や時間に限りがあるチームでも、「このファッションブランドの広告エフェクトを再現したい」とAIに伝えるだけで、差別化されたビジュアルを自作できる。

「シェーダー」のβ版は、すでにすべての有料プランのツールパネルに搭載されている。

新機能4モーション （Motion）

Config2026で最も観客を沸かせた新機能は、大トリの「モーション」だった。デモを担当したイギリス人コンビのデイブとピアーズは、もともとビジュアルデザインや音楽にルーツを持つクリエイティブチーム「Modyfi」に所属していた。2人は1年前にFigmaに入社して以来、Figmaキャンバス上でアニメーションを制作・編集できる機能を開発してきたという。

2つのアプローチと共同編集機能

この新機能では、次の2つの方法からアニメーションが作れる。

• タイムラインコントロール：
  レイヤーをドラッグしてタイミングを調整し、手動で早送り・巻き戻しをしながら調整する方法。オートキーフレーミングを有効にすると、再生ヘッドが動いている間にすべての変更が記録される。

• アニメーションスタイル：
  プリセットされているアニメーションスタイル （フェード、ムーブ、スケールなど） を追加し、キャンバス上のタイムラインでさらに編集する方法。

動き自体をAIで生成することも可能で、反復作業には自動化プラグインを活用できる。AI生成動画であってもタイムライン上での手動微調整が可能で、毎回プロンプトを打ち直す必要はない。3Dや前述の「シェーダー」との組み合わせも可能だ。タイムラインに指示や評価のコメントを残し、チーム全体で制作に参加できる点はFigmaならではの強みだ。

多様な形式のエクスポートに対応

「モーション」では、アニメーションのコードをCSS、JSON、あるいはReactへ直接コピーできるようにした。MP4、WebM、アニメーションSVG、GIF形式でのエクスポートにも対応する。MCPとも互換性があり、フレームへのリンクをコーディングエージェントと共有できるため、意図しない書き換えや再解釈は起こらないという。

「モーション」のβ版は全プランで試用が始まっており、「8分で学ぶFigma Motion」というチュートリアル動画も公開されているので、見ながら始めてみよう。

4つの新機能の発表を終え、CEOのディラン・フィールド氏は、次のようにまとめた。

Figma（AI）agentは添付ファイルやコネクターにも対応しており、連携先であるNotion、Slack、Granola、Hex、GitHub、Atlassianなどから直接データをデザインに取り込めるようになった。

自分のツール、自分の素材、すべてがFigmaキャンバスの中で一つに集まり、自由に試せる。考えるのと同じスピードで遊べるようになった。AIはデザインに取り組むハードルを下げるけれど、天井を上げるのは皆さん次第。可能性の天井を、成層圏まで押し上げよう（ディラン・フィールド氏）