Components
Components are saved sets of layers and interactions that are reusable across your prototype. You can turn any set of layers and interactions into a component and reuse it by creating instances of a component throughout your scenes. By using Components, you can avoid unnecessary repetitive work, improve the readability per scene, and ultimately accelerate your prototyping workflow.
Using Components
Creating Components in a Scene
You can create components in a scene. Select a layer or multiple layers that you would like to turn into components and click on the "Component" icon in the toolbar. Or right-click on the selected layer(s) and select "Convert to Component" from the context menu. A component is automatically created with the selected layer(s) and the corresponding interactions. Moreover, an instance of the component would replace the original layers.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f4ed33af24017fa028ca86f11eeb69df4558b787-2175x1200.png/creating_components_in_a_scene.png)
Creating Components Directly
Moreover, you can create components from scratch. Open the component panel located on the left side and click on the plus icon. This creates an empty component that you can start customizing.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/9831c9731ea3425f1a2d2b88847c459a121e6ac6-2175x1200.png/creating_components_directly.png)
Adding Component Instances
You can create an instance of a component by dragging a component from the component panel to the canvas of a scene.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/ebf15dec3b5fe1c4a10af9991c081bdacd0d64d9-2175x1200.png/adding_component_instances.png)
Editing Components
Main Component
To edit a main component, you must be in the component editing mode. To enter this mode, click on a component in the component panel, or right-click on an instance of the component and select "Go to main Component" from the context menu.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/729336c7e65cedd556de25a0040248f3634291ce-2175x1200.png/main_component.png)
Editing a main component is similar to editing a scene. You can create, modify, and delete layers, variables, triggers, and responses in the component. The changes you would make are applied to all instances of the component.
You can return to the scene by clicking on the ← arrow button in the top left corner or you can go to any scene by clicking on a scene in the scene panel.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f162cd61a6c2a0372bdb57a0115e0d44211f9bb0-725x180.png/go-back-to-scene.png)
Instance
When you change a property of a sublayer of a component instance, you are simply overriding that property. Overridden properties do not affect the main component, as they only apply to the instance. Even if you make changes to the main component, the overridden properties in the instance would remain. By overriding, you can customize instances, making them different from each other while still being instances of the same main component.
To reset the overrides of an instance, right-click on the instance and select "Reset Overrides" from the context menu. All the overrides will be cleared, and the instance will be the same as its main component.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/008bbf1447860b58d06393bd1f75b79a1934afde-1580x870.png/image.png)
Use as Main Component
You can link an instance of a component with its main component. This allows you to edit the main component by editing the instance, without having to be in the component editing mode.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1e1d092d08a9d3a2271171cc538bd7ecd42a4a55-2175x1200.png/link_with_main.png)
Variable Overrides
Overriding the initial values of variables is possible. To do so, enable the "Make Overridable" option for the variable in the main component. Once enabled, you can override the value of a variable in the property panel of a component instance.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/96065e599def016321ad4bd26cb92ab9ef23abd8-1450x800.png/overridable.png)
Detach Component Instance
Detaching breaks the connection with the component and turns the instance into a container. You can do this either from the property panel or the context menu. Ensure that you have enabled the feature in Labs prior to use.
Detach component from the context menu
- Right-click on the instance
- Click on Detach Instance
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f296578b74b47d95fa0f431499149da3870b4aaf-1450x800.png/Component-Detach-(1).png)
Detach component instance from the property panel
- Select a component instance
- Click on the Detach Instance icon in the property panel
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/736a06d1eb47396b054700db32e6e7655fd80c25-1450x800.png/Component-Detach---property.png)
Once the instance has been detached, the Detached_ prefix will be automatically added to the detached interaction’s name. Easily identify whether an interaction stems from a detached instance or not.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/885d7bf8d6f14dcbeca213154197af79e2259677-1450x800.png/Component-Detach---prefix.png)
Swap Component Instances
In the property panel on the right side, you can easily replace any component instance with another one.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/03b55001bdc3c7db29aea63d8b9a31714ef02e75-1450x800.png/swap_component_instances.png)
Grouping Components
Groups can be created or separated using the slash "/" in the component name. For example, if the name of the first component is "Button / Primary / Normal" and the name of the second component is "Button / Secondary / Normal", it would be grouped as shown below.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a685c70536de49735c5ad6cde39dbddf83cfec92-1450x800.png/grouping_components.png)