商品の画面を少し傾けて見せたい。カードを裏返す動きをWebサイトに入れたい。こうした「立体っぽい見せ方」は、これまでFigmaでは画像を斜めに貼ったり、別のツールで作った絵を持ち込んだりして作るのが普通でした。そして実装する人は、その絵を見ながらCSSの数字を自分で探していました。
Figmaは11月12日、新しい効果「3D transform」を発表しました。重なり（レイヤー）をX・Y・Zの3つの軸で回し、奥行きと見る位置まで決められます。決めた値はDev ModeでCSSとして写せるので、デザインと実装の間の「だいたいこのくらい傾けて」が減ります。この記事では、何ができるのか、どんな仕事で使えるのか、使う前に確かめることを公式の情報で整理します。
この記事の要点
- Figmaが11月12日、レイヤーをX・Y・Zの3軸で回し、奥行きと見る位置も決められる「3D transform」を発表した
- Figmaで画面やバナーを作る人と、それをWebに組む人に関係する。すべてのプランが対象で、Fullシートと編集権限が必要
- 決めた値はDev ModeでCSSとして写せる。まず斜めのモックアップ1枚で試し、ブラウザで見え方を確かめてから使う
何が発表された？
Figmaのリリースノート（11月12日）によると、3D transformはFigma Designの新しい「効果」の1つです。発表の中身は次のとおりです。
- 3つの軸で回す：キャンバスの上のハンドルを引っぱると、X・Y・Zの軸で回せて、その場で見え方が変わる
- 奥行きと見る位置：見る位置（Perspective）と奥行き（Depth）を調整して、3Dの場面を組み立てられる
- Figma agentに組ませる：自分で一から作るほか、Figmaのエージェントに組み立てを頼める
- Figma Motionで動かす：裏返す・回る・見る位置が変わる、といった動きを付けられる
- 実装へ渡す：Dev ModeからCSSを写すか、Figma MCPでつないだコーディングエージェントにデザインを送れる
ヘルプ「Create 3D effects in Figma Design」には、使い道として斜めに置いたモックアップ、カードを空間に並べる、立方体を組む、カードを裏返す動きが挙がっています。
これまでと何が違う？
いちばんの違いは、傾けたあとも中身を直せることです。ヘルプによると、3D transformは元のレイヤーを壊さない効果で、文字や塗り（シェーダーの塗りも含む）は傾けたまま表示され、そのまま編集できます。効果は目のアイコンで一時的に隠したり、外したりできます。対象はベクター・画像・フレーム・コンポーネント・テキストです。
もう1つの違いは、Webの言葉とそろっていることです。ヘルプでは、DepthはtranslateZ、親のフレームの見る位置はperspective、中の重なりを同じ3Dの空間に置く設定はtransform-styleに当たると説明されています。デザインで決めた値と、実装で書く値が同じ名前でつながります。
何ができるようになった？
右の「効果」から足して、ハンドルで回す
手順は、レイヤーを選び、右のサイドバーの［効果］の＋から［3D transform］を選ぶだけです。キャンバスのハンドルを引っぱるか、設定を開いて角度を数字で入れます。X軸は前後に傾け、Y軸は左右に傾け、Z軸は画面の中で回します。回る中心（原点）も、真ん中から端へ変えられます。
見る位置（Perspective）と奥行き（Depth）
Perspectiveは親のフレームに付ける効果で、カメラを近づけたり遠ざけたりするイメージです。ヘルプによると、値が小さいほど見る位置が近くなり、立体の効きが強くなります。Depthは、レイヤーを手前や奥へ動かす値です。
ここには1つ、つまずきやすい所があります。Depthの変化を見えるようにするには、親のフレームで「Keep nested layers 3D」をオンにし、親にPerspectiveを付けるか親ごと3Dで回す必要があります。ヘルプのよくある質問にも「奥行きを変えても見た目が変わらない」が載っています。
カードの表と裏を作る
設定のBackfaceで、裏側が見えるかどうかを決めます。見える設定のときは、表を左右反対にしたものが裏に出ます。表と裏で違う絵にしたいときは、表と裏を別のレイヤーにして、どちらも裏側を隠す、とヘルプに書かれています。
Figma Motionで動かし、エージェントにも頼める
Figma Motionに切り替えると、回転（X・Y）と奥行きにキーフレームを置けます。見る位置もキーフレームで変えられます。エージェントには「このレイヤーで立方体を組んで回して」のように、3Dと動きをまとめて頼めます。できあがったら、キャンバスとタイムラインで結果を確かめ、キーフレームを人が直します。
仕事ではどう使えそう？
サイト提案の「斜めのモックアップ」
提案資料やWebサイトのトップで、スマホやパソコンの画面を斜めに置いて見せる場面はよくあります。これまでは画像を作り直すたびに書き出し直していましたが、3D transformなら画面の中身を直しても傾きはそのままです。文言の修正が多い提案の途中で効きます。
カードを裏返す動きの見本
「表に商品名、裏に説明」のようなカードの動きは、言葉だけでは伝わりにくいものです。Figma Motionで裏返す見本を作ってお客様や社内に見せれば、動きの速さや角度を同じ画面で決められます。動きの細かい決め方は、以前の記事「Figma Motionで、動きを当てる前に見て選べるように」でもまとめています。
バナーやSNS画像に奥行きを付ける
カードを何枚か違う角度と奥行きで並べ、親のフレームにPerspectiveを付けると、紙を空間に置いたような絵が作れます。ヘルプには、3Dの組み合わせを「Turn into flat plane」で平面にまとめて、カードやポスターのような平らなデザインの中に置く使い方も書かれています。
デザインからCSSへの受け渡し
実装する人は、Dev Modeで3Dの効果が付いたレイヤーを選び、CSSのtransformの値を写せます。Figma MCPにつないだコーディングエージェントに、3Dの効果ごと実装を頼むこともできます。「この角度で」と口で伝える場面が減ります。
KAKERUならこう使う／使わない
KAKERUの判断は、こうです。使うのは、提案用の斜めのモックアップと、動きの見本づくりです。傾けたまま中身を直せる点と、決めた角度がCSSの名前でそのまま渡せる点は、制作の行き来を減らします。
使わないのは、写したCSSをそのまま本番に入れることです。3Dの見え方は、画面の大きさ・ブラウザ・動きを減らす設定を選んだ人など、見る側の条件で変わります。Figmaの中で決めた値はあくまで出発点で、ブラウザとスマホの実機で見え方を確かめてから使います。文字を大きく傾けて読みにくくする使い方も、KAKERUはしません。
3Dは、効かせすぎると読みにくくなるのが早い表現です。傾けるのは「見せたい1枚」だけ。足す前に削る、はここでも同じです。
誰が使える？
ヘルプによると、3D transformはすべてのプランが対象です。ただし、Fullシートとファイルの編集権限が必要です。動きを付けるFigma Motionはオープンベータで、ヘルプの対象はStarter・Professional・Education・Organization・Enterpriseです。Dev ModeやFigma MCPを使う部分は、それぞれの機能が使える契約かどうかを自社のプランで確かめてください。
注意点
- 親のフレームで使えなくなるもの：「Keep nested layers 3D」をオンにした親のフレームでは、不透明度が使えず、描画モード・シェーダー・ほかの効果・はみ出しを隠す設定（クリップ）も使えません。塗りと線は非表示になります。必要なときは「Turn into flat plane」で平面に戻します
- 奥行きが見えないとき：Depthを変えても見た目が変わらないときは、親のフレームの「Keep nested layers 3D」と、Perspectiveまたは親の3D回転を確かめます。中の重なりが平らに見えるときは、親が「Turn into flat plane」になっていないかを見ます
- 動きはベータ：Figma Motionはオープンベータで、ヘルプには機能が変わることや動作が重くなることがあると書かれています
- 説明は英語だけ：3D transformのヘルプは、11月15日の時点で英語版だけです。日本語版のページはまだありません。画面の表示名も英語のまま書いています
- エージェントに頼むとき：エージェントが作ったキーフレームは、タイムラインで人が確かめて直す前提です。エージェントで3Dを作るときの利用枠の扱いは、ヘルプに記載がありません
まとめ
Figmaの3D transformは、レイヤーを3つの軸で回し、奥行きと見る位置まで決められる新しい効果です。傾けても中身を直せて、Figma Motionで動かせて、Dev ModeでCSSとして写せます。
関係があるのは、Figmaで画面やバナー、提案資料を作る人と、そのデザインをWebに組む人です。Figmaを使っていない会社や、立体の見せ方を使わないデザインには、今は関係がありません。
次の一歩は、今ある提案資料から画面のモックアップを1枚選び、3D transformで傾けてみることです。Dev ModeでCSSの値を見て、ブラウザで同じ見え方になるかを確かめれば、仕事に入れるかどうかを判断できます。
参考・情報源
- Figma Release Notes「Design in 3D, natively in Figma, and ship directly to code」（2026年11月12日）
https://www.figma.com/release-notes/ - Figma Learn – Help Center「Create 3D effects in Figma Design」（英語）
https://help.figma.com/hc/en-us/articles/44568893374999
※手順・対象プラン・CSSとの対応・親のフレームの制限・よくある質問 - Figma Learn – Help Center「Explore Figma Motion」（英語）
https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion
※Figma Motionのオープンベータと対象プラン - MDN Web Docs「transform-style」
https://developer.mozilla.org/ja/docs/Web/CSS/transform-style
※ 2026年11月15日に確認した内容です。提供の範囲や機能は変わることがあります。
ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。
「もう少し傾けて」「奥行きをもう少し」。デザインの会話で数字が出てこない所でした。ここに名前と数字が付くのが、今回いちばん大きい点です。