What is a Main Component?
A Main Component is a bundle of elements and/or sections that is:
Preserved in terms of both style and content
Can be replicated across your project
Has a direct link to all of its instances where changes can be synced in both directions
Create a Main Component
Put together a combination of elements and/or sections
Think about the different use cases where you would reuse the same combinations of elements and/or sections. E.g:
Headers
Cards
Gallery
Footer
These would often have the same layout but have different content and styling properties.
Convert elements into a Main Component
Select the collection of elements and/or section you want to create into one
Either create a frame around the collection
Or Select the collection from the right sidebar by holding down Shift + Clicking the individual elements
Click the “Create Main Component“ icon from the top bar
The elements will turn purple to indicate that it is now a Main Component
Edit a Main Component
In the left sidebar, find the Main Component indicated by the purple color, and click the pencil icon "Edit Main Component".
You’ll be taken to a dedicated edit environment for that specific Main Component
Make changes as usual.
💡 You can change the layout of the other device modes from this environment too.
Click “Exit” to go back to the canvas. Changes will automatically be pushed to all instances.
Make changes to an instance
Make local changes
While on the canvas in your project, you can edit only one instance of a Main Component without the changes affecting any of the other instances from the same Main Component.
Select elements within an instance of the Main Component. Keeping an eye on the left sidebar will be helpful to you in selecting the desired elements you wish to change.
Hint: Hold Cmd/Ctrl to allow you to select an element within a frame with only one click (normally you would need to double-click to get within the frame).
Make design and/or content changes as normal.
Note: Changes to the Main Component at the central level will not override these local changes in the future.
Override properties
If you have made changes locally that you want to push to all instances you can do so on two different levels, either push all changes content+style changes or style changes only.
Right-click an instance of the Main Component.
Enter “Main Components
Push all changes to main (allowing all changes including design and content)
Push style changes to main (pushing only the design changes, and will leave the content such as images and text to remain)
Reset Instances
You may decide to reset the changes and go back to the default version of the Main Component, and you can do so on two different levels, either reset content+style changes or reset style changes only.
Right-click an instance of the Main Component.
Enter “Main Components
Reset instance (resetting all changes including design and content)
Reset instance styles (resetting only the design changes, and will leave the content such as images and text to remain changed)
Detach an Instance
If you decide to break the link between an instance and its Main Component:
Right-click an instance of the Main Component.
Select “Main Components
Click on Detach
The instance will be wrapped in a generic Frame.
Adding a Main Component
There’s a dedicated list of all Main Components in the Add Menu in the project you created it within.
Click the "+" icon (Add Menu) on the top bar to open the component library
Click the "Main components" tab from the left side
Select the Main component you want to use. You will be taken out of the library and back to the canvas.
Click or drag to size on the canvas to place your Main Component
Note: Main Components are only to be found for reuse in the same project you made it, however, once placed on the canvas you can easily copy/paste it to another project where it will be added to the Add Menu.