Creating 3-D Shapes Using Adobe XD

Introduction

Hi again! It’s me, Officiall_Studios. Yesterday I posted a tutorial to help people get started with Adobe XD, and @LuaBearyGood recommended a plugin that “blends” shapes together, that can be used to make 3-D shapes! This tutorial is going to be all about how to make 3-D shapes with XD!

Installing The Plugin

Go into the plugins page at the bottom left, click the plus arrow next to the word “Plugins”, and then search “blender”


Next we need to actually install the plugin. Click on the plugin “Color Blender”, and then click “Install”. After it’s installed, it’s time to make some shapes!

Cubes

The first shape we are going to make is a cube, which we can make with two squares. Put one behind the other, and make the one behind it a little bit darker.

Make sure borders are turned off! Now, select both of them by clicking, holding, and dragging with the mouse tool, and then click the plugin to activate it.

It should pull up a little window asking you for the number of steps. Pro Tip: The higher the number, the higher the quality. I’m going to put in an even 100. BOOM! Look at that cube! If you hover your mouse over it you’ll notice it’s made up of a bunch of rectangles! You can do the same thing with rectangular prisms!

Rectangular Prisms

These are basically the same as the cubes, only with rectangles! So that I don’t have to repeat myself, here’s an example video with some blue rectangles.


And there are some rectangles! Let’s try making a pyramid!

Pyramids

Start by making a triangle, with the same hight value as width value. Duplicate it, and make it’s fill a little darker. (Sound familiar?) Now, there are two ways to do this. Either make the triangle directly below the other one, or make it at an angle.

Congratulations! You’ve made a pyramid!

Cylinders

These are the hardest shapes to create, and they never look fully like spheres, but it’s fun to try! Let’s start by making a tiny circle. Duplicate it, and make it much larger. Then make it darker, and put it below our original circle in layers.


Now it’s time to use the tool. It’s the same process as all the other shapes.
I have tried, and it is not possible to make spheres. If anyone can figure it out, feel free to let me know! It’s time for one more note.

Gradients

Now, this doesn’t look as realistic, but it looks really cool. Try making a shape, but making one shape a completely different color from the other.

Text

Thanks to @LuaBearyGood for this, but you can also create 3-D text! It’s the same process as the other shapes. Duplicate it, then change the color and position. Here’s a video

Outro

Well, thanks for reading! If you have any ideas for the next tutorial in this Adobe XD Series, feel free to let me know! Have a great day! :smile:

13 Likes

Another small tip (feel free to add this if you want) but this effect also works on text, meaning its quite useful for building a foundation on logos, also if you blend then change the colour of the top part slightly it creates a pretty cool effect, and also adding a feint border to the top part gives a small ‘bevel’ illusion.

Thanks for the recommendation! I’m adding this to the tutorial!

1 Like

Hey everyone! The YouTube video for this tutorial is now live! https://youtu.be/053aVCUFYD0.