Control panes overview

On the right side of the interface there are three panes, each with a specific role in creating your responsive design. The icon is replaced by the pane name when you hover it.

1. Content pane

The pane on the far left. It’s divided into three subpanels — Elements, Components and Symbols — where you add the content of your website: paragraphs, headings and images; pre-made components; or symbols, which are globally synced content such as menus and footers.

Full detail in the Content pane.

2. Styles pane

The second control pane, and probably the most frequented. It’s organised into two main parts:

• The top section configures how and where styles are applied to the selected element — creating custom classes and IDs, and applying styles to a specific state like hover, active or focus.
• The lower portion is divided into three sections. Layout holds the tools for element position and spacing. Design covers typography, colours, backgrounds, borders and shadows. Effects is where the action-based controls live — 3D effects, filters and blend modes.

The Styles pane is the command centre for applying all characteristics to elements and layout. See the Design pane and the Effects pane.

3. Element pane

The third control panel, in three stacked parts:

• The top gives a page-inspector view: a tree-like overview of all elements on the page, for quickly selecting and reordering them, and toggling the visibility of hidden ones.
• The middle shows the Element Property fields, for elements that need linking with a resource (pictures, videos) or custom framework attributes.
• The bottom previews the CSS rules applied to the selected element.

Full detail in the Element pane.