Styling

In this styling guide, we explain all the ways to style shapes in detail.

Common

In the common tool from the Inspector Sidebar, you can edit the below properties:

Position specifies the left (X) and top (Y) position of the selected shape.
Size specifies the width and height of the selected shape. You can swap width and height by clicking Swap width and height button. This is useful when changing the frame to portrait or landscape.
Rotation specifies the rotation angle in degree. When the Rotation lock toggle button is selected, you can hide the rotation handles on the shape.
Opacity specifies the opacity percentage between 0% and 100%.

State

In the State tool from the Inspector Sidebar and Floating Toolbar, you can edit the states of the selected shapes. For more about state, refer to States.

Link

In the Link tool from the Inspector Sidebar, you can add a link to the selected shapes. For more about state, refer to Adding links.

Fill

In the Fill tool from the Inspector Sidebar and Floating Toolbar, you can edit the fill color and style of the selected shapes.

Fill color defines the color that fills the inside of the shape.
Fill style specifies the fill style that is one of None, Solid, Hachure, or Cross hatch.

Stroke

In the Stroke tool from the Inspector Sidebar and Floating Toolbar, you can edit the stroke color, width, pattern and roughness of the selected shapes.

Stroke color defines the color of the outline or border of the selected shapes.
Stroke width determines the thickness of the outline or border of the selected shapes.
Stroke pattern specifies the style of the outline that is one of Solid, Dotted, or Dashed.
Roughness adjusts the irregularity of the strokes, making them appear hand-drawn or rough.

Line

In the Line tool from the Inspector Sidebar and Floating Toolbar, you can edit the arrowheads, route and connection margins of the selected line shapes.

Arrowheads determines decorative markers at the ends of the selected lines, often used to indicate direction or flow.
Route is the path or trajectory of the selected lines. This is one of Straight or Curve.
Connection margin: specifies the spacing or buffer between a connector and the shape it is linked to.

Box

In the Box tool from the Inspector Sidebar, you can edit the padding, corners and borders of the selected rectangular shapes such as Rectangle, Text and etc.

Padding specifies the inner spacing between the content of the shape and its boundary. You can press the Independent padding button to set different padding values for the top, bottom, left, and right.
Corners specifies the the size of the rounded corners of the selected shapes. You can press the Independent corners button to set different corner values for the left-top, right-top, right-bottom and left-bottom.
Borders specifies where the border stroke will be drawn on the outline. It can take one of three values: Center, Inside, or Outside. You can press the Independent padding button to choose whether to show or hide the borders individually for the top, bottom, left, and right.

Text

In the Text tool from the Inspector Sidebar and Floating Toolbar, you can edit the various properties of the selected text shapes.

Text color defines the text color of the selected shapes.
Font family specifies the typeface used for the text.
Font weight specifies the thickness or boldness of the text. The types of font weight vary depending on the font and can take one of the following values: Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, or Black.
Font size determines the size of the text, measured in pixels (px).
Text alignment adjusts the horizontal positioning of text. You can select one of Align left, Align center, or Align right.
Vertical alignment adjusts the vertical positioning of text within the selected shape. You can select one of Align top, Align middle, or Align bottom.
Line height sets the vertical spacing between lines of text. The value should be entered as a multiple of the text size. For example, entering 1 renders two lines with no spacing between them.
Paragraph spacing defines the space between separate paragraphs of text, improving readability and layout. The value should be entered as a multiple of the text size. For example, entering 0 renders two paragraphs with no spacing between them.
Word wrap determines whether text will automatically break and move to the next line when it reaches the edge of the shape.

Freehand

In the Freehand tool from the Inspector Sidebar, you can edit the thining and tapers of the selected freehand shapes.

Thinning adjusts the variation in the stroke width, making lines appear thinner or more uniform along their length.
Taper start controls the narrowing of the stroke at the beginning, creating a tapered effect.
Taper end controls the narrowing of the stroke at the end, creating a tapered effect.

Image

In the Image tool from the Floating Toolbar, you can set the size of the image shape quickly.

Image size buttons allows you can adjust the size of the image shape proportionally to the original image’s size by 25%, 50%, 75%, or 100%.

Mirror

In the Mirror tool from the Floating Toolbar, you can set the size of the mirror shape quickly.

Mirror size buttons allows you can adjust the size of the mirror shape proportionally to the subject frame’s size by 25%, 50%, 75%, or 100%.

Shadow

In the Shadow tool from the Inspector Sidebar, you can edit the shape properties of the selected shapes.

Shadow switch allows to turn on and off the shadow of the selected shapes.
Shadow color specifies the color of the shadow applied to the selected shapes.
Shadow offset determines the distance between the shadow and the shape. You can press the Independent X and Y button to set different distances for X and Y.

Control

In the Control tool from the Inspector Sidebar, you can edit the control properties of the selected shapes.

Container indicates that the selected shapes are containers or not. For more about container, refer to Container.
Lock indicates that the selected shapes are locked or not. For more about locking, refer to Locking.