In this section, we will briefly discuss the main sections of the Clutch interface tool at a high level. Later on, we will discuss each section and explain in more detail the functionality and uses.


Image of the 4 main sections of Clutch when in a project

1. Application Bar

The Application Bar contains the controls needed to interact with your project and navigate the canvas. Everything from creating frames and selecting components, to sharing and permissions, and more can be found here.

2. Toolbar

Default toolbarDefault toolbar

Default toolbar with no components or frames selected.

Toolbar when a component or frame is selectedToolbar when a component or frame is selected

Toolbar when a component or frame is selected


New Feature: Context Aware Toolbar

Depending on whether you have a frame/component selected, the Toolbar will change from showing the tools for activity and publish to showing the frame tools.

The Toolbar has a context-aware feature where if you have nothing selected or you click on the empty part of the canvas you will be shown the activity view dropdown and publishing button.
If you have a frame selected or a component within a frame selected the Toolbar will switch to show you the Frame options tools (home, backward and forwards, refresh, URL bar, and pop-up frame).

3. Composition Panel

The Composition panel houses frames, which in turn contain Components. This panel can be used to control the hierarchy of your application and modify your active selection. It also contains the Workspace switcher.

4. Canvas

The canvas is an infinite space in which to render the frames of the current Workspace.

5. Properties panel

This context-aware menu is used to set values on properties. It will reflect the actively selected workspace, frame, or component instance and the properties available to set on each type.

What's next & recommendations

If you are curious about the details of the interface, jump to .... LINK