Rectangle

Overview

Rectangle shapes expand to fill the space offered to them by their parent. For example, when you insert a Rectangle into a component, the Rectangle automatically fills all of the space available in the component.

Pro Tip
Press "r" on your keyboard to insert a Rectangle.

You can use modifiers such as Frame or Aspect Ratio to give the Rectangle a new parent to fill.

<div class="callout note">Note
A Rectangle needs a defined space to fill. If you add the shape directly to the canvas without a Frame, it defaults to 10x10.</div>

Editing Rectangles

Rectangles come with a Style and Color property that you can adjust.

The Style Property

The Style property determines whether a Rectangle is drawn as a Fill or as a Stroke (border). By default, a Rectangle’s Style is set to Fill, but it can be changed to Stroke or Stroke Border from the drop-down.

A Stroke is drawn centered over the path of the Rectangle while a Stroke Border is drawn inside the path of the shape.

The Line Width Property

When you select Stroke or Stroke Border, you can control the width of the stroke with the Line Width property.

The Color Property

The Color property defines the color of a Rectangle’s Fill or Stroke, depending on the Style chosen.