How to use Framer Components

Sept 11, 2024 • 7 min read

Framer Components streamline the creation of reusable design elements across your site, boosting efficiency and ensuring consistency by allowing modifications to propagate site-wide, while simplifying design updates and design coherence.

This guide explores how to create and use Framer Components effectively, leveraging variables, property panels, and instances to balance cohesive design with unique customization.

How to create a component in Framer

Creating components in Framer is done in just a few clicks.

Select the design element you want to turn into a component.
Use the keyboard shortcut Command + K or right-click on your canvas and select “Create Component.”
Name your component. Use clear, descriptive names like ButtonPrimary or HeaderNav to keep components organized.

This action generates a new canvas specifically for your component, where you can output variables, customize states and variants.

Leveraging Framer Component variables

Variables are an integral part of Framer Components. By leveraging variables, you can manage dynamic content within your components, allowing for interactive elements that respond to user inputs or data changes.

1.Create a variable for the property you want to modify:

Click the + icon next to the property name.
In the overlay, name the variable and adjust its settings.
Once created, the property turns purple and displays the assigned name.

2.Available property types:

Text (Plain and Formatted)
Link
Image
Color
Toggle
Option
Number
Event
Date
Transition
Border
Cursor

3.Tips:

✔Use consistent variable names across your project.
✔Explore the wide range of property types available.

Mastering the use of variables enables you to build sophisticated, dynamic components that enhance user experiences.

What are Component variants?

Component variants in Framer allow you to create multiple versions of the same component with different styles, properties, or behaviors.

Variants make it easier to manage variations of a design, such as buttons with different states (e.g., hover, active, or disabled) or cards with different layouts.

Tip: Use variants to maintain consistency and where uniformity across different states is essential.

What are Component Instances?

When you create a component in Framer, you can use it multiple times throughout your project. Each use is called an "instance," any change made to the master component will be reflected across all instances.

Linking components to the CMS

Linking Framer Components to Framer’s Content Management System (CMS) fields allows you to create dynamic data-driven websites that automatically adjust based on the data they receive.

For a detailed guide on linking CMS data to Framer Components, check out our in-depth tutorial.

How to import an external component in Framer

Importing external components into Framer allows you to integrate custom, third-party design elements and code components into your project, expanding the tool’s capabilities.

Copy the the component URL from the source to your clipboard, shortcut Command + C
Use the keyboard shortcut Command + V on your canvas to import the component
The component will now appear in the Assets Panel, organized in its own dedicated section with the source name listed under the Components section.

This action lets you import external components, which may offer customizable states, variants, and other properties defined by their creator. You might also receive updates for these components, indicated by a purple "update" link. Depending on the creator settings, you may or may not be able to edit the component.

Best practices for organizing your Components in Framer

As your project grows, organizing your components becomes essential to maintaining a smooth workflow. Framer’s asset panel makes it easy to categorize and manage your components, so you can quickly locate and reuse them. Here are some quick tips to organize your library:

Group components by using "group/my-component" to nest them logically
Organize components by interaction type, such as navigation or content (e.g., articles). There's no strict rule—use what works best for your workflow.
Consistency is key—apply the same grouping method across your project to maintain clarity.
Leverage naming conventions that are intuitive for both you and your team to avoid confusion.

How to update Framer Components

One of Framer’s most useful features is the ability to update components across multiple projects. By simply editing the master component, you can propagate changes across every instance in your project.

Updating the component you created: Simply updating the master component will automatically update all instances. This is the core benefit of using components.
Updating an external component: When a component is sourced from an external source, any updates from the original creator will be indicated by a purple "Update" link.

People found this article useful