UX/UI Radar Číst česky
AI-driven design

3D transforms in Figma: the agent calculates depth and builds a plugin

Figma's Brand Studio shows how 3D transforms, the Figma agent, shaders and Figma Motion produced a launch video entirely on the canvas. 3D transforms is in open beta for all Full seat users.

On 12 Nov 2026 Figma published a behind-the-scenes look at how its Brand Studio made the launch video for 3D transforms. The workflow matters more than the video: spatial composition that would take hours by hand was handed to the agent.

What is new / How it works

With 3D transforms you tilt, rotate and arrange text, images, vectors and frames in space. Applying the perspective effect to a parent frame places its children in a shared spatial composition. Effects are non-destructive, and vectors stay editable even after they take on dimension.

The team describes four workflows:

  • Typography: the agent spaced copies of a word along the Z axis, then helped turn a tube with type on its surface into a component; duplicates were used to compare tube counts, spacing and rotation.
  • Expressive layouts: the agent generated a plugin that arranges elements in a grid, helix, ring or randomized scatter, with controls for orientation and spacing.
  • Dimensional illustration: a vector flower in 3D, colored with a gradient-map shader whose offset is animated.
  • Collaboration: colors were adjusted through components after animation, and the changes carried into the animation.

Why it matters

It fits a recurring trend: the agent doesn't only draw, it builds its own tools (plugins) and calculates geometry. Brand and motion designers worked in the same file without moving assets between tools. For developers, in Dev Mode you can copy a 3D layer's CSS transform, including depth and rotation on each axis, and coding agents can read and create 3D designs through the Figma MCP server. The post gives no quantitative results; it is the vendor's own account.

Getting started

  1. Apply the perspective effect to a parent frame with a few layers (open beta, Full seat).
  2. Ask the agent for Z-axis spacing or an arrangement plugin.
  3. Add a shader and preview movement with keyframes in Figma Motion.
  4. Copy the CSS transform in Dev Mode for handoff.
  5. Try the community playground file with examples from Figma teams.

Sources