How to use main components

Learn how to create and manage main components

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

🤔 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

Note: Main Components is currently a feature in beta. We recommend that you experiment with it but be prepared for the occasional unexpected behavior.

🔨 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.

Did this answer your question?