Adding components to a page/layer/symbol

Adding components to a project page, layer, or symbol is as simple as dragging from the palette of built-in components. There's also a quick add option, which you can access by pressing '/' on your keyboard. A quick search box will show in which you can type the name of a component. The search is pretty flexible, meaning that there are several variants for each component. Once you found the component you're looking for, drag'n'drop it from the dropdown list.

At any time, you can add component to the selected page, layer, or symbol. Or, if you're editing a group or a tabbed component (tabs, accordion, card stack), you will be adding components to those containers.

Edit component properties

The toolbar that shows when you select one or more components, lets you adjust the visibility, styling, and other properties of the components. Let's take them one by one.

  • Visibility - Lets you select the visibility of components for each breakpoint in your project. By default, components are visible in all breakpoints. You can change that, so they are initially invisible. When setting a component as invisible, they will still show in the design as semi-transparent. See bellow for more info.
  • Toggle invisible components - If you need invisible components (which still show with a reduced opacity in design mode) to be completly invisible and out of your way, press this button to toggle their complete invisibility on and off.
  • Enabled/disable - this options lets you enable/disable components. Disabled components will look inactive, that is a bit grayed out and completely inactive when user clicks them.
  • Lock - Lock a component in design mode, so you don't accidentally select it. Useful for background components that you don't need to work on at the moment. To unlock a component, right-click it and select the unlock option from the context menu.
  • Display on top - This is a powerful and, sometimes, very needed option. Instead of keeping moving a component to be on top of everything else on page (for things like fly-out menus), you can simply set it to just be on top of everything.
  • Align and distribute - Two common options for design tools that let you align and position components in various ways relative to each other.
  • Send/bring to front/back - Another regular option for designing UIs.

The rest of the options should be obvious by their icons. If not, just drop a button on a page, select it, and play with each option to see what it's doing to the poor little button.

Change component visibility

The visibility of each component, or group of components, can be set for each breakpoint separately. That means that a component can be visible in one breakpoint, and not visible in the others. To change the visibility of a component, use the eye icon in the properties toolbar which shows up when you select one or more components.

If a component is in a group of components and it's turned invisible, it will be semi-transparent in the design mode only when you're editing the contents of that group. Otherwise it's totally invisible. This cleans up the design view, because you can plenty of components that you only want to show later, in the prototype, such as dropdown menus and similar components.

The action that lets you change the visibility of a component or more is 'Show/hide components'.

Create and edit components groups

To create a group of components, which you can then copy/paste and move/resize as one, select the components you want to group together, and press Cmd/Ctrl+G. To ungroup a set of components, press the same key combination with that group selected.

You don't need to ungroup the components to edit them. Just double-click the group to enter into that group and make changes to the components within. After you've finished making the changes you want, press escape to get out of the group. You can create groups on as many levels as you need. The breadcrumbs in the top-right corner will show you the depth level of the current group you're editing. The components that don't belong to the current group will be grayed out and unselectable.

Tabs, accordions, and card stacks

These three types of components are special components that have alternative views attached to them. Although you can drag'n'drop them from the palette as one component, you can enter and edit their contents like you'd do with component groups. The toolbar that shows up when you edit a tab, accordion, or card stack, will let you switch from one view to another, move them right and left, and also change the name of each tab.

Just as with groups, the breadcrumb in the top-right corner will show you the currently selected tab if, as in the case of card-stacks, that is not obvious.

Copy/paste component attributes and interactions

You can quickly copy attributes and interactions from one component to another component or set of components. Check the Edit menu for shortcuts to this options.

Using symbols as custom components

Every symbol you create in your project is automatically added to the component palette from where you can drag and drop it into your design. Once added to a page/layer, you can double-click it to edit it's content. Once the content of a symbol is changed, the changes will propagate through-out every place the symbol is used, and also it's preview is updated in the component palette.