How to Create a 3D Scene in Vertex 3D Step by Step

Updated

Vertex 3D is a Figma plugin for building 3D scenes without leaving your design file. You can start from a library of pre-made models, apply materials, convert SVG artwork or text into 3D, then adjust lighting, camera, and image size before exporting. This walkthrough covers that full sequence. The one condition to note up front: it runs inside Figma, so you need Figma to use it.

Before You Start

  • A Figma account with a file open where you can run plugins.
  • The Vertex 3D plugin installed from the Figma plugin directory.
  • Any SVG assets you plan to convert, ready to upload.

The plugin loads as an app inside Figma, so if you only see a blank panel or a JavaScript notice, the plugin interface hasn't finished loading — reopen it from the Figma plugin menu.

Step 1: Start Your Scene From a Model

  1. Open the Vertex 3D plugin in your Figma file.
  2. Browse the built-in library of pre-made models.
  3. Place a model onto the scene canvas as your starting object.

Starting from a library model is the fastest route to a composed scene. If you'd rather build from your own artwork, skip to the SVG conversion step below and use that as your base object instead.

Step 2: Add and Switch Materials

  1. Select the object in your scene.
  2. Open the material options and apply a material to it.
  3. Swap between materials to compare looks — the change applies to the selected object, so you can iterate without rebuilding the scene.

Materials are the main lever for making a scene read as a specific style (metal, matte, glossy, and so on). Test a couple before committing, since lighting in the next step will change how each one appears.

Step 3: Bring In SVG Artwork or 3D Text

To convert an SVG:

  1. Upload your SVG file through the plugin.
  2. Let the plugin convert it into a 3D object.
  3. Position and scale the result within the scene.

To add 3D text:

  1. Use the 3D text tool.
  2. Enter your text and place it in the scene.
  3. Adjust its position relative to your other objects.

Both routes give you custom geometry without modeling it yourself — useful for logos, headlines, or brand shapes that need to sit in 3D space.

Step 4: Adjust Lighting and Camera

  1. Open the lighting controls and change the light setup until the scene's shadows and highlights look right.
  2. Switch to the camera controls and set the viewing angle.
  3. Reframe until the composition matches what you want to show.

Lighting and camera are the two settings that most change the final image, so treat them as a pair: a camera angle that hides your key object is worth changing even if the lighting is already good.

Step 5: Set Image Size and Export

  1. Set the output image size for the final render.
  2. Export the scene as an image.

Check the size against where the image will be used before exporting — a scene framed for a wide banner won't crop well into a square thumbnail, and re-exporting means re-checking the camera.

Quick Reference

Stage What you do What you get
Start Pick a library model or upload an SVG A base object in the scene
Materials Apply and switch materials The surface look of each object
Custom geometry Convert SVG or use 3D text Your own shapes and lettering in 3D
Lighting & camera Adjust both, then reframe The final composition
Output Set image size, export A finished image

Common Snags

  • Blank plugin panel: The interface needs JavaScript to run. If it doesn't load, close and relaunch the plugin from Figma.
  • SVG converts but looks wrong: Complex SVG paths can produce unexpected geometry. Simplify the source file and re-upload.
  • Scene looks flat after adding materials: Lighting is doing most of the work here — revisit the light controls before changing materials again.
  • Export doesn't match the canvas view: Confirm the camera angle and image size are set the way you want before exporting, since the export reflects those settings.