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 right. 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. Here you configure special properties of the selected element, such as image or link sources, add attributes for your framework, and write custom scripts and styles per element.

Full detail in the Element pane.

Inspector pane

Very similar to the web inspectors in browsers such as Chrome and Firefox: a DOM tree of all the page elements, and a view of the CSS applied to the selected one.

Full detail in the Elements Tree and the CSS preview pane.