You can use the Properties panel, located on the right side of the Editor, to view and edit a layer's properties.
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.
Setting an Interaction from within the Framer properties panel
All layers have properties that control the layer's dimensions and its location on the canvas.
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.
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.
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.
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.
Properties of the Stack component shown in the panel
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.
The Radius property defines the rounding radius applied to the layer's corners.
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.
The Border property defines the color and width of the layer's border.
The Shadows property defines the shadow(s) to apply outside of the layer.
The Inner Shadows property defines the shadow(s) to apply inside of the layer.
The Blur property defines the blur amount to apply to the layer. A layer's blur will also apply to its children.
You can use the Filters property to set several different filters on a layer. A layer's filter will also apply to its children.
- Hue Rotate