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.
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.
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.
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'.
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.
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.
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.
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.