Components basics

Learn to create, save and reuse elements and sections by building components and make them dynamic with props.

What are components?
Creating a component
Editing a component
Editing default props
Using a component and props
Detach component instance

1. What are components?

One of our most powerful feature is working with components. They are similar to pages and let you reuse UI elements that you'll later use to speed up the composition of your layout. They are similar to symbols in Sketch or components from Figma. A component can be as simple as a button, or more complex such as an information card or an entire screen. Once you have elements repeated across multiple screens, it's a good time to start thinking about components.
After identifying and designing the main component you can use it in more places by creating more instances of it, which behave like 'smart' copies. Whenever you will change the design of the original component, all the instances will reflect the change. We said an instance is a 'smart' copy because it can individually be customized from the main component by what we call component props.
Props are customizable properties for every component instance. It is what makes an instance different from the main component. These props will be automatically created and it will allow you to change things such as: image source, links or text for a component instance.

2. Creating a component

There are two ways in which you can create a component.

From the Files tab, where you can see the list of all existing components. Pressing on the '+' icon will automatically create one. In the Canvas, you will be presented with a new view, the component editor, where you can start creating your layout by dragging elements, just as you would do in a normal page.

Another way of creating a component is by selecting an element, right click on it and choose Make component. Double pressing on it it will take you to the component editor.

3. Editing a component

The component editor behaves exactly like the page editor and it starts with a fixed size. Making the higher node of the component smaller will show a blank background which is not part of the component's size.

4. Editing default props

Near the top of the right panel there is the Props panel which contains all the automatically generated props for your component, based on the existing child elements. Selecting a prop from the list will highlight the element it is attached to. You can edit the props name and default value for each of them.

5. Using components and props

You can add an existing component in the Canvas by dragging it from the components list, thus creating a component instance.



On hover or select, all component instances will have a purple border to be easily identified from non-component elements.



On component selection, the Inspector is not visible in the right panel because only props values can be changed. Setting values to component props will override the default values coming from the main component and only update the selected instance.

6. Detach component instance

An existing component instance can always be detached from the main component, using Detach instance from the context menu.



To learn more about copying components to different projects check out this article.

Updated on: 12/05/2023