Components

Components are reusable building blocks to be used within and across your projects.

Framer knows two types of components:

1. Components designed on the canvas
2. Code components

Components designed on the canvas

After designing your UI element using Frames, you can turn it into a reusable component by selecting your element and creating a component out of the selection in one of two ways:

1. Clicking the Component button in the top toolbar
2. Press ⌘ + K for Mac or Ctrl + K for Windows

Name your component upon creating it.

Once a component has been created from your selected Frame, we are figuratively ‘entering’ the component’s inner workings by entering Component Canvas. This is where we can make your components smart with interactive Variants and custom property Variables.

Learn by doing — take a guided video tutorial on Smart Components

Primary to instance relationship

Within the Component Canvas, your component will be turned into the Primary layer.

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.

Say we created a card with a border-radius of 20px. If this card is turned into a component and we used an instance of it many times throughout our project, a change to the border radius will be as simple as entering the Component Canvas of our component and changing it in the Primary layer.

If we explicitly do want a different border-radius for one of our instances, we can of course change it in the instance (after having created a Variable for it) and any future changes to the exact border-radius prop of the Primary now won’t affect this instance.

Using instances of your component

To reuse your component, you can add instances of it to anywhere within your prototype. An instance can be created in the following ways:

• Dragging it from the bottom-left Components panel
• Under Project Components in the Insert Menu
• Duplicating/copy-pasting another instance on the canvas

Detaching an Instance

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

Making your component interactive with Variants

Within the Component Canvas, we can make our static component become fully interactive using Variants and leverage various triggers to transition between Variants.

Variants are different states your component can animate to, either temporarily with Hover and Pressed states or persistent with a new Variant.

Learn all you need to know about Variants

Create interactive variants from your Primary

Adding customizable properties using Variables

Components by nature are reused throughout your prototype, but do not always look exactly the same. For a card, you may want text layers within the card be customizable.

To allow you and others to customize instances, Variables can be assigned to properties that should become flexible for any changes.

Find out how to add Variables to component properties

Enable customizability of your component by adding variables

Code components

Components can also be written with (existing) React code. To create a code component, you first need to ensure code is enabled.

The Framer API can also be used to complement your code components, enabling advanced features such as property controls and allowing you to use Framer’s built-in tools such as the Page or Scroll right within your code component.

Using code components within your project also enable you to re-use existing production React components, for instance from a React design system and to distribute them as (Team) Packages.

Learn more about code components