Shapes

Shapes are one the most common types of layers in Sketch documents. You can add and edit pre-made shapes, or create your own using the Vector tool .

Adding shapes

How to Add Pre-made Shapes

To add a new shape, click the Insert button in the toolbar or the Insert menu item in the menu bar, select Shape option and then choose the type of shape you want to add.

You can also use the following keyboard shortcuts to add some pre-made shapes:

R	Rectangle
O	Oval
U	Rounded rectangle
L	Line

Click and drag anywhere within your Canvas or Artboard to add your shape. You’ll see the shape’s dimensions next to your cursor as you drag.

Hold ⇧ as you click and drag to make your shape’s height and width equal.

Hold ⌥ as you click and drag to draw your shape from its center (instead of the top-left).

Hold the Space bar as you click and drag to change your shape’s origin as opposed to its size (handy if you started in the wrong place).

How to Add Shapes with the Pencil Tool

Press P or choose to Pencil from the Insert menu to enable the Pencil tool. From there you can draw any shape you like. When you’ve finished drawing, Sketch will smooth curves and simplify the path you’ve created.

How to Add Shapes from SVG Code

You can create new shape layers by copying and pasting SVG code anywhere on your Canvas.

Editing shapes

How to Edit Shapes in the Inspector

When you select a shape, you’ll see options for editing that shape in the Inspector. The star , for example, lets you adjust its radius and number of points.

How to Edit a Corner Radius

Click on a rounded rectangle to adjust its Corner Radius in the Inspector.

You can choose between Round and Smooth corners, changing how the layer’s corners are drawn. Smooth corners have curvature continuity and allow you to create ‘squircles’, the shape used by Apple in their interfaces.

Tip: When you’re in vector editing mode you can select an individual corner point to adjust an individual corner’s radius.

How to Flip Shapes

You can flip shapes horizontally or vertically using the two buttons in the Inspector. These buttons will stay selected (so you can click again to reverse the change) unless you flatten the shape and commit the changes using Layer > Combine > Flatten.

How to Rotate Shapes

There are a few ways to rotate your shapes in Sketch.

You can enter a value in degrees in the Inspector. This can be a positive or negative value to rotate clockwise or counter-clockwise, respectively.

Alternatively, select your shape and click the Rotate button in the toolbar. Then click and drag anywhere outside your shape to rotate it.

To change the axis on which your shape rotates, simply click and drag the crosshair at its center to the point you want to rotate around. To reset this, simply reselect your shape.

Finally, you can quickly rotate any shape you’ve selected by holding ⌘ and dragging one of its selection handles.

Holding ⇧ when you rotate a shape will do this in 15° increments.

You can commit these changes and reset the rotation value to 0° by flattening the shape (Layer > Combine > Flatten).

How to Edit Shapes in Vector Editing Mode

To edit a shape in vector editing mode, either double-click on it, or select it and press the Enter key.

When you enter vector editing mode, you’ll see circular points connected together by paths. Click on any of the circular points and drag them to change the shape of a layer.

To add a new point, hover over a path between two points and click to insert. To delete a point, select it and press the Backspace key.

The paths between different points on your shape can be straight lines or curves, depending on the kind of point connecting them. Double-click on a point connecting straight paths to change it to a curved path.

When you change a point to create a curved path, you can use the two handle control points that appear to edit the curve itself.

Flattening your shape (by selecting Layer > Combine > Flatten ) will create points at each end of the curve.

For further information about Sketch’s vector editing tools, take a look at the Vector Editing section.

How to Edit Shapes Using the Transform Tool

To use the Transform tool , select one or more shapes and head to Layer > Transform > Transform. Alternatively, you can use the keyboard shortcut ⌘ + ⇧ + T. You can also add the Transform tool to your toolbar via View > Customize Toolbar….

The Transform tool adds points to each corner of your shape(s), as well as points in between each corner. Click on a point and drag it to transform and skew your shape(s).

If you click and drag on a point between two corners, you’ll move both corners at the same time.

When you click and drag on a corner point, the opposite corner will move in the opposite direction at the same time. To control a single corner only, hold down ⌘.

How to Edit Shapes Using the Scissor Tool

You can use the Scissor tool to cut away paths from shapes. To do this, select the Shape you want to edit, enable the tool via Layer > Path > Scissors (you can also add it to your toolbar via View > Customize Toolbar…) and click on any of the paths that make up your shape to remove them.

When you’re done, click outside of the shape or press Enter or Esc.

How to Edit Shapes with Rotate Copies Tool

The Rotate Copies Tool takes a single shape and rotates copies of it around a single point. To use it, select a shape and head to Layer > Path > Rotate Copies (you can also add a button for it to your toolbar via View > Customize Toolbar…). From there, choose how many copies you want to create and click OK.

Use the handle that appears to set exactly how you want your copies to be positioned. When you’re done, press Esc or Enter.

Note: In Sketch 53.1 and earlier, Rotate Copies will create a compound shape of your copies (like a boolean operation does). To turn this into separate layers, use Layer > Combine > Break Apart.

Boolean Operations

In Sketch, there are four boolean operations you can use to combine and create complex shapes. Select two or more shapes, then click on the boolean operations buttons in the toolbar.

• Union creates a shape that’s the sum of multiple shapes’ areas.
• Subtract removes the area of a shape from the one underneath it.
• Intersect creates a shape from the areas where the selected shapes overlap.
• Difference creates a shape from the areas where the original shapes don’t overlap. It’s the opposite of Intersect.

You can also access the boolean operations buttons from the Touch Bar.

Boolean operations apply from the top layer down. So, if you were to draw a smaller circle inside a larger circle and apply the Subtract operation , you’d create a donut shape.

Combined Shapes

When you apply a boolean operation to two or more shapes, Sketch will group the original shapes together in a new combined shape group.

With combined shapes, boolean operations are non-destructive, so you can edit the original shapes and change the result at any time. You can even even bring together two or more combined shapes with a new boolean operation.

How to Edit Combined Shapes in the Layer List

You can expand a combined shape just like a normal group in the Layer List. When you do this, you’ll see all the different shapes that make up your combined shape and the different boolean operations applied to them.

By clicking on a boolean operation icon next to a shape, you can change that boolean operation that’s applied to that layer.

To hide any of the original shapes in your combined shape, Control-click on them in the Layer List and select Hide Layer (or use ⌘ + ⇧ + H). This will change how your combined shape appears in the Canvas.

You can also create a combined shape in the Layer List by dragging one shape layer on top of the other. This will apply the Union boolean operation by default.

Masking Shapes

There are a few different ways to create masks in Sketch, but they all follow the same rule: Sketch will use the shape that’s lowest in the Layer List as the mask.

How to Create an Outline Mask

An outline mask only shows parts of a layer or multiple layers that fall within its shape. There are a few ways to create them.

Select a shape on your canvas and choose Layer > Mask > Use As Mask. Alternatively, you can control-click on the shape and select Mask.

When you create a mask, Sketch adds icons to any layers or groups above it in the Layer List to show that they’re being affected by the mask. If you drag another layer or group above the mask, it will also be affected by it.

If you want to place objects above your mask layer but don’t want them to be included in the mask, select it and choose Layer > Mask > Ignore Underlying Mask.

You can also group your masked layers and the mask itself so that anything outside of that group isn’t affected.

If you select multiple layers at the same time, you can mask them all at once by choosing Layer > Mask > Mask With Selected Shape. This will use the shape at the bottom of the Layer List within your selection as the mask and automatically group them all.

When you have multiple layers selected, Control-clicking on your selection and choosing Mask has the same effect as Mask with Selected Shape.

Selecting a layer within a mask group and choosing Layer > Mask > Ignore Underlying Mask will keep it within the group, but stop it from being affected by the mask.

How to Create an Alpha Mask

Alpha masks in Sketch hide anything that falls outside of their shape and also control the opacity of any layer they’re masking.

To create an Alpha mask, create an outline mask like normal, then select it and choose Layer > Mask > Mask Mode > Alpha Mask.

Head to your mask layer’s Fills in the Inspector and be sure that it has a gradient fill. It’s worth noting that Sketch looks for the alpha in your gradient, not the color, to control the alpha mask settings.