A Design Component is a Frame that is optimized for reusability.

To create a new Design Component, right click on a Frame and select Create Component, or press ⌘ + K for Mac or Ctrl + K for Windows. This will turn the Frame into the primary for the new Design Component.

To create an Instance of a Design Component, either create a copy of the component's primary or open the Insert Menu from the Toolbar and find your component under the Project Components category.

Using Design Components

Like many other design tools, Framer uses a primary and Instance pattern to manage elements of a design that must be repeated in many places. In this pattern, a primary defines a template that the instances inherit. In this way, a designer can update every instance just by changing the primary.

In Framer, a Design Component's primary defines the component's intrinsic size, style properties, child layers, and layout. The component's instances inherit those properties, though they can override them as described below.

Tip: You can place primary components anywhere on the canvas, including as a child of other layers or components. You can even delete a primary component from the canvas. To prevent getting lost, keep related primary components in the same area on the canvas.

Tip: To find an instance's primary, right click the instance and click Show primary. If the primary has been deleted, this will restore the primary to the canvas.

Changes to the primary

When you make a change a component's primary, that change will also apply to all of the component's instances—unless the instance has an override on that same property.

Overrides on the Instance

When you create an Instance of a Design Component, the instance will begin as an exact copy of the primary.

From there, however, you can change almost any other property of the component, including the properties and layout of its child layers. In the context of Design Components, these changes are called overrides.

The only thing you cannot change is the instance's children. You cannot add or remove child layers from an instance.

Tip: While you cannot remove a layer from an Instance, you can hide it. Right click on the layer or on its name in the Layers panel and click Hide. To restore a hidden layer, right click its name on the Layers panel and click Show.

To reset an Instance's overrides, right click the Instance and select Reset Overrides.

To apply an Instance's overrides to the primary, right click the Instance and select Update primary.

Detaching from primary

To remove the relationship between an Instance and a primary, right click the Instance and click Detach From primary. This will turn the instance into a regular Frame.

Property Controls

When a Design Component's child layers include either Text layers or Frames with image fills, then you can expose Property Controls that will control their values.

If a Design Component's primary includes Text layers or Frames with image Fills, then the Properties Panel will list these layers in a section with the component's name as its header.

To expose a Property Control, select the Design Component's primary and tick the checkbox next to the layer that you want to expose a Property Control for.

To use a Property Control, select an instance of the Design Component. If the component has exposed Property Controls, then the Properties Panel will list these properties in a section with the component's name as its header.

To change a text property's value, enter a new value in the Property Control's text input.

To change an image property's value, click Choose and select a new image.