Figma is a 2D design environment. It has no native ability to render, display, or manipulate 3D objects — a hard constraint that becomes frustrating the moment a project calls for depth, perspective, or a 3D product shot. Until recently, the only workaround was to export a static render from Blender, Spline, or another dedicated 3D tool, then paste it into Figma as a flat image — losing all ability to adjust the angle later.

3d.to.design changes that workflow. The plugin already lets you import native 3D model files (.glTF, .glb, .obj) directly into Figma and rotate them on the canvas. Its new AI feature goes one step further: drop in any flat image — a product photo, a logo, an icon — and the plugin's AI generates a full 3D version of it that you can rotate freely, right inside Figma.

This guide covers exactly how to use the new image-to-3D feature and when to reach for it.

Convert a flat image to 3D in Figma - Quick Guide

1. Open your Figma file and run the 3d.to.design plugin from the plugins menu.
2. Upload your flat image (PNG, JPG, WebP, or similar raster format).
3. Select a render quality — Standard or High Quality — then hit Convert.
4. Wait for the AI to generate the 3D version — it appears directly on your canvas.
5. Rotate the model in the plugin UI to update the canvas render in real time.
6. Reopen the plugin at any time to re-adjust the angle.

How to convert a flat image to 3D in Figma - Detailed tutorial

Step 1: Run 3d.to.design

Open Figma, go to the Plugins menu (or press Cmd + P and search for "3d.to.design"), and find 3d.to.design. Click Run to open the plugin panel. The plugin is free and available directly from the Figma Community.

Step 2: Upload your flat image

Click Browse inside the plugin panel and select your image. Accepted formats include PNG, JPG, WebP — any standard raster image works. This can be a product photo, an icon, a logo, or any visual where adding 3D depth improves the design.

Step 3: Choose conversion quality and go

Select your conversion quality: Standard for faster results during early exploration, High Quality for final assets destined for presentations or handoff. Hit Convert and the AI will begin its magic.

The quality setting affects the detail level of the generated 3D model — High Quality produces a more refined output but takes longer to process.

Step 4: Wait for the AI to generate the 3D model

The plugin processes the image and renders a 3D version directly on your Figma canvas. The AI reads the visual structure of the image and constructs a three-dimensional object from it. No 3D modeling software, no .obj files, no Blender export required.

Step 5: Rotate the model to the right angle

Use the rotation controls inside the plugin UI to adjust the angle. The canvas render updates as you rotate — what you see in the plugin reflects exactly what lands on your canvas. Adjust until the perspective matches your layout: a three-quarter view, a top-down angle, a straight-on shot.

Step 6: Re-adjust anytime

The placed layer stays linked to the plugin. Re-select it and reopen 3d.to.design at any point — it reloads the same model so you can rotate to a new angle and update the canvas render without starting from scratch.

What the AI does; setting expectations

A common question is: what does "AI-generated 3D" actually produce from a flat image?

The plugin analyzes the image and constructs a 3D object from its visual content. The result is a renderable model that can be viewed from multiple angles — not a pixel-perfect 3D scan, but a dimensional version faithful enough to the original image to be usable in design mockups, presentations, and prototypes.

What works well:

• Product photos with clear foreground subjects (bottles, devices, packaging, shoes)
• Icons and logos with distinct, readable shapes
• Objects with defined edges and contrast against their background

What to keep in mind:

• Highly complex scenes or images with ambiguous depth may produce simpler 3D representations
• The output is best treated as a design asset for visual mockups, not as a precise engineering model
• Transparent or semi-transparent elements in the source image may behave differently from opaque ones

The key difference from other 3D approaches in Figma: the angle stays editable. A static export from an external tool is fixed the moment it lands in Figma. A layer created with 3d.to.design can be reopened and re-angled at any point in the project.

Why use this instead of exporting from a 3D tool

No 3D software required. Getting a rotatable 3D asset into Figma traditionally means working in Blender, Cinema 4D, Spline, or a similar tool — then exporting a static render and pasting it in. That works, but it creates a dependency on external software and a fixed asset that cannot be re-angled inside Figma.

The image itself is the source. Instead of starting with a 3D model file, you start with whatever image you already have — a product photo from a client, a stock image, a screenshot. The AI converts it, removing the modeling step entirely.

The angle stays live. Re-selecting the layer and adjusting the rotation in the plugin takes seconds. Redoing a 3D render in an external tool and re-importing it takes significantly longer, particularly when client feedback arrives late in a project.

Works alongside the existing 3D import. If you have a native .glTF, .glb, or .obj file, the plugin's standard 3D import mode still handles that. The image-to-3D feature is an addition, not a replacement — so the plugin covers both paths from the same interface.

Use cases

Product mockups from photography. A product team has a JPEG of a new package design. Rather than commissioning a 3D render, they drop the photo into the plugin, generate a 3D version, rotate it to a three-quarter view, and place it directly into their Figma presentation.

Icon and logo visualization. A brand designer needs to show how a logo reads in a dimensional context — on a badge, a product surface, or a 3D sign. They convert the flat SVG export to a 3D layer, rotate it, and place it into the mockup.

App and device mockups. A UI designer needs a screen placed on a device at a specific angle. They use the image-to-3D feature to generate a rotatable phone or tablet shape from a reference photo, then position their UI design on top of it.

Presentations and pitch decks. A Figma Slides presentation needs a product shot that reads as dimensional rather than flat. The 3D layer creates depth without requiring any design work outside of Figma.

Iteration without re-exporting. A designer places a 3D asset in a layout, the client requests a different angle, the designer reopens the plugin, rotates the model, and re-places — all inside Figma. No round-trip to an external tool.

Conclusion

Figma has no native 3D capability. The standard workaround — render externally, export, import as a flat image — produces a static asset with no angle flexibility. 3d.to.design removes both limitations: the AI generates a 3D version of any flat image, and the result stays re-adjustable directly in Figma.

If your workflow involves product mockups, brand presentations, or any design where a dimensional perspective improves the visual, this is the shortest path to getting there without leaving Figma.

Try 3d.to.design free — or explore the full anything.to.design plugin ecosystem, which covers over 30 file format imports into Figma.

FAQ

Q: Does Figma support 3D natively?No. Figma is a 2D design environment. It has no built-in 3D rendering, 3D object import, or perspective manipulation tools. Plugins like 3d.to.design add this capability to the Figma canvas.

Q: What image formats can I use with the image-to-3D feature?The plugin accepts PNG, JPG, and WebP. Product photos, screenshots, and icon exports are all suitable inputs.

Q: Can I re-adjust the 3D angle after placing the layer?Yes. Re-select the layer in Figma and reopen the plugin. It reloads the model at the same view so you can rotate it and re-place at a new angle without starting over.

Other top plugins to try

• ai.to.design - Generate designs from prompts right in Figma
• html.to.design — Import live websites into Figma as editable layers
• image.to.design — Turn any image or screenshot into Figma layers