Quick links
🔑 Sign in
🖥 Website standards.site
🐦 Twitter @standards_site
📷 Instagram @standards.site
Design & Editing
Workspace & Project Management
In this guide:
Components are typically used to save time when editing, and ensure consistency throughout a project. Any situation where a single design is used in more than one location is an opportunity to use a Component. Rather than duplicating or copying a design—requiring changes in more than one place— save it as a Component to extend one design over multiple locations. This way, if you need to make edits in the future you can just edit the Component and all instances will update automatically.
Components are also useful in making sure designs are kept consistent. Rather than arduously double-checking exact property values to maintain consistency throughout a project, designs are ensured to referencing the correct component, and everything will stay perfectly in sync.
One of the best ways to learn about Components is to understand how they are used. Below are three examples describing some of the best use cases for Components:
Component use case: Section divider
Whether you’re designing a simple block of text or a multi-layered group, you can start using Components in one click. There are many ways to interact with Components, and we’ll cover each one in more detail.
Any selectable element can be a Component. To create a Component, select a layer and click ‘Create’ in the right sidebar.
Components are automatically grouped by their element type, so for example Button, Row, and Text elements are each saved into their respective Component groups.
To choose a Component, select a layer and click ‘Choose’ inside the Component settings group in the right sidebar.
Options will be based on the element type selected. For example, if selecting a Button element you can only choose from other Button Components.
Components can be swapped with other Components of the same element type. You can swap a component by hovering over the thumbnail in the right sidebar.
If at any point you want to sketch outside the constraints of a Component, detach the Component instance by clicking the ‘Detach’ button in the right sidebar.
Detaching doesn’t effect the Component itself, and is fully reversible.
To add a component, press C on your keyboard or select the diamond icon in the top bar. This will cause all the available add points to become visible. Choose the location, then choose your desired Component from the Add modal.
The options available in the Component modal are based on which add point you chose in the previous step. For instance, choosing an add point inside a Column, Group & Row Component won’t be visible in the modal since it is not possible to add a Row inside a Column.
At the moment a Component is created, a version of the design is saved outside the layers of the project, and the selected layer becomes an instance that references the saved version. Any edits you make to Component instances are overrides and do not update elsewhere.
To make edits to the Component itself, click Edit in the Component settings group in the right sidebar, or navigate to the Components tab at the top of the right sidebar and select the desired Component. This will open a specialized interface that allows directly editing the Component.
<aside> 💡 Tip: Any changes made here will automatically update anywhere the Component is referenced within the document.
</aside>