UI 3D Assets

Vectary

Vectary is like Figma for 3D design. You can easily create photorealistic 3D objects, elements and mockups. Then, add them right into your design, using their plugin for Sketch and Figma.

Blender

Blender is a free and open source 3D tool. You can use it for modelling, rigging, rendering, and more.

Adobe Dimension

Adobe Dimension is a new 3D tool made by the folks at Adobe. It is a relatively easy tool to work with compared to the other options in the market and you can easily export some assets to XD and Photoshop.

Superscene 2

Superscene2 is a 3D character library. You can have a combination of human and robot characters. It works with Figma and Sketch, you can even have the blender source files.

3ddd

3ddd is another 3D illustration character library. It has 15 unique illustrations and it also contains the blender files.

Toy Faces

Toy Faces is an inclusive 3D avatar library with 70 unique 3D avatars, different skin colors and more.

Avatarz

Avatarz is a collection of 3D avatars with more than 2000 combinations. You can choose between genders, types of clothes, hair, facial expressions and more.

Shapefest

Shapefest is a free 3D library with more than 160,000 high resolution PNG images. The library has different colors, textures and it works with different design tools.

Handz

Handz is another 3D free library created by ThreeDee. It is a hands gesture library, with different colors and variations of sleeves.

Add a 3D asset

For this example, we will use Figma and the Vectary plugin. Head over to Community < Plugins, look for Vectary and click on install.

Let's open our Figma file and add a 3D asset to the background of this art. To do so, go to the tab bar, click on Plugins and select Vectary 3D.

It will open a modal with a variety of mockups, let's look for some 3D shapes.

We will choose the one that looks like bubbles. You will notice that you can rotate the model just by clicking the 3D assets and moving the mouse to the left and the right.

Now that we are happy with the angle of our asset, click on Save view as Image and it will add the 3D model to the canvas in the PNG format.

Once we have the image, let's crop it so it can be handled easily.

Now, let's change the properties of the 3D asset and the values fot Saturation, Temperature, Tint and Highlights as you can see in the following image.

With the new version of the 3D model, let’s increase its size and place it as the background layer.

Finally, give 20% of Opacity to the 3D model so it can blend better with the background gradient.

Conclusion

Adding some 3D love to your designs will surely make a difference to the final products. You can use the tools mentioned in the sections above as these tools and libraries will definitely make working with 3D elements easier.