Design Manager BETA

Table of contents
Close

Overview of the UI

The design manager is divided into three distinct sections: the finder, the editor, and the inspector. Each of these sections work in concert to give you quick, intuitive access to all of the features and options of the tool. If you’re familiar with earlier iterations of the design manager, you will notice that we have made an effort to eliminate as many menus and dialogs as possible.

In the following section we’ll quickly run through each of these areas of the UI. Afterwards we’ll explore them in more detail in the context of creating and editing assets.

The finder

HubSpot Help article screenshot

The finder is designed to provide an asset navigation experience equivalent to a computer operating system. Common file and folder operations such as creation/deletion and searching/sorting are available via the finder menu or right-click contextual menus on each asset.

The editor

HubSpot Help article screenshot

The editor is the central section of the design manager where you’ll do the lion’s share of your work. It is either a drag and drop interface or a code editor depending on the asset you are working on.

Directly above the editor a tabbed interface allows you to jump between open assets. These tabs can be dragged for reordering, there is also a tab menu on the far right where you can close all open tabs or select specific ones.

HubSpot Help article screenshot

The inspector

HubSpot Help article screenshot
The inspector allows you to add and edit components in a template or module. It is contextually dependant on the task you are performing and the type of file. For example:

  • When a component is selected in the drag & drop editor, the inspector will show all of the features and options of that component.
  • When no component is selected in the drag & drop editor, the inspector will show options for the template itself.
  • When editing a module, the inspector allows you to edit and add fields.
  • When editing an HTML, CSS, or JS file, the inspector does not appear.