Create an illustration using shapes, transforms, and effects

In this project, we’ll use basic shapes and transforms to illustrate some oranges, apply effects to add depth and texture, and use text on a path to add a little zest. Let’s get started!

Open Figma Draw

We’ll be using Figma Draw to create this illustration. Figma Draw is a set of visual design tools within the Figma Design editor. You can open Figma Draw in any Figma Design file you have can edit access to. To switch to Figma Draw, select Draw in the toolbar. Learn more about Figma Draw.

Create the sliced orange

Our illustration features two oranges: a whole orange and one that’s been sliced in half. We’ll create the sliced orange first.

Create a background for the slices

We’ll start by using the Ellipse tool to create a background for the orange slices:

1. From the Shape tools menu in the toolbar, select Ellipse or press O on your keyboard.
2. Click on the canvas to add a 100 X 100 ellipse.
3. Use the Fill section in the right sidebar to change the ellipse’s fill to a light orange color, like FFE0BA.

Create the orange slices

Let’s add some slices to the background:

1. Select the ellipse and duplicate it using the keyboard shortcut:
   • Mac: Command D
   • Windows: Control D
2. Change the new ellipse’s fill to a darker orange color, like FBB15C.
3. Use the Dimensions fields in the right sidebar to change the ellipse’s Width and Height to 80 X 80.

The new ellipse isn’t looking very slice-like yet. We can use the arc tool to change that:

1. With the ellipse selected, hover your cursor over it until the Arc handle appears.
2. Click and drag the Arc handle to change the Sweep to 15%. You can also adjust this value using the Arc settings in the right sidebar.

That’s a nice slice! Rather than duplicating the layer to add more slices, we can use a transform to quickly create a repeating pattern.

1. With the ellipse layer selected, click Radial repeat in the right sidebar to apply a transform. If you look at the Layers section in the left sidebar, you’ll notice the slice layer is now nested within a transform group called Repeat group 1.
2. In the right sidebar, click the Repeat transform you just added to open the Transform settings.
3. Change the Count to 7 and the Gap to 0.1 Units.

Let's adjust the slices to make them look more realistic:

1. From the Layers section of the left sidebar, select the ellipse nested inside Repeat group 1.
2. Type 120 in the Rotation field in the right sidebar to rotate the layer.
3. In the Appearance section if the right sidebar, change the Corner radius to 2.

Because the ellipse is nested inside a transform group, any changes you make to the original layer are automatically applied to the rest of the transform group.

Before we align the layers, let’s give our sliced orange a white center:

1. Use the Ellipse tool to add a 10 X 10 ellipse to the canvas.
2. Change the fill to FFFFFF.
3. Select all three layers and use the Alignment settings in the right sidebar to align their Horizontal and Vertical centers.
4. Flatten the selection by right-clicking on the selection and selecting Flatten, or using the keyboard shortcut:
   • Mac: Option Shift F
   • Windows: Alt Shift F
5. In the Layers section of the left sidebar, you’ll notice that all three layers have been merged into a single layer called Vector. Double-click on the layer name and change it to Slices.

Create the sliced orange’s peel

Now that we have our orange segments, let's create a peel to contain them:

1. Use the Ellipse tool to create another 100 X 100 ellipse.
2. Change the fill to F89523.
3. Double-click on the layer in the Layers section and rename it to Peel.
4. Click and drag the Peel layer below the Slices layer in the Layers section.
5. Select the Slices layer and change its Height to 55. This will help create the sliced effect.
6. Select both layers, then use the Alignment settings to align their Horizontal and Vertical centers.

Use vector edit mode to modify the ellipse

We’re almost done with the peel. For this next part, we’ll use vector edit mode and the Shape builder tool to modify the ellipse’s vector network.

1. Select the Peel layer and press Enter to open vector edit mode.
2. Select the Pen tool in the toolbar or press P. The ellipse’s vector network currently has four points. We’ll use the Pen tool to connect the left and right points, creating a new path through the center of the orange.
3. Hover your cursor over the left point until it displays a dot . This indicates that we can add a new path to the existing vector network.
4. Click to begin drawing the path and move your cursor over to the point on the right. Click again to connect the path.

Now that the ellipse is divided into two regions, we can use the Shape builder tool to remove the top part of the shape:

1. Select the Shape builder tool from the secondary toolbar. If you don’t see the secondary toolbar, you may have exited vector edit mode. Select the ellipse and press Enter to open it again.
2. Hover over the top half of the ellipse to highlight the region, then hold the following modifier key and click to remove it from the shape:
   • Mac: Option
   • Windows: Alt
3. Press Enter to exit vector edit mode.

Before moving on, let’s group our layers:

1. Select all of the layers and group them together using the keyboard shortcut:
   • Mac: Command G
   • Windows: Control G
2. Double-click on the layer name in the left sidebar and rename it to Sliced orange.
3. Type -30 in the Rotation field to rotate the Sliced orange layer.

Apply an inner shadow

Our sliced orange is taking shape! To finish it up, we’ll apply an inner shadow to the orange’s peel to give it a little depth:

1. Select the Sliced orange layer.
2. In the Effects section of the right sidebar, select Inner shadow from the dropdown menu.
3. When you add an effect to a layer, you can use the settings panel to configure how it appears. Use the effects settings to configure the inner shadow:
   • X postion: 4
   • Y position: -8
   • Blur: 0
   • Color: 000000
   • Opacity 25%

The shadow still looks a bit harsh. We can use a blend mode to create a more subtle effect.

1. From the effects settings panel, select Blend mode.
2. Choose Overlay from the blend mode options. Overlay multiples dark colors. Because the base color is light orange and the blend color is black, the result color is a dark orange that looks more like a natural shadow.

Create the full orange

The sliced orange looks great! Let’s set it aside and create the full orange.

1. Select the Ellipse tool from the toolbar and click to add a 100 X 100 ellipse to the canvas.
2. Change the fill to F89523.
3. Double-click on the layer name and rename it to Full orange.
4. In the Effects section of the right sidebar, select Inner shadow from the dropdown menu.
5. Use the effects settings panel to configure the inner shadow:
   • X postion: 20
   • Y position: -20
   • Blur: 0
   • Spread: 0
   • Color: 000000
   • Opacity 25%
6. In the effects settings panel, click Blend mode and choose Overlay.
7. Click and drag the Full orange layer on the canvas until it’s positioned slightly behind the sliced orange, then right-click and select Send to back.
8. Select both layers and use the shortcut to group them together:
   • Mac: Command G
   • Windows: Control G
9. Rename the group to Oranges.

Add texture to the illustration

Our illustration is coming together nicely! To give it a subtle, hand-drawn look, we'll use the Texture effect:

1. Select the Oranges layer.
2. In the Effects section of the right sidebar, select Texture from the dropdown menu.
3. Use the effects settings to configure the texture:
   • Size: 2.5
   • Radius: 0.8

Add text on a path

Let's finish our illustration by adding a curved label using text on a path. Text on a path lets you create text layers that follow the paths of a vector object, such as a shape or brush stroke.

When you add text to a path, the vector object’s fill and effects are transferred from the vector layer to the text layer, causing the vector object to disappear from the canvas. Because we want the text to curve around the full orange, we’ll duplicate the Full orange layer and use it as the path for our text.

1. Select the Full orange layer and duplicate it using the keyboard shortcut:
   • Mac: Command D
   • Windows: Control D
2. Select the duplicated layer and press K to open the Scale tool.
3. In the Scale section of the right sidebar, change the layer’s width to 120. The layer’s height will automatically update to 120.
4. Select the Text tool in the toolbar or press T.
5. Hover over the edge of the duplicated layer until you see the text on a path icon appear near your cursor.
6. Click to add a new text layer and type Fresh squeezed. Notice how the vector layer’s fill and effects are automatically applied to the text layer. You can change these properties at any time using the settings in the right sidebar.
7. Select the text layer and change the font weight to something heavier, like Bold and the font size to 16.
8. Use the handle to adjust the text’s placement on the curve until its right where you want it.

What’s next?

Great work! You just created an illustration using shapes, transforms, effects, and text on a path. We only scratched the surface of what’s possible in Figma Draw. If you’re looking for more ways to explore, try:

• Incorporating brush strokes to add a hand-painted, organic look
• Experimenting with different effects and blend modes
• Creating additional fruit illustrations to build a collection

If you design something you're extra proud of, we'd love to see it! Mention us on X (formerly Twitter) @Figma or publish it to the Figma Community.