Member-only story
Building interactive 3D prototypes in Figma
If you are looking for a way to add some extra flair to your Figma designs, you should check out Spline. Spline is a foolproof 3D design app that every designer can get the hang of regardless of experience. It is way simpler to master than other sophisticated 3D software, such as Autodesk Maya, Cinema 4D or Blender. The learning curve for these is steep, so you can fall trying to reach the summit.
Spline does not hamper you with feature overload or an endless list of settings. Yet, you can still create models with parametric objects, polygonal editing and sculpting. Material assets help you keep textures and colours in check. Animation properties and web browser events allow you to bring your designs to life. Finally, React export enables you to integrate your scene into your projects. Not only can you create your visualisations for prototypes, but also you can display them on your websites.
Design interface
(Figma)
Let’s design a product details page for an e-commerce website. Imagine that our client is a cosmetic brand. Since we want to keep up with the trends, we are going to use prominent 3D product visuals for this project ;)
Set up layout
Our page has two main parts. We have all the necessary product details on the left: brand name, product name, ingredients and a call to action button. On the right, we place a regular rectangle as a placeholder for our three-dimensional serum bottles.
Prepare 3D scene
(Spline)
Let’s jump into the Spline app. At first glance, you may experience déjà vu, because the interface is quite similar to other 2D editing software. Like in Figma or Sketch, the layer list is on the left and all the properties are on the right. On the top, there is also a list of objects you can add to your view.
Import 3D model
You can mold and sculpt in Spline. But today I will be a bit lazy, or as my best friend would say, time efficient ;) and I am going to use a ready-made 3D…
