Circle

Overview

Circle shapes expand to fit the space offered to them by their parent. When the frame of the space being offered by the parent is not a perfect square, the Circle fits itself within that frame but always maintains a perfectly circular form.

For example, when you insert a Circle into a component, the diameter of the Circle will equal the the smallest edge (width or height) of the space offered by its parent.

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

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

Editing Circles

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

The Style Property

The Style property determines whether a Circle is drawn as a Fill or as a Stroke (border). By default, a Circle’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 Circle 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 Circle’s Fill or Stroke, depending on the Style chosen.