From Figma to Blender: Enhance your UI designs with 3D renders.

Early this year, I began tinkering with workflows for 3D renders of user interfaces and posted about my explorations on Reddit and Twitter (I’m having a hard time calling it X).

It turns out most people liked the idea, enough to convince me to make it an actual tool. And to get started I set out three clear goals:

1. Simplify the generation of 3D meshes from 2D UI assets for use in design tools like Blender, Cinema 4D, Maya e.t.c and game engines.
2. Enable prototyping for spatial computing platforms. This can be everything from Vision Pro and Meta Quest to Web XR.
3. Implement a realtime renderer in the browser to reduce reliance on the aforementioned design tools (Blender Cinema 4D e.t.c).

The first goal manifested in the Layers 3D Figma plugin which generates 3D meshes from Figma designs and exports them as .gltf files.

An early version of Layers 3D in action.

This was an effort of the past four months and with the foundational work on Layers complete, I thought I’d showcase its capabilities by remixing a render from Linear’s new website.

The Renders

LEFT: Linear’s website | RIGHT: Figma → Blender

Although the camera angle in my render differs from the original, I hope this workflow illustrates what’s possible with Layers 3D.

Workflow

Here’s a step-by-step breakdown of the process I followed:

Recreating Panels in Figma:

I began by recreating the various panels from Linear’s render using Figma.

Recreating Linear’s panels in Figma

Generating and Exporting 3D Meshes

Once the design was finalised, I generated and exported the corresponding 3D meshes using Layers 3D.

Generating 3D meshes from the UI designs using Layers 3D

Importing Meshes into Blender

The next step involved importing the .gltf meshes generated in the previous step into Blender.

Importing .gltf files into blender

Applying Materials and Lighting

In Blender, I used the orthographic perspective for the camera, applied materials to the meshes, and set up the general lighting for the scene.

Seting up the scene with materials and lighting

Here are the shader node setups for the glass and frosted glass, respectively.

LEFT: Glass | RIGHT: Frosted Glass

Adding Modifiers

I added modifiers to the rounded meshes and meshes with no depth to enhance their appearance.

Adding modifiers to objects

Using HDRI Environment Maps

To achieve better lighting and reflections, I added HDRI environment maps with background set to transparent.

Setting up the HDRI environement map and world scene

Here’s the shader node for the world.

World shader node

Rendering and Editing

I rendered the scene using Cycles.

Rendering the scene using Cycles

And finally made some light photo edits in Figma.

Editing the render in Figma

This is only the beginning

Like I mentioned before, the Figma plugin is only the first step, there’s plenty more to ship and I’m particularly exited about the potential of Layers 3D in prototyping spatial experiences.

I hope to do more of these breakdowns and dev logs as I build Layers, so stay tuned!