Components are reusable building blocks to be used within and across your projects.
Framer knows two types of components:
- Components designed on the canvas
- 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:
- Clicking the Component button in the top toolbar
⌘ + Kfor Mac or
Ctrl + Kfor 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.
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
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.
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.
Enable customizability of your component by adding variables
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.