Create an illustration in Figma design
- Product: Figma design
- Topics: Shapes, color, groups, layer organization, frames
- Length: 20 minutes
In this project, we’re going to illustrate a magic potion in Figma design. Creating illustrations is a fun way to become familiar with the Figma editor and tools. No worries if you’re new to illustrating; we’ll walk through using basic shapes, groups, colors, and frames. We’ll also learn about how layer organization can impact your designs.
If you follow along step-by-step, your final illustration will look similar to the following:
We’ll create our magic potion by doing the following:
- Create the bottle
- Fill the bottle with magic potion
- Top it off with a cork
- Add some final details
- (Optional) Frame your design and export it
Create the bottle
We’re going to create the bottle using the Ellipse tool, the Rectangle tool, and a group.
Add the shapes
The Shape tools are located in the toolbar. Click the arrow to reveal the other shape options.
We’re going to add one ellipse and two rectangles to the canvas:
- To add an ellipse: Select the Ellipse tool or press [O] and click on the canvas
- To add a rectangle: Select the Rectangle tool or press [R] and click on the canvas
Tip: You can also add shapes by clicking on the canvas and dragging your cursor. You’ll see the shape’s dimensions under the bottom edge as you resize the shape. Hold Shift while dragging the shape to create perfect squares and circles.
Resize the shapes
Now that we have our building blocks, it’s time to resize them. You can resize objects by either selecting a handle and dragging your cursor or by typing the desired dimensions in the Width and Height fields in the Design panel.
Use either method to resize the shapes to the following dimensions:
- Ellipse: 200 W x 200 H
- Rectangle 1: 100 W x 100 H
- Rectangle 2: 120 W x 40 H
On the 120 x 40 rectangle, we also need to round the corners so the lip of our bottle doesn’t look so sharp. Select the rectangle and enter “10” in the Corner radius field in the Design tab.
Align the shapes
Now that we have our shapes, we should align them so they look more like a bottle. Click and drag a shape to move it around the canvas. As you move objects, you’ll notice red guides appear. These help you align the object to other objects on the canvas.
Tip: After placing your shapes, select all of them and use the Align horizontal centers setting in the Display tab to make sure everything is nice and centered.
Align the shapes so that they look similar to the following:
Group the shapes
Our bottle is looking great. Let’s organize things before continuing. If you look at the Layers panel in the left sidebar, you’ll notice that each shape is on its own layer.
We can simplify things by grouping these layers together. Groups allow you to combine layers so they can be treated like a single object.
To group multiple layers, select them and use the shortcut:
- macOS: Command + G
- Windows: Control + G
You’ll notice that the Layers panel in the left sidebar now only displays one layer named “Group 1”. Naming layers is another great way of staying organized in Figma. Double-click on the layer and rename it to “Bottle”.
Add some color
Let’s give our bottle some color. Select the bottle and click on the Fill setting in the right sidebar to open the color picker. For this tutorial, we’re going to use the color code #DEDCF9. You can enter the code in the Fill field or use the color picker to select a different color.
Once you’ve changed the fill color, it’s time to lock this layer. Locking layers helps prevent objects from incorrectly getting moved or modified. To lock this layer, select the bottle shape and click the Lock icon in the left sidebar. To unlock a layer, click the Unlock icon.
Our bottle is complete. Now it’s time to fill it with the magic potion.
Check in: Does your file look similar to the following?
Create the magic potion
Add an ellipse
Use the Ellipse tool to add an ellipse to the canvas and resize it to 175 x 175.
Drag the ellipse on top of the bottle shape and use the red guides to help you align it. Change the ellipse’s fill color like you changed the bottle color in the last section. For this project, we’re going to use the color code #E99BF4. You can enter this code in the Fill field or use the color picker to select a different color.
Modify the ellipse
We’re going to use the Edit object setting to make it look like our potion is sloshing around in the bottle.
Select the ellipse and click Edit object in the toolbar to enter vector edit mode. Vector edit mode lets you manipulate the individual points of an object without changing the entire shape.
While in vector edit mode, click on the top point of the ellipse and drag it down and to the side. If you get stuck, watch the following GIF:
When you’re satisfied with how your potion looks, click Done in the toolbar to exit vector edit mode. Next, we’ll add some bubbles.
Add bubbles using the ellipse tool
The Ellipse tool is getting a workout in this project. We’re going to use it to add some bubbles to our potion bottle.
Drag the Ellipse tool to create several small bubbles. They don’t all have to be the same size but make sure they are small enough to fit inside the bottle. We used a mix of 6 x 6 and 12 x 12 ellipses. Before moving on, be sure to change the fill of your ellipses to something a bit more colorful. We used the color code #985DF6.
Once you’ve placed the bubbles in your bottle, drag your cursor over all of the bubble ellipses and the larger potion ellipse and them group them using the shortcut:
- macOS: Command + G
- Windows: Control + G
You’ll notice that all of the ellipse layers in the left sidebar are condensed into one layer named “Group 2”. Rename the layer to “Potion” and click to lock it.
Check in: Does your file look similar to the following?
Create the cork
We'll create a cork using the Rectangle tool.
Add a rectangle to the canvas and resize it to 75 x 75. Use the Corner radius setting in the Design tab to round the rectangle’s corners to 25.
Change the rectangle’s fill to #CE856C and rename the layer to “Cork”. Drag it over to the lip of the bottle.
Organize your layers
We don’t want the cork to be on top of the bottle so we’ll need to reorder the layers in the left sidebar. The order of layers determine how objects are displayed on the canvas.
Let’s move the “Cork” layer under the “Bottle” layer so that only the top part of the cork displays. This will help it look like it’s inside the bottle. Select the “Cork” layer and drag it down below the “Bottle” layer. Once you’ve moved the layer, click the to lock it.
Add glare lines
Our potion is almost complete. We just need to add some glare lines to help it stand out.
Add two rectangles to the canvas and resize one of them to 20 x 10 and the other 40 x 10. Use the Corner radius setting in the Design tab to round both rectangle’s corners to 20.
Change both of the rectangles' fill to #F2F2FF. Move them to the lip of the bottle. Select both rectangles and group them using the shortcut:
- macOS: Command + G
- Windows: Control + G
Rename the layer to “Glare” and lock it.
Check in: Does your file look similar to the following?
(Optional) Add your illustration to a frame and export it
If you’d like to export your illustration from Figma, you can add your layers to a frame. Frames are one of the main building blocks of Figma. Like groups, you can use frames to organize all of your design elements in a single place.
You can add a new frame using the Frame tool in the toolbar and drag content into it or you can directly select and convert existing objects into a frame. Let’s do the second option.
Unlock your layers and drag your cursor over your illustration to select all of them. Once everything is selected, right-click and select Frame selection. Your four individual layers are nested under one layer named “Frame 1”. If you click the arrow next to the name, you’ll see that the named layers still exist and can still be selected and edited individually. Rename the new layer to “Magic Potion”.
If you’d like to export your illustration, select the “Magic Potion” layer and use the Export settings in the right sidebar to export your design.
What’s next?
Congratulations! With only a few basic shapes, you illustrated a magic potion in Figma. If you’re looking for another challenge, try recreating the bear illustration below. It was created using the exact same tools we learned in this project. If you create something you’re extra proud of, share it to the Figma Community.
We can’t wait to see what you design next!
