Components are reusable elements or groups of elements that help keep your design consistent. You can turn any element or group of elements into a component. When you create a component, it is saved in your component library.

Components are color-coded pink in Play. They can have different states, which are variations in how the component looks and behaves.

Each component has a main component which is its source of truth. When you add a component to your page, you’re using an instance of that component. Any changes made to the main component will automatically update any instances of that component unless there is an override on that instance.

There are two ways to create a component in macOS. With the desired element selected, you can either click the pink cube icon in the object’s toolbar or you can use the keyboard shortcut CMD + K. The element will have a pink border and its object toolbar will have additional component options.

To create a component on iOS or iPad, select the desired element on your page and tap the pink cube icon in the right toolbar. The element will be highlighted pink on your page and the name will turn pink in the Layers Panel.

To add a component in macOS, you’ll use the last icon in the Add Bar to view the component library. You can either drag a component onto the canvas/into a page/stack, or you can click on a component and click on the canvas/in a page/stack to place it.

To add an element on iOS, swipe left and go to the components tab. Tap on a component to add it to the page or the stack you have selected.

Edit a main component in macOS in one of two ways. First, you can edit the main component on the canvas. Clicking the pink “Go to Main” arrow icon in any instance’s object toolbar will find the main component on the canvas.

You can also edit the main component via the Main Component Editor (MCE) by clicking “Open in Main Editor” from the right-click menu or the override menu in the component’s object toolbar.

You can also open the MCE from the Project Viewer. The component tab of the Project Viewer lists all the components in your project and double clicking on any of them takes you to that component’s MCE.

Edit a main component in iOS by entering the Main Component Editor (MCE) from the top menu. Closing the MCE automatically saves the component.