Design Component
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 master for the new Design Component.
To create an Instance of a Design Component, either create a copy of the component's Master 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 Master and Instance pattern to manage elements of a design that must be repeated in many places. In this pattern, a master defines a template that the instances inherit. In this way, a designer can update every instance just by changing the master.
In Framer, a Design Component's master 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 master components anywhere on the canvas, including as a child of other layers or components. You can even delete a master component from the canvas. To prevent getting lost, keep related master components in the same area on the canvas.
Tip: To find an instance's master, right click the instance and click Show Master. If the master has been deleted, this will restore the master to the canvas.
Changes to the Master
When you make a change a component's master, 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 master.
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 Master, right click the Instance and select Update Master.
Detaching from Master
To remove the relationship between an Instance and a Master, right click the Instance and click Detach From Master. 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 master 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 master 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.
