Editing Multiple Components

Overview

When building user interfaces, we have to work with multiple components at once. Thus, it is essential to understand how multiple components can be edited and handled at once.

Example: Building a list of cards

Cards are common UI elements in any application and also include many types of components like Text, Image, Icons, Buttons, etc.

Creating a card

It is always recommended to build an element from bottom up, and then grouping them. So in case of a card, let's follow these steps -

• Drag and the drop the components we need for the card like Text, Image, Icon, etc.
• Select each individual component and enter the necessary properties like color, size, etc.
• Once the individual components are ready, select all the components, either by holding right click and selecting all the components, or pressing Shift and click to select the components one by one.
• Group the components together by pressing Cmd + G / Ctrl + G.
• Once grouped, edit the container card properties like Orientation, Padding, Spacing, Flex properties and so on.

Creating the list of cards

• Drag and drop the list component onto the canvas.
• Drop the card made above onto the list where components can be dropped.
• Add a datasource to the list in the Properties panel from the Items input.

Your list of cards is ready.

Best Practices

• Always try to use keyboard shortcuts to be more efficient like Cmd + G / Ctrl + G to group components or Shift + Click to select components individually.
• After grouping components, if you want to edit an individual component inside the group, use Cmd / Ctrl and click on the component. This will open up the Properties panel for the component.
• Another way of selecting individual components is from the left sidebar where the component hierarchy is visible.
• If you are trying to duplicate an edited component, use Option / Alt + drag.