×

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 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 including erasing nested elements, copying/pasting new elements inside of an instance, changing layer order, moving things between groups, ungrouping, etc.

To reset component overrides, select your definition component, click the circular icon in the inspector, then select Reset Overrides.