The Components View

The Components View is a quick and easy way to create, manage, search, and find local Symbols, Text Styles, Layer Styles, Color Variables, Frame Templates, and Graphic Templates in your document.

Accessing the Components View

To access the Components View click on the Components tab on the left side of the toolbar (you can also use ⌃1 and ⌃2 to toggle between the Canvas View and Components View, respectively).

The buttons in the centre of the toolbar filter the view between all types of Components: Symbols, Text Styles, Layer Styles, Color Variables, Frame Templates, and Graphic Templates.

Working in the Components View

1. Switching Views. Switch between the Canvas and Components View by toggling between the two tabs on the left of the toolbar. Or use ⌃1 and ⌃2.
2. Duplicate or Create new (depending on what filter is selected). To create a new Text Style, Layer Style, Color Variable, Frame Template or Graphic Template click on the  toolbar item. You can also duplicate Symbols using the duplicate icon in the Toolbar.
3. Filtering Components. By default, we’ll show you all the Symbols in your document, but you can use the toolbar controls to switch between Symbols, Layer Styles, Text Styles, Color Variables, Frame Templates and Graphic Templates.
4. Search . Filter between Component types using the tabs, then search for the name of the Component.
5. Contextual Menu. Control-click on the Component thumbnails to insert, rename, group, duplicate, delete, or copy their CSS attributes. Use insert to add a copy of your selected Component to your Canvas. When you insert a Component, the Mac app switch to the Canvas view, so you can drop your Component into your design.
6. Editing in the Inspector. You can edit, rename or delete any Symbol, Layer Style, Text Style, Color Variable, Frame or Gaphic Template using the Inspector. Simply select a component and make your changes.

This view is all about organizing, so it only shows components that are local to the document you have open. It doesn’t show components from Libraries, even if you’ve used them in your document. You’ll need to open the original Library Sketch file to manage that Library’s components.

How to Create a new Component using the Components View

You can quickly create new Text Styles, Layer Styles, Color Variables, and Frame Templates from the Components view. While the process is similar across component types, check each component’s guide for specific steps.

• How to Create Text Styles
• How to Create Layer Styles
• How to Create Color Variables
• How to Create Templates

While you can’t create a Symbol in the Components View , you can duplicate it. Click on Edit Symbol Source in the Inspector to edit on the Symbols page.

Organizing Components

The Components View makes it easy to organize and manage your Components.

You can select multiple components and group them using ⌘G or Control-click on your selection and choose Group . You can also drag and drop components into existing groups in the left sidebar. To rename a group, double-click on the group name in the left sidebar. To rename a single component, click on it, and rename it using the name field in Inspector.

Expanding and collapsing groups

You can quickly collapse all open groups by choosing View > Sidebar > Collapse All Groups. For more granular control, you can hold ⌥ when you click on a disclosure arrow next to a group’s name to open and collapse all contents within that group (including sub-groups).

By default, all groups are expanded, but you can change this setting by choosing View > Sidebar and toggling the Automatically Expand Groups item. Note: These options only apply to items in the Layer List.