When you create a component, selected layers will be converted into a single, reusable layer and added to your document library. Use components to create easy to re-use elements from your document. Whenever you update a component, all other instances will inherit the changes automatically. Each instance of a component can also be customized with overrides.
Creating and editing components
To create a component, complete these steps:
- Select your group or layer(s).
- In the top toolbar, click the component icon (). Alternatively, you can right click the layer(s) you selected and click Create Component, or you can use the Command+K shortcut.
- In the Create new component modal, enter a name for your component and click Done.
With the Go to component master checkbox selected (as it is by default), clicking Done will automatically open the master component editor.
Once a component has been created, you can copy/paste or duplicate an existing instance of a component anywhere in your document.
To detach a component instance, select the component in your layer list, then right-click and select Detach Component. Your detached component will be available as a container—rather than a layer group—to prevent the layers from becoming distorted or moved to another spot on the artboard.
To learn more about containers, check out the "Groups and Containers" section in our Studio Inspector guide.
To edit a component, do the following:
- Select the component.
- At the top right of the canvas, click Edit Master.
- The component definition will open and you can make any necessary adjustments to the component design.
- When edits are complete, navigate to the top right of the canvas and click Done.
Any edits you make to a component master will be reflected in all instances of that component.
You can also edit individual instances of components with overrides (more on that below).
Responsive and static sizing
You can create either static components or responsive components in Studio. Whether a component remains static in size or resizes responsively depends on the unit of measurement you set for the component’s Width and Height fields in the inspector:
- Static components: use Px (pixels) as the value
- Responsive components: use Percent as the value
To create a responsive component or convert a component from static to responsive sizing, change the unit of measurement from pixels to percentage. Conversely, create a static component by setting the unit of measurement to pixels.
To define whether a component uses static or responsive sizing:
- Select the component.
- Click Edit Master at the top right of the canvas.
- In the inspector, just below the alignment icons, hover over the Width and Height fields (one at a time) and right-click.
- In the drop-down list, click either Px (for static sizing) or Percent (for responsive sizing).
Use the pin icons under the Width and Height fields in the inspector to define the pinning of a component or layer within its bounds, as discussed in the video above. Read more about pinning in the “Fixed Alignment” and “Responsive Alignment with Anchor Points” sections of the Studio Inspector guide.
Note that to prevent anyone from accidentally selecting and editing a component's child layer rather than the component itself, the resizing handles you typically see on the canvas are hidden for layers inside a component. You can, however, still move and resize component child layers by editing the data in the X, Y, Width and Height input fields in the inspector:
Creating nested components
When editing a component you will notice that the component itself has an artboard; your layers live in that artboard and you can assign width and height in % of the artboard.
To create a nested component, follow these two steps:
- Put an instance layer inside any other component’s definition artboard.
- When you make updates to the component’s definition, all other instances will inherit the changes automatically, whether or not they’re inside another component or not. As well as placing an instance into a definition, you can also select multiple instances of different components and click the cogwheel to create a component via the toolbar.
When you create nested components, interactions on layers that form the component will be removed. Interactions created on components are unique to that instance of the component.
The ability to swap components, including nested components, is a big time saver for designers. Swapping components is especially useful when designing elements with multiple states—e.g., a button with a non-click state, click state, and hover state. One important difference from other design tools is that Studio lets you swap out components whether they are the same size or not.
To swap a component, including a nested component:
- In the layers panel (or on the canvas), select the component you want to swap.
- In the inspector panel, locate the component name, and click the dropdown menu.
- Click the dropdown to search your Document Library, a shared library, or All Libraries.
To learn more about shared libraries, check out the article Studio Shared Libraries.
- In the Search field, enter the name of the component you want, or use the arrow keys to navigate through the list of components.
When using the arrow keys, you will see a preview on the canvas of each component you select.
Swapping a nested component creates a component override—indicated by the refresh icon next to the component name in the inspector—for the specific instance of the component. The override will not impact the master component. To reset overrides, click the refresh icon, and then click Reset Overrides (as stated below).
In Studio, you can manipulate any of the properties in the inspector for any element. When you update a component’s definition using the Edit Master button, all instances will inherit the changes in your Studio document, but overrides will remain the same. To create an override on a component, you’ll be creating instances of the component definition and making your override changes in the specific instances.
Note that in a component instance, you won’t be able to change any structural properties; this includes erasing nested elements, copying/pasting new elements inside of an instance, changing layer order, moving things between groups, ungrouping, and so on.
To reset component overrides, select your definition component, click the circular icon in the inspector, then select Reset Overrides.