Property Panel

1. Design Panel

You are allowed to view, add, delete, or change properties of objects in design.

When you do not select anything in the Design panel, you can view the styles created in the current file.

You can also update the background colour of the canvas.

After selecting layers, various settings will appear in the Design panel. The layer type you select determines the properties available in the Design panel.

The Design panel contains the following properties:

• Alignment and distribution
• Frame size and direction
• Layer position on canvas (X and Y)
• Size (width and height) of the selected object
• Instance settings
• Layout constraint properties
• Layout grid properties
• Layers (mixed mode)
• Text
• Fill
• Stroke
• Effect
• Export settings

2. Prototype Panel

On the Prototype panel, you can use all the interaction settings of prototype.

You can connect the panels in the canvas. With the connection, you can simulate how users interact with the interface and display it in demo mode.

The Prototype panel consists of five parts:

Select interaction
You can set interactions, operations, and targets for any interaction.

Apply animations
You can set the effect of switching frames. You can also adjust the direction, slow-motion and duration.
Set the pop-up window
You can use this function to create prompt pop-ups, confirmation pop-ups, interactive menus and alerts.
Set overflow behavior
You can decide how the prototype page responds to scrolling. With this function, you can create advanced user interactions, such as carousels, lists, or interactive maps.
Adjust the basic settings of prototype

You can set the background of the time-lapse view and the frame initiating procedures.

3. Handoff Panel

The third panel option on the right is the Handoff panel. This is where you can see how to express your design elements in code, as well as view the basic properties of the selected element and copy their values.

You can select the code and copy it: CSS (web development)