Components (beta)
Create and manage consistent designs across projects with connected elements.
Components overview
Components are elements that can be reused across multiple Editor design files. Creating instances of a component keeps them linked across files, so any changes made to the original component will propagate across all its instances.
Components are still in beta. If something doesn’t work as planned or could be improved, please email support@bezi.com.
Using Components
Creating a component
Creating a component
There are two ways to create a component to reuse across Editor design files.
-
Select the desired object or group, type “component”, and press
spacebar -
Right click on the desired object or group, then select Create a component from the dropdown
Creating an instance of a component
Creating an instance of a component
Once a component is created, instances can be created to use that component across the same or different files. Simply refresh the page to see changes from the main component propagate to the instance(s), ensuring designs are kept in-sync with minimal effort.
There are four ways to create an instance of an existing component. The instance will be created in the exact same position as the component. Check the Hierarchy to see the new instance and use the gizmo to move it off the main component.
-
Right click on the component and select ‘Duplicate’ drop the dropdown
-
Copy and paste the component
-
Select the component, type “instance”, and press
spacebar -
Right click on the instance and select Create an instance from the dropdown
Unlinking an instance
Unlinking an instance
Unlinking an instance will convert it to a regular object(s) that is no longer associated with the main component. Unlinking enables changing an instance without affecting the component or other instances.
There are three ways to unlink an instance.
-
Select the instance, type “unlink”, and press
spacebar -
Right click on the instance and select Unlink instance from the dropdown
-
Select the instance, navigate to the ‘Instance’ section of the Properties Panel, then select the Unlink instance icon next to the instance name
Navigating to the main component from an instance
Navigating to the main component from an instance
There are three ways to navigate to the main component from an instance.
-
Select the instance, type “go”, and press
spacebar -
Right click on the instance and select Go to main component from the dropdown
-
Select the instance, navigate to the ‘Instance’ section of the Properties Panel, then select the Go to main component icon next to the instance name
If the main component is in a different file, that file will open in a new tab.
Moving a main component to a different file
Moving a main component to a different file
This is currently not supported, however there is a workaround.
-
Create an instance in the new file
-
Delete the file that contains the original main component
-
Return to the new file containing the instance
-
Follow the above instructions for restoring a deleted component (as long as the original file is deleted, the main component will be restored in the new file)
Creating shared component libraries
Shared component libraries are great for ensuring consistency across multi-file projects and multi-person teams. A single component can be used and updated simultaneously in multiple places and files at one time, eliminating the need to monitor and implement changes one-by-one.
To use components across multiple files, all files must live in the same team folder as the file with the main component. We recommend creating a dedicated file in a team folder that houses all main components, to keep your design system organized.
-
In the new file, open the Library panel in the bottom bar
-
Open the ‘File Library’ dropdown, then select ‘Team Library’ from it
-
Select Components to view the library of shared components
-
Drag and drop the desired component into the scene. It will be placed as an instance