You can use the Properties panel, located on the right side of the Editor, to view and edit a layer's properties.

Interactions

Most layers support Interactions. You can connect interactions to Actions and Transitions that will trigger in your prototype's Preview when that interaction occurs.

To add a new interaction, click the + button beside the Interactions heading. In the menu that opens, hover over the interaction you'd like to connect and then click on an action. To learn more, see our articles on Interactions and Transitions.

Layout

All layers have properties that control the layer's dimensions and its location on the canvas.

Position

If a layer is directly on the canvas, then its x and y positions will be relative to the center of the canvas.

If a layer is the child of another layer, then its x and y positions will be relative to the top-left corner of its parent layer.

Size

You can set a layer's Height and Width properties in one of three types of units: Fixed, Relative, or Fraction. To change a layer's unit type, click the dropdown beside the Height or Width value, then choose the unit.

Note: You can only set Fraction units on a layer if it is the child of a Frame with its Stack layout enabled. To learn more about Fraction units, see our Frame article.

Constraints

If a layer is the child of another layer, then the Properties panel will also display controls for the layer's Constraints.

You can use a layer's Constraints to set the distance between the layer and its parent layer's edge. You can also "pin" this distance so that it will be preserved if the parent layer changes its size.

You can pin and unpin a distance by clicking on the line next to the distance input. A blue line indicates that a distance is pinned, while a grey line indicates that a distance is not pinned.

To see a simulation of how the layer would respond to changes in its parent's size, hover the center of the Constraints interface.

To learn more about constraints and pinning, see our responsive designing article.

Property Controls

Component layers, including Scroll, Stack and Page, will display a set of inputs that control the component's properties. These Property Controls are also found on both Design Components and Code Components.

To learn more about the Property Controls used by Scroll, Stack and Page components, see our articles for each component. To learn more about user-created Property Controls, see our articles on Design Components and Code Components.

Other Properties

Frames, Stacks, Scrolls and Pages have several properties in common.

Overflow

The Overflow property determines whether a layer should "mask" its child layers by hiding those parts of its child layers that extend beyond the layer's edges. To learn more on how this works, visit our article on masking elements.

Radius

The Radius property defines the rounding radius applied to the layer's corners.

Fill

The Fill property defines the layer's background color, gradient, or image. To remove a layer's background, tick the checkbox beside the fill's color.

Tip: You can use the dropdown menu beside the Fill heading to choose the fill's blend mode.

Border

The Border property defines the color and width of the layer's border.

Shadows

The Shadows property defines the shadow(s) to apply outside of the layer.

Inner Shadows

The Inner Shadows property defines the shadow(s) to apply inside of the layer.

Blur

The Blur property defines the blur amount to apply to the layer. A layer's blur will also apply to its children.

Filters

You can use the Filters property to set several different filters on a layer. A layer's filter will also apply to its children.

• Brightness
• Contrast
• Grayscale
• Hue Rotate
• Invert
• Saturate
• Sepia