Properties Panel
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.
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