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.
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:
- Clone the Figma exercise file used in this tutorial.
- Download all the design assets used in this tutorial.
- Clone the completed Vectary project created in this tutorial.
1. Start a 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
- Resize the elements by selecting all of them, then drag one of these cubes inwards.
- Resize to about half the original size. You can also use the Transformation values in the sidebar as shown above.
- 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 order of the elements to match the screenshot 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.
- 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.
- Select all the elements.
- Change the “Extrude” value to 10.
- Select the “Mobile” and “iPhone 13 Bezel” elements. Change the “Extrude” value to 30.
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 – “Deep Purple”, “Eternal Pillars” and “Purple Rome” – so that they overlap each other like in the screenshot above.
- 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:
- 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:
- 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
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.
Remember, we want to apply the Lottie animation onto our plane copy, instead of directly into the geometry.
- Delete the first layer named ‘Rectangle’.
- 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
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.
- To get rid of the flickering in the white container, just move each of these elements within this group slightly 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 slightly forward to fix the flickering.
- 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.
- Add a plane by clicking on the cube icon in the top bar, then click on “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.
Our scene needs lighting, so let’s set that up.
- Click on the lighting icon on the top bar, then click “Rectangle 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
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.
- You may see the warning above. For this tutorial, we’ll go ahead and click “Continue Anyway”.
- 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.
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.
- 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
- Click the folder icon in the top bar, then click “Camera”.
- If you zoom out a little, you’ll see your camera pointing at the elements.
- Click “Camera View”. You are now in Camera View mode – you can move around to set the camera to a different angle.
- 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 a screenshot of the 3D scene by clicking “Download Image”.
- 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.
- 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”.
- In your Webflow project, go to the “Add” panel.
- Click “Embed”.
- Paste the embed code.
- Instead of the default height of 480, we’ll use 100%.
- Click “Save & Close”.
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!
