Studio's blank canvas enables you to create bespoke content with virtually no boundaries, which provides you with endless creative freedom for your designs. We understand, however, that sometimes, creativity may extend past the limits of the standard triangles, squares, and circles in our Shape Menu. But did you know that instead of jumping over to another design tool to create more customized elements, you can use our Pen Tool to create custom shapes right in Studio?
This guide covers creating custom shapes with the Pen Tool. For information on the shape tools available in the Shape Menu, please refer to this guide.
To draw a custom shape:
Select the Pen Tool icon in your toolbar or press ‘P’.
Click anywhere on the canvas and start to draw a line.
To stop drawing the line, click again and hold the mouse down. Alternatively, you can hit the return key. You can create an open curve or a closed shape by clicking on the starting point.
To create a curved line, also known as a bezier curve, click and hold the mouse down. As you move your cursor, you will get handles to adjust the curve.Â
Note: To adjust just one handle of the curve, hold down ALT / OPT.
When you’re finished with your shape, press ESC or ENTER to save the shape.
After you exit editing mode for your shape, you can still make edits:
If your shape is saved and completed, you can re-enter edit mode by either double-clicking on the shape or selecting the shape and pressing ENTER
If the shape is an open curve (or line), you can double-click on either the beginning or end point of that shape and continue to draw.
If you’d like to add another point when editing a shape, simply hover over the edge of the shape, and when the plus sign appears, click to add it.
Note: To switch between normal and bezier curve modes, hold down OPT / ALT before clicking a point on your shape.
Formatting your shape:
To format your shape, select the shape and navigate to the Design tab.
Here, you can alter the fill color (solid or gradient), opacity, stroke, and drop shadow.
You can also resize and rotate the shape however you need.
And that’s it! You’ll now have a formatted custom shape for your experience. All custom shapes will function as SVGs, and you’ll be able to apply interactions and animations to the shape.