×

Introduction to Components

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

 

Studio components let you reuse crucial elements throughout your prototypes, so you can update every instance of a component by making your changes just once.


Creating components

To create a component, complete these steps:

  1. Select your group or layer(s).
  2. Click the cogwheel icon in the toolbar. Alternatively, you can right click the layer(s) you selected and click Create Component, or you can use the Command+K shortcut.
  3. In the Create new component modal, enter a name for your component and click Done.
    Note: With the Go to component master checkbox selected (as it is by default), clicking Done will automatically open the master component editor.

studio-toolbar-create-component.png
Create component icon in the Studio toolbar

studio-create-new-component-modal.png
Create new component modal

Once a component has been created, you can copy/paste or duplicate an existing instance of a component anywhere in your document.

Component-1.png
Component in layer list

To detach a component instance, select the component in your layer list, then control-click and select Detach Component.

Editing components

To edit a component, do the following:

  1. Select the component.
  2. Click Edit Component at the top right of the canvas. Alternatively, you can go to Library by clicking the book icon at the top of the layer list on the left, and then click the arrow to the right of the component you want to edit.
  3. The component definition will open and you can make any necessary adjustments to the component design.
  4. When edits are complete, click the back button at the top left of the canvas.

Any edits you make to a component will reflect 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
 

Define whether a component will resize responsively or remain static in size.

Resizing components

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:

  1. Select the component.
  2. Click Edit Component at the top right of the canvas. Alternatively, you can go to Library by clicking the book icon at the top of the layer list on the left, and then click the arrow to the right of the component you want to edit.
  3. In the inspector, just below the alignment icons, hover over the Width and Height fields (one at a time) and right-click.
  4. In the drop-down list, click either Px (for static sizing) or Percent (for responsive sizing).

Pro Tip: 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.

Nested components

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:

  1. Put an instance layer inside any other component’s definition artboard.
  2. When you make updates to the component’s definition, all other instances will inherit the changes automatically, whether or not they’re inside another symbol 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.

Component Swapping

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:

  1. In the layers panel (or on the canvas), select the component you want to swap.
  2. In the inspector panel, under Component, click the drop-down arrow.
  3. In the Search field, enter the name of the component you want, or use the arrow keys to navigate through the complete list of components in your library.
    Note: 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).

Component overrides

 

Overrides allow you to update each instance independently with unique content.

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