I began Depth whereas designing a product web site that depended closely on 3D renders. Different instruments coated components of the workflow, however I couldn’t discover a easy renderer that may settle for arbitrary fashions.
The completed photographs got here from a visualization staff already dealing with requests from designers throughout the corporate. On the identical time, I used to be reviewing the work with management each two weeks and altering the web page between these evaluations.
I had entry to the 3D fashions, however testing an thought myself meant leaving Figma, making ready a scene in Blender or Cinema 4D, software program I didn’t use fluently, exporting a picture, and bringing it again.
I didn’t want closing supplies or manufacturing lighting at that stage. I wanted sufficient kind and lightweight to guage whether or not the picture labored on the web page.
Depth was constructed for that a part of the method: load a mannequin, regulate the digicam and lighting, place a render on the canvas, and proceed designing from there.
Earlier than engaged on the complete interface, I constructed a slender proof of idea round that workflow. It might load a mannequin, transfer the digicam, change the sunshine, and return a picture to Figma. I used to be primarily watching how responsive the scene remained contained in the plugin window and the way a lot 3D management might match there with out making the instrument really feel unfamiliar to somebody who spends a lot of the day in Figma.
As soon as the MVP proved that I might obtain the efficiency and rendering high quality I needed inside Figma, I began engaged on the nice-to-have options and shaping the plugin’s total expertise.
Depth is break up between two components of the Figma plugin. Three.js handles the mannequin, digicam, supplies, and lighting contained in the plugin window, whereas a separate controller reads and updates the Figma doc. When a consumer selects a body, the controller sends it to the 3D scene as a PNG. As soon as the render is completed, it returns to Figma as a traditional picture layer. A 2x export doubles the PNG’s width and top whereas maintaining the layer at its meant dimension on the canvas, producing a sharper picture with out altering the composition.
I saved Figma’s inspector sample on the proper and used digicam, viewport, and timeline conventions just like instruments similar to Cinema 4D and 3ds Max. Export is straightforward: select a multiplier and place the picture in your Figma challenge.
Throughout digicam motion, Depth briefly reduces rendering, then restores fuller shadows and cleaner edges for the picture positioned in Figma.
When a mannequin makes use of clear or translucent supplies, Depth contains the scene background within the export so they maintain convincing reflections and refractions.
Creating the web site
For the web site, I needed guests to expertise what Depth does. I structured it across the order through which a render takes form: the customer meets a naked kind, adjustments its materials and setting, then reaches a listing of ultimate renders. The location begins nearly fully darkish and introduces data one layer at a time. The identical object stays seen as these variables change, making the impact of every choice simpler to learn.
The Opening Scene
I needed the opening to really feel cinematic whereas nonetheless giving guests some management over the scene. It introduces the visible language of the positioning earlier than the Kind, Materials and Surroundings chapters start, so its picture high quality carried extra weight than wherever else on the web page.
My first try used a reside 3D mannequin. It was probably the most direct extension of Depth: generate a kind, deliver it into the browser, and let the customer manipulate it. I attempted completely different textures and HDRIs, however the supplies and lighting by no means reached the visible high quality I needed for the opening. The scene behaved accurately, but it nonetheless seemed like an interactive 3D experiment reasonably than the picture I had in thoughts.
I ended making an attempt to render your complete hero reside. I generated two frames and used Seedance 2.0 to create a 360 diploma flip between them. That movement turned a 240 body sequence managed by the horizontal place of the mouse pointer, so shifting throughout the web page turns the island straight as a substitute of beginning a hard and fast video. I might now management the composition, floor element and environment of the central picture body by body whereas preserving a easy bodily response.
The completed hero nonetheless makes use of actual time 3D across the sequence. These layers provide depth and fast motion, whereas the island retains the picture high quality I couldn’t get from the primary absolutely reside model. The handwritten DEPTH title sits inside the identical composition. Collectively, they create the impression of 1 3D scene, despite the fact that the central picture is managed media.
The hybrid method comes with a media price, so the primary body can not rely upon the complete sequence being prepared. The web page paints a poster first, retains separate panorama and portrait media, and begins the heavier components later.
Kind and Materials
The identical kind stays in place because the web page strikes from Kind into Materials. When customers apply completely different supplies to the article, the brand new floor takes nearly 2 seconds to journey throughout the article, which
The management responds instantly; solely the floor takes time. The transition runs inside one opaque Three.js materials, mixing color, roughness, metallic response, floor element, and reflections earlier than the article is lit. Three.js nonetheless treats it as one stable object, so its edges and depth stay steady whereas the customer rotates it. If somebody adjustments their thoughts midway by means of, selecting the beginning materials sends the sweep again from its present place. Selecting a 3rd possibility clears the energetic change rapidly, then begins the newest choice.
Surroundings
The subsequent chapter opens the scene up. The thing remains to be there, now with its chosen floor, and the customer can flip the setting round it. I needed the reflections of a photographic world with out inserting that {photograph} behind the article, the place clouds, snow, and a horizon would crowd the black area and make the web page appear to be a standard 3D viewport.
I break up the job in two. An HDRI, a panoramic picture wrapped round a 3D scene to provide gentle and reflections, stays invisible. The mountain the customer really sees is a separate layer, sampled from actual terrain and drawn as a sparse area of factors. Its ridges and adjustments in top come from the mannequin, however the dotted texture retains it in the identical visible language as the remainder of the positioning.
Render
For the ultimate part, I needed to indicate how a render from Depth might transfer into an actual design workflow. After adjusting the scene, the customer locations the article inside a fictional retailer of summary figures, turning an remoted render into a part of a completed web site.
Within the catalogue, every determine is introduced as a mix of kind, materials, and lightweight, the identical selections the customer has simply explored.
You’ll be able to discover the web site at depth.fyi and open Depth in Figma.
