Canvas - properties panel

The right sidebar of the canvas is the properties panel, where you can adjust the various properties of layers.

Note: There are two modes at the top of the right sidebar: Design, Prototype. Different modes correspond to different property setting items.

img

Design mode

In design mode, you can view, add, edit, and delete the basic properties of a layer in the properties panel, including:

  • Alignment and distribution
  • Layer position, dimensions, rotation, and corner radius
  • Layouts, including Smart layout, Layout grid, and Constraints
  • Fill
  • Stroke
  • Effects

You can also add layers to Export section to export them in multiple formats.

If nothing is selected in the canvas, you can change the background color of the canvas or view the styles contained in the file.

Prototype mode

In prototype mode, when nothing is selected, the right-side property bar displays the general settings for the prototype:

  • Background color: You can set the background color for demonstrating the prototype.

  • Device model: Multiple mainstream device models are provided here, simulating real device effects during prototype demonstrations.

  • Preview: You can view the style effects of the selected device model in Preview.

  • Flow: Interactive flows are displayed here.

Once you select a layer, you can set interactions for the selected layer in the properties panel.

  • Flow starting point: Select a top-level frame (the outermost frame on the canvas) to add a flow starting point.
  • Interaction: Click the + icon in the interactions section to set more specific interactive effects.
  • Scroll behavior: When the nested layer extends beyond its parent frame, You can apply scroll overflow (no scrolling, horizontal, vertical, and both directions) to the parent frame, and apply scroll position (scroll with parent, fixed, and sticky header) to the nested layer.

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful