Two-dimensional Lottie animations are great. But what if you could showcase Lottie animations in 3D designs? You can, even if you don’t know anything about 3D.

Here's what we'll be building
Here's what we'll be building

In this tutorial, learn how to create a beautiful 3D perspective mobile mockup in Vectary. In the process, you’ll apply Lottie animations onto your 3D elements and import custom 3D elements from Iconscout. Then, you’ll use your 3D art in your Figma design prototypes and embed an interactive version on your website.

Watch the video tutorial above, or scroll down for a written version. We’ve provided these assets so you can follow along or refer to if you need help:

1. Start a new project in Vectary

Click "+ New Project" in Vectary
Click "+ New Project" in Vectary
  • If you don’t already have an account, sign up for one with Vectary (it’s free!).
  • Go to the Vectary dashboard and click “+ New Project”.

2. Import SVG files into Vectary

When you start a new project, Vectary will give you the option of starting from different templates. In this tutorial, we’ll start from scratch with a blank template.

  • Choose the first option – “Blank”.
  • Drag and drop all the SVG files provided in the design assets folder.
  • Wait for Vectary to load the SVG files.

3. Edit and resize elements

Resizing in Vectary
Resizing in Vectary
  • Resize the elements by selecting all of them, then drag one of these cubes inwards.
Edit the Transformation values
Edit the Transformation values
  • Resize to about half the original size. You can also use the Transformation values in the sidebar as shown above.
Reangle the elements
Reangle the elements
  • To reangle the elements, drag the red circle.
  • Drag the blue arrow upwards to move all the elements above the plane.

4. Organize the elements

Arrange the elements
Arrange the order of the elements
  • Arrange the order of the elements to match the screenshot above.
Arrange the elements
Arrange the elements above
  • Move the “Orange”, “Purple” and “Sky Blue” elements to match the screenshot above.
  • Drag the blue arrow to bring the elements to the bottom.
  • Drag the green arrow to bring the elements to the front.
Arrange the elements
Drag these elements to the right and left
  • Drag the “Eternal Pillars” element to the right.
  • Drag the “Deep Purple” element to the left.

5. Add thickness (i.e. extrusion) to the elements

Right now, the plane is looking flat – so let’s add some thickness.

Add extrusion
Add extrusion to all elements
  • Select all the elements.
  • Change the “Extrude” value to 10.
  • Select the “Mobile” and “iPhone 13 Bezel” elements. Change the “Extrude” value to 30.
Bring these elements forward
Bring these elements forward

To avoid hiding some of the elements, let’s bring them to the front of the mobile screen.

  • Select all the elements except for the “Mobile” and “iPhone 13 Bezel” elements.
  • Drag the green arrow to move them forwards.
Arrange the big card elements
Arrange the big card elements
  • Arrange the big card elements – “Deep Purple”, “Eternal Pillars” and “Purple Rome” – so that they overlap each other like in the screenshot above.
Arrange the small card elements
Arrange the small card elements
  • Arrange the small card elements – “Orange”, “Purple” and “Sky Blue” – in the same way.

6. Convert the elements into geometries

Next, we need to convert the elements into geometries. This turns them into 3D materials, allowing us to change their colors, materials and apply other 3D functions.

But once you convert an element into geometry, you won’t have access to the SVG Object transformations anymore – so make sure that you’ve applied all the SVG transformations you need before converting.

So let’s convert our elements into geometries:

Convert to geometry
Convert to geometry
  • Select the “Mobile” element. Double click on the element to convert to geometry, then click “Bake”.
  • Do the same for the “iPhone 13 Bezel” element.

Now we’ll convert the small card elements into geometries:

Delete the group
Delete the group
  • Select the “Orange” element and convert it into geometry.
  • In the “Orange - baked” element, delete the Group shown above. This will get rid of the art layer so you’ll be left with a blank card.
  • Convert the other small cards into geometries and delete the same Groups to get rid of the art layers.

Next, we’ll convert the big cards into geometries. If you try adding Lottie animations directly to these geometries, your animations may look stretched out. One workaround is to create a duplicate of the element and converting it to a plane – then applying the Lottie animation onto it.

But we’ll still need the original copy of the elements, as converting them to planes will get rid of the text, avatar and button elements on the cards.

Let’s set the duplicates up:

  • Select each big card element and press Ctrl + D, or right click and select “Duplicate”.

7. Add Lottie animations to your 3D designs in Vectary

Add a Lottie animation
Add a Lottie animation

Your 3D scene is finally ready to add Lottie animations. We’ll start with the small cards.

  • Select any one of the small cards.
  • Look for the “Color” icon in the sidebar.
  • Choose “Animation” from the drop-down menu.
  • Click “Upload Lottie / GIF”.
  • Select your Lottie JSON file – we’ll use S Orange.json that’s included in the design assets folder.
  • Apply the other Lottie animations – S Light Blue.json and S Purple.json onto the other small cards.

Next, let’s add animations to the big cards. Let’s start with the “Deep Purple” card.

  • If you’ve been following the tutorial, you should have two copies of this card.
  • Convert one copy – the “Deep Purple” element – into a plane by clicking “Convert to Plane” on sidebar.
  • Convert the other copy – the “Deep Purple 1” element – into geometry by double clicking it, then clicking “Bake”.
  • Expand the layers in the baked copy.
Delete the rectangle
Delete the rectangle

Remember, we want to apply the Lottie animation onto our plane copy, instead of directly into the geometry.

  • Delete the first layer named ‘Rectangle’.
Move the plane
Move the plane
  • Drag the plane into the geometry element.
  • With the plane selected, go to the Color settings in the sidebar.
  • Choose “Animation” from the drop down menu.
  • Click “Upload Lottie / GIF”.
  • Select your Lottie JSON file – we’ll use L Purple.json for this card.
  • Follow the same steps for the other two big card elements.

To see your Lottie animations come to life, click “Preview” in the top right corner of the screen.

8. Fix white lines appearing on elements

These white lines occur thanks to z-fighting
These white lines occur thanks to z-fighting

You may see flickering white lines appearing on your elements. This is thanks to something called z-fighting – in 3D rendering, that happens when two or more geometries share the same position. For example, take a look at each big card element: the bottom faces of the text, avatar and button elements share the same position as the bottom face of the white container.

Move the elements in the card
Move the elements in the card
  • To get rid of the flickering in the white container, just move each of these elements within this group slightly forward.
Move this card forward
Move this card forward
  • We’ll also move this whole group a little forward for a cool perspective effect.
  • Repeat the steps for the other two big cards.
Move the text and button elements in the “Mobile - baked” element
Move the text and button elements in the “Mobile - baked” element 
  • Move the text and button elements in the “Mobile - baked” element slightly forward to fix the flickering.
Move the icons
Move the icons
  • Move the last group in the “Mobile - baked” element upward and forward.
  • Move the icon elements slightly forward to fix the flickering.

9. Add lighting and background elements

Our 3D design is looking great so far, but it’s a bit sparse – so let’s add lighting and background elements.

Create a plane
Create a plane
  • Add a plane by clicking on the cube icon in the top bar, then click on “Plane”.
Enlarge the plane
Enlarge the plane
  • Enlarge the plane by dragging one of the cubes. It should be large enough that we won’t see any edges, unless we zoom out.
  • Go to the color settings on the sidebar. Change the color to #6A08FC.
  • We’ll use the same color for the background. Make sure no element is being selected, go to the Background setting on the sidebar, and change the color to #6A08FC.
Add a rectangle light
Add a rectangle light

Our scene needs lighting, so let’s set that up.

  • Click on the lighting icon on the top bar, then click “Rectangle Light”.
Move the light
Move the light
  • Select the “Rectangle Light” element, and move it forward, so that it’s not directly shining above the mobile phone.

10. Import 3D assets from Iconscout

Iconscout has thousands of 3D icons and illustrations you can download, modify and use in your projects
Iconscout has thousands of 3D icons and illustrations you can download, modify and use in your projects

