How to make 3D Interactive UX Design using Spline, Figma, Web html/css ?

You might have been inspired by many interactive elements floating around websites with exciting interactions. These interactions can be gestures that are in control with the track-pad, mouse controls, or mobile gestures & scroll. Meanwhile, users’ visual eye moments are interacting and understanding. This stimulates dopamine neurologically and increases interest and excitement.

Ok here, I will walk you through the example in which I experimented to explain the process & implementation. Let’s get started!

Start with ideation and creation

To set ideas for creative visualization

• Analyze the problems in user behavior and user needs.
• Brainstorm, ideate, get feedback, iterate, and form a design structure.
• Creatively visualize the solution and imagine how users would interestingly go through the concepts with interactive experiential practices.
• This visual communication defines the user understanding and decisions making in UX terminology.

For example, I found my cousin’s child was playing with a train toy that goes around the track (remembers your childhood). These kids play lots of mobile games & more interactive sensations. His problem was to make the train toys into the games, but he was bored switching toys & games.

Image as remembering childhood days !

As his questioning banged my head in defining to form a solution to bring toy train into the digital interaction. I visualised a landing page where a train is moving around some spaces & that can be orbit rotated to view different destination of the train. So he can interact with it in exploring & playing.

Create the Wireframes, & structure in Figma

Start dumping your ideas & Figma to form wireframes

• Open Figma and sketch out your idea & figure mapping.
• Create the 12 grid-system & place the text fields or other elements.
• Stylize the Text field as per the theme you visualized.
• Mark the center of the 3D object & perspective grids.

Wireframe — Marking Perspective & Object (Figma)

Now jump into the 3D software — Spline ❤

Create the 3D shape for the object you had in mind.

• Open Spline 3D Software. (It’s easy if you’ve worked on any 3D software)
• Understand the Material, Colour, Lighting & Camera.
• Create objects by shaping or importing elements from libraries to modify.
• Place the object element according to the perspective grids.

3D object & perspective wireframes (Spline)

Next, animate the 3D elements using States

Add motion to the element & by exploring state options

• Select the layer of 3D element & set base-state & default state.
• Create an event for the animation & select the behavior or interaction type.
• Select each state & change the value to animate Scale, rotation, and position. (You can even animate the camera in a scroll by selecting the camera layer)
• Customize the rewind, repeat, transition, duration & delay options.
• Click the play button & preview while making changes in values.

Animating element by changing rotation values (Spline)

Now you’re set to export the url or embed code

Export the URL or embed code to build it on the website

• Check the settings of animation & interaction.
• While exporting adjust export options & preview to check how exactly you want the 3D element to function on the web.
• Click on the Copy icon to copy the URL or embed code.
• Add the embed code in Webflow or another platform that builds the websites.
• Or copy the URL & view the preview in a new tab to inspect the code.

How to export code or embed code of 3D element (Spline & Chrome)

It’s time to bring design live through HTML

Build the HTML & CSS code to implement 3D interaction

• Start coding the HTML in Visual Studio or any other code writer.
• Inspect the 3D element URL in the chrome browser.
• Copy the elements & script & add them to the html body.
• Copy the CSS properties from the Figma-inspect for Text styling.

Composing html-css & integrating scripts (Visual studio)

Boom! You can run the code and publish the website

• Keep the code clean and save the HTML folder.
• Now run the code & preview the live 3D interactive website.
• Now you can publish your websites to your custom domains.

Download code from Github

As an interactive solution, now my cousin’s child is happy playing with his 3D interactive train digitally on his desktop. Similarly i hope this would help you also for creating interesting & intuitive 3D interactive UX on your websites.

Quick recap

• Create ideation & visualisation for the problems
• Make the wireframes & structure it in Figma for UI
• Create 3D elements in Spline, animate & set interactivity
• Export the code script & add it in html
• Copy & add the CSS style properties from Figma inspect
• Save the HTML folder to preview & publish