2026 年 6 月の Config で、デザインツールの Figma は「コードレイヤー」を発表した。デザインのレイヤーをワンクリック（あるいは一言の指示）で操作できるコードに変え、そのままキャンバスに置ける。複製して操作の方向を並べて比べることも、編集できるデザインのレイヤーに戻して、ワンクリックでコードに反映させることもできる。同時に出た Figma Motion では、アニメーションのタイムラインとキーフレームを Figma の中に置いたまま、開発者モードで CSS、JSON、React のコードとしてそのまま写せる。公式ブログは、アニメーションのフレームを MCP 経由でコーディングエージェントにそのまま渡して実装させられるとも書いている。MCP は AI のツールどうしをつなぐ仕組みで、コーディングエージェントはコードを読み、ファイルを直す AI の助手だ。

デザイン、アニメーション、コードがやっと一つのキャンバスにそろった。だが新しい問題も生まれる。キャンバスの上のものがもう動き、製品そっくりに見えると、そのまま作られてしまいやすい。間に何でも額面どおりに受け取るコーディングエージェントがいればなおさらだ。

だから引き継ぎでは、デザイナーが一つのことをはっきり示す。どこが確かなデザインの意図で、どこが探りの途中の実験か。どのコードを流用し、どれを書き直すかはエンジニアが判断する。試作が動くかどうかで決まるものではない。

試作が動いても、そのとおり作ってよいとは限らない

Figma の公式の説明は、コードを探り、試行錯誤するための新しいデザインの「素材」と表現していて、キャンバスの上のコードをそのまま公開してよいとは言っていない。キャンバスで効果が動いても、コードが製品の構成に合っているとは限らないし、アニメーションがあらゆる端末とブラウザーで滑らかとも限らない。AI が作ったプラグインやエフェクトを誰かが保守できるとも、エンジニアがどの細部が意図的でどれが軽い試しかを知っているとも限らない。

公式の説明は、操作に反応するシェーダーのエフェクトはまだ性能を調整中だとも書いている。キャンバスで滑らかでも、中くらいの性能のスマホで滑らかとは限らない。

引き継ぎで意図と実験を一つずつ示す

コード： このコードが操作の方向を比べるためのものか、エンジニアに流用してほしいものかを示す。既定では試作として扱い、書き直すか引き継ぐかはエンジニアが決める。

アニメーション： 時間、きっかけ、動きに敏感な利用者に見せる代わりの表示（動きを減らす設定など）を挙げる。性能の制約は引き継ぎのときにはっきり伝える。

AI が作った内容： どのエフェクト、プラグイン、版を AI が作ったかを示し、担当者が保守できるか、ライセンスとブランドの一貫性を確かめる。

外部のデータ： Figma の AI エージェントは Notion、Slack、GitHub などとつながって文脈を得られる。どの文書は読んでよく、どれはデザインに自動で取り込んではいけないかを確かめる。

最後の責任： 引き渡しの範囲、変更の記録、差し戻しの条件を決める担当者を一人決める。

アニメーションをコーディングエージェントに渡す前にも、今回何をして何をしないかを書いておく。その issue を coding agent に渡せるかは、最初の diff を書き出せるかで決まるも参考になる。

広告

探りの場所と引き渡しの場所を分ける

Figma のファイルの中で、自由に探るページと引き渡すためのページを分ける。探りの場所は好きなだけ散らかし、版をいくつも複製してよい。引き渡しの場所には、意図を示し、確認を済ませた内容だけを置く。エンジニアは引き渡しの場所からだけ素材を取り、探りの場所のものは移して印を付けてから初めて数に入れる。

同じやり方は、AI で作る見た目の素材にも当てはまる。生成の前に用途と制約を確かめられる条件として書いておく。デザイン AI は言われたとおりに動くが、「何を作るか」は自分で書いておく必要があるも参考になる。

機能はまだ順番待ちの段階だ

コードレイヤーは 7 月から順番待ちの形で提供が始まる予定で、実際に使ってみると発表のときとは違うかもしれない。この記事が扱うのは引き継ぎの原則で、機能の使い方の説明ではない。具体的な設定は Figma の最新の説明に従うこと。

また、印を付けても意図がはっきりするだけで、実装が正しいことまでは保証しない。アニメーション、アクセシビリティ、性能は、最後は本物の端末で試す必要がある。

AI 整理カード

チームのデザイナーが Figma のキャンバスで、コードレイヤー、アニメーション、AI のエフェクトを使って試作を作り始めた。エンジニアに渡すときの確認の仕方を先に決めておきたい。
判断方法はこの記事による：https://boosterminiclass.com/ja/posts/figma-canvas-code-handoff-review/
記事の見方はこうだ。試作が完成品に近く見えるほど、そのまま作られてしまいやすい。コーディングエージェントに渡すときは特にそうだ。引き継ぎでは、どこが確かなデザインの意図で、どこが探りの実験かをはっきり示し、どのコードを流用するかはエンジニアが判断する。

まず私に聞いてほしい。この試作の用途（探り、社内の判断、エンジニアへの引き渡し）、どの新機能を使っているか、誰が実装するか。
そのうえで：
1. 引き継ぎの一覧を作る。コード、アニメーション、AI が作った内容、外部のデータ、最後の責任のそれぞれに何を示すか；
2. エンジニアが「デザインの意図」と「探りの実験」をひと目で見分けられる印の付け方を考える；
3. 誰が確認するかを挙げる。エンジニア、デザインシステム、アクセシビリティ、ブランドと、それぞれが何を見るか；
4. アニメーションを引き渡すときに添える情報を書く。時間、きっかけ、動きを減らす代わりの表示、性能の制約。
どのコードがそのまま公開できるかは判断せず、エンジニアの確認が要るところを挙げるだけにすること。
広告

Share

このミニクラスを共有

このミニクラスが仕事の詰まりをほどく助けになったら、AI の使い方を考えている人にも共有してください。

参考資料