How to add a shape

There are three drawing tools available to use when drawing shapes: the Pen tool (shortcut P), the Rectangle tool (R), and the Ellipse tool (E).

Draw a shape by selecting the tool, clicking the canvas, and dragging your mouse over the canvas while holding down the mouse button.

Shape properties

Use Fill to set the shape's fill color. For drawing the path line itself, use the Stroke option. As a default, both the cap and the join style are set to "Round".

In addition to the Width, you can also select the length of the stroke, with Start and End being the points at which the stroke starts and ends relative to the overall path length. You can offset these points with Offset.

View all properties that aren't specific to shape elements on the element properties page.

Create a rounded shape

Set a border radius to round off the corners of a shape. This doesn't work for Bézier points, so you must first convert them to straight points by double-clicking them while in shape editing mode.

How to animate a shape path

It is possible to animate the shape by adding keyframes, as shown below.

Unboxed vs. boxed shapes

Shapes can be defined in two ways:

  • Unboxed shapes are composed of absolute points. Its dimensions are determined by the bounds of all its points. Shapes drawn with the Pen tool are unboxed shapes by default.
  • In boxed shapes, points are defined as percentages of the bounding box. As the bounding box has fixed dimensions, it is easier to animate and make responsive. Shapes drawn with the Rectangle or Ellipse tool are boxed by default.

Boxed shapes are best for responsive templates. You can maintain the shape's width and height ratio by using the Aspect Ratio property.

Previous page
Next page