Prefer English?
Prefer English? Switch the website language for a better experience.
Until now, designing in 3D within Figma meant improvising: external plugins, back and forth trips to Blender or Spline, then reimporting flat images that lost all their interactivity along the way. Figma has just changed that with 3D transform, a new effect that lets you rotate objects on the x, y, and z axes directly on the canvas, with draggable handles and a real time preview.
You can build a 3D scene entirely by hand, or let the Figma agent compose it for you from a prompt. You then adjust perspective and depth to get a genuine scene with volume, not just an object that leans a bit.
What makes this announcement interesting is the complete chain Figma now offers. Once your object is in 3D, you can:
This is where the phrase "figma export code" really earns its meaning: it is no longer just about exporting a flat image or mockup, but about turning an object in volume into instructions a developer or a coding AI can actually use.
| Before 3D transform | With 3D transform |
|---|---|
| External plugin or third party 3D tool (Blender, Spline) | Native x, y, z rotation right in Figma |
| Export as a flat image, loss of interactivity | Direct CSS export from Dev Mode |
| Manual recreation of the animation in code | Direct handoff to your coding agent via MCP |
| Static 3D scene | Animatable scene with Figma Motion |
Let us be honest: we have been waiting for this one for a while. At Mazette.co, we use Figma every day to design interfaces and products, and 3D has always been the classic friction point: either you reach for an external tool and lose the connection with your design system, or you fake depth with shadows and gradients that fool no one.
What really gets us excited is not 3D on its own (other tools have offered that for years), it is the continuity of the workflow: you design in volume, you animate with Figma Motion, and you walk away with usable CSS without retyping a single line. For interfaces that play with depth (cards that flip, elements that rotate on scroll, 3D micro interactions on a SaaS product), this is exactly the kind of detail that separates a polished product from a generic one.
Our only reservation: as is often the case with new Figma features, the auto generated CSS export is a starting point, not a final deliverable. On client projects, we always go back in to clean up and optimise the code before integration. But in principle, this bridge between design and development directly serves what we stand for in product design: less time wasted between creative intent and shipping it to production.
{{webdesign}}
If you are working on a design system or a product interface, 3D transform is worth testing on a concrete use case rather than an abstract one: a 3D hover on a product card, a depth transition between two screens, or a brand element that tilts slightly on scroll. The key is to keep it consistent with the rest of your interface, 3D should add to your visual language, not replace it.
If exporting to code is one of your priorities, make sure to structure your components upfront too (clear naming, style variables, a clean layer hierarchy). That is what makes the difference between an export you can use in minutes and code you have to rebuild from scratch.
For more on how Figma and code work together, our article on Figma’s new presets for designing on unconventional formats pairs well with this one.
Code
Over 180 companies have already stepped out of the shadows with us.
Figma offers several routes depending on what you need. Dev Mode generates CSS, Swift, or Android code directly from your layers, including 3D designs made with the new 3D transform feature. You can also go through Figma’s MCP to send your designs straight to your coding agent (Cursor, Copilot), which generates the components, or use third-party plugins for other frameworks.
To export a complete file, select your frames and use the export panel in the bottom right, choosing an image format (PNG, SVG, PDF) or going through Dev Mode to get the code for each component. For a full site, it is best to structure your pages with a consistent design system before exporting, so the generated code stays clean and reusable.
The problem usually comes from a poorly organised structure: unnamed layers, groups used instead of frames, styles not linked to variables, or effects not supported by the chosen export method. A clean design, with components and a clear hierarchy, almost always exports smoothly, whether as an image or as code.
Impactful titles, polished meta descriptions, sitemaps, Schema.org, Hn structure, and audits: these are the SEO foundations that make your content readable by both Google AND generative AI. We cover both simultaneously.
With over 180 clients, our agency is one of the few in France to hold the Webflow Premium Partner label, supporting you in every area, including custom web design, sophisticated automation, conversion optimization, and SEO and GEO visibility.
We create bespoke web designs focused on performance, user journeys, and conversion. Join over 180 clients who have trusted us to elevate their brand.