Next, we’ll add other 3D elements into our scene. You don’t have to create them from scratch – Iconscout has thousands of 3D icons and illustrations you can download, modify and use in your projects. For this tutorial, we’ve included the 3D elements we’ll be using in the design assets folder, but you can head to Iconscout and download any assets to use in Vectary.

  • To import 3D elements into Vectary, drag and drop OBJ files into Vectary.
Click "Continue Anyway"
Click "Continue Anyway"
  • You may see the warning above. For this tutorial, we’ll go ahead and click “Continue Anyway”.
Click “Fit Object”
Click “Fit Object”
  • Click “Fit Object”. This resizes the imported 3D elements so that they aren’t too large or too small for the scene.
  • Give each element a color. To do so, select it and go to the Color setting on the sidebar. We’ll use the same color as the background – #6A08FC.
Arrange the 3D elements
Arrange the 3D elements

Now, the fun part – arrange all the 3D elements to fit the scene. You can change the size, position and angle of each element. Here’s how we’ve arranged the 3D elements in this tutorial, but you can arrange them however you like.

11. Convert BLEND files to OBJ with Blender

Some 3D illustrations on Iconscout aren’t available as OBJ files, but you may be able to download them as BLEND files. Files with the BLEND extension are created with Blender, a free and open-source 3D application.

To use BLEND files in Vectary, you’ll need to convert them to OBJ files.

Export as OBJ
Export as OBJ
  • Download the Blender software.
  • Open the BLEND file with Blender.
  • Click File > Export > Wavefront (.obj).
  • Choose a folder to save your OBJ file.

And that’s it! You can drag and drop this OBJ file into Vectary.

12. Edit the camera view angle

Add a camera
Add a camera
  • Click the folder icon in the top bar, then click “Camera”.
Zoom out to see the camera
Zoom out to see the camera
  • If you zoom out a little, you’ll see your camera pointing at the elements.
Click “Camera View”
Click “Camera View”
  • Click “Camera View”. You are now in Camera View mode – you can move around to set the camera to a different angle.
Click "Exit Camera"
Click "Exit Camera"
  • To exit Camera View, click “Exit Camera”.

13. Export the 3D art to Figma

Now that we’re finally done with this 3D scene, we can use it in our Figma design prototypes.

Download as an image
Download as an image
  • Download a screenshot of the 3D scene by clicking “Download Image”.
Drag and drop the screenshot into Figma
Drag and drop the screenshot into Figma
  • Drag and drop the screenshot into Figma.
  • Resize it to fit your design.

14. Embed the Vectary 3D scene in Webflow or other websites

Having a static 3D illustration in Figma is cool, but what if you wanted to export an interactive 3D scene? You can do that too. With Vectary, you can generate a code to embed your 3D scene in WordPress, Webflow, Wix or any other website.

In this tutorial, we’ll teach you how to do this with Webflow.

Copy the embed code
Copy the embed code
  • To generate an embed code, click “Share” on the top right corner.
  • Toggle on “Share to web” and “Anyone with the link can Clone”.
  • Click “Copy embed code”.
Add an embed element in Webflow
Add an embed element in Webflow
  • In your Webflow project, go to the “Add” panel.
  • Click “Embed”.
Paste the embed code
Paste the embed code
  • Paste the embed code.
  • Instead of the default height of 480, we’ll use 100%.
  • Click “Save & Close”.
The 3D scene is now on Webflow
The 3D scene is now on Webflow

Your interactive 3D scene is now on Webflow.

3D graphic design has never been easier

With Vectary, you could set up engaging, interactive 3D scenes like this in less than an hour, then embed them in your websites without knowing how to code. In the past, creating and implementing 3D designs like this could take a lot more time – and an entire team of people.

And with its support for Lottie animations and the ability to import any OBJ file, it’s really never been easier to create interactive 3D scenes. So go crazy with Vectary, Lottie animations and Iconscout’s 3D assets – and don’t forget to share your awesome creations with us on Twitter!