The Ultimate Guide for Mastering Framer Components

What are Components in Framer?

Components in Framer are reusable design elements that help maintain consistency across your projects. They can be anything from simple icons to complex interactive elements to layouts.

Components can be packed with variants, variables, and interactions, making them incredibly powerful. If you're used to Figma components, Framer components should come easy to you

Think of components as Lego pieces—you can use them to build almost anything, and when you make a change to one, that change is reflected everywhere it’s used. That’s why understanding components is so important, especially if you want to create scalable, maintainable designs.

Creating Your First Component

To create a component in Framer, all you need to do is go to the asset pane and hit the plus icon next to components. Once you name your component and create it, You will be ready to make your first component.

Think of this view as the "master" view. This is where you can make changes to your master component. Changes you make here will be reflected across all instances of your component

Hover & Pressed States

One of the coolest things about Framer components is how easy it is to add interactivity. Hover and pressed states are key to creating components that feel alive and responsive

Unlike Figma, Framer doesn't use separate variants for these states. Instead, you can add these interactive states directly to your component. Start by selecting your component and clicking the "+" icon next to "Hover" or "Pressed" below the variant in the Properties panel. This automatically creates a new state for your component. Now, you can customize this state by changing properties like color, scale, or opacity. Framer will smoothly transition between these states when users interact with your component in preview mode.

Inheritance

A key concept that you MUST understand about Framer components is Inheritance. Unlike Figma, Framer works by using the first variant marked "Primary". The primary variant of a component acts as the base, and all other variants inherit its properties

This means changes made to the primary variant automatically apply to all other variants, unless those properties have been specifically overridden. If you override a particular property, you can see it highlighted in blue in the properties panel on the right hand side.

For example, imagine you have a card component with variants for different content types. If you update the corner radius of the primary variant from 8px to 12px, all other variants will reflect this change.

However, if you've set a specific background color for a "highlighted" variant, that color won't be affected by changes to the primary variant's background. This inheritance model allows you to make sweeping changes quickly while maintaining the unique aspects of each variant.

Variants

What if you want a button with multiple styles? That’s where variants come in. Variants allow you to create different versions of a component. For example:

• Variant 1 - A Large button

• Variant 2 - A medium button

To add a variant, just click on the Add Variant button on the right of the primary variant. From there, you can play around with different properties, like size, color, and even hover states.

Interactivity Between Variants

In Framer, creating interactivity between variants is a powerful way to make your components dynamic and responsive. Here's how to do it:

1. Set up your variants: First, create different variants of your component. These could be different states like 'Default', 'Expanded', 'Selected', etc.

2. Add interactions: With your component selected, look for the 'Interactions' panel. This is where the magic happens.

3. Choose a trigger: Click the '+' to add a new interaction. You'll see options like 'On Tap', 'While Hovering', or 'On Click'. Choose the one that fits your needs. Or you can just drag the handle to the desired variant.

4. Select the target variant: After choosing a trigger, you'll be prompted to select which variant you want to switch to when the interaction occurs.

For example, you might set up a card component to switch to an 'Expanded' variant when tapped, revealing more information. Or you could create a toggle that switches between 'On' and 'Off' variants when clicked.

Variables

Variables in Framer are what makes your components flexible and reusable. Let's say you've got a button component, and you want to easily change its text without making 100 variants components. Here's how you'd do it:

1. First, select the text layer in your button component.

2. Look for the text property in the right sidebar. Next to it, you'll see a little "+" icon. Click that, give it a sensible name like "Title".

3. Whenever you use this button component in your design, you'll see a "Title" field in the properties panel. Type in whatever you want - "Submit", "Let's go!", "Buy now" - and watch the text of your button update instantly. You can change this text for each instance of your button, all without messing with the original component.

4. Similarly, you can create variables for links, booleans, icons etc. Anything you wan't to be customizable at an instance level can be set as a variable.

Transitions & Delays

In Framer, transitions and delays are both crucial for creating smooth, professional-looking interactions, but they serve different purposes.

Transitions define how a component changes from one state to another. When you add a transition to a property, you're telling Framer how to animate that change. For example, you might set a color transition to "Ease" over 0.3 seconds. This means when the color changes, it'll smoothly ease into the new color over that time, rather than snapping instantly.

Delays, on the other hand, determine when an animation starts. If you set a delay of 0.5 seconds on a transition, the animation won't begin until half a second after the trigger (like a hover or click) occurs.

It's crucial to ensure that the transition time isn't longer than the delay. Here's why: If the transition time exceeds the delay, you'll encounter a problem where the second transition starts before the first one completes. This causes animations to overlap and interfere with each other, resulting in unpredictable and often visually jarring effects.

Conclusions

Once you truly understand these concepts, the sky is the limit with Framer. Remember, great design is iterative. Don't be afraid to revisit and refine your components as you learn more. With practice, you'll find yourself creating more efficient workflows, more consistent designs, and more awesome transitions and animations. Happy building designers!

• To learn more, check out our compilations for the ultimate free / paid Framer courses

• For more advanced stuff, check out our code component library or UI Kit for Framer