How to build reusable Framer sections with components and variants

Most Framer sites have the same problem by the third or fourth page: the testimonial block on the homepage looks slightly different from the one on the pricing page, the call-to-action banner has three spacing values depending on where it was pasted, and a simple copy change means hunting through every breakpoint. None of this is a skill problem. It happens because sections were duplicated instead of built once and reused.

Framer components and variants fix this. In this guide we will turn the sections you repeat most often into components, set up variants for the states and layouts they need, and expose the right variables so you or your client can edit content without touching the structure. The goal is simple: change a section once, and see it update everywhere.

Decide which sections deserve to be components

Not everything should become a component. If a block appears once and is unlikely to repeat, leaving it as a regular frame keeps your project easier to read. The sections worth converting are the ones that show up on more than one page or more than once on the same page.

Before building anything, scroll through your design and list the repeat offenders. On a typical marketing or portfolio site, the list looks something like this:

• Navigation and footer: present on every page and the first thing to drift out of sync.
• Call-to-action banners: the same structure with different headlines and buttons.
• Feature or service cards: repeated in grids with different icons, titles and descriptions.
• Testimonials and logo strips: often reused on home, pricing and case study pages.
• Buttons and tags: small, but they carry hover and pressed states that should behave identically everywhere.

Start with the smallest pieces, like buttons, then build the larger sections from them. A card component that contains a button component means a button change flows into every card automatically.

Build the component from a clean stack

A component is only as flexible as the layout inside it. Before you convert a section, make sure it is built with stacks rather than absolutely positioned layers. Set width to fill or a fixed maximum, set height to fit content, and give text layers fill width so they wrap instead of overflowing.

Once the structure is clean, select the frame, right-click and choose to create a component. Framer moves it into your project's assets, and the original on the canvas becomes an instance. From now on, you edit the primary component and every instance follows.

A few habits make components easier to live with later:

• Name layers clearly inside the component, for example Heading, Body, Primary button. You will see these names again when you create variables.
• Keep padding on the outer stack of the component, not on every child, so spacing is controlled in one place.
• Avoid fixed heights. A section that fits its content survives longer headlines and translated copy.

Use variants for states, not for different designs

Variants are predefined versions of the same component. Framer's own dictionary entry on component variants describes them as states or versions of a component, such as primary and secondary buttons, or default and hover states. That definition is a useful guardrail.

Good variants share the same structure and differ in a few properties: colour, alignment, which image side, whether a badge is visible. If two "variants" have completely different layer trees, they are really two components, and forcing them together makes the component harder to maintain.

For a call-to-action banner, sensible variants might be:

1. Light and Dark background versions for alternating page sections.
2. Centered and Split layouts, where the split version puts an image beside the text.
3. Compact for use inside blog posts or narrow columns.

Each instance on the canvas can then be set to whichever variant fits its page, while the copy, spacing and button styles still come from the same primary component.

Add hover and pressed states with interactions

Interactive states belong inside the component, not on each instance. For buttons and cards, add a hover variant and a pressed variant, then adjust only what should change: a background colour, a slight shadow, an arrow that moves a few pixels. Framer animates between variants with the transition you set, so keep it short. Something in the range of 0.2 to 0.3 seconds feels responsive without drawing attention to itself.

Framer Academy has a short lesson on creating animated component interactions that walks through the effect, trigger and transition settings if you want to go deeper. The main rule is restraint: if every card scales, tilts and glows on hover, nothing feels clickable any more.

Design the hover state for someone scanning the page, not for a showreel. A clear change in colour or elevation is enough to say "this is clickable".

Expose variables so content stays editable

The point of a reusable section is that each instance can carry different content. Framer lets you turn properties inside a component into variables that appear on every instance. Typical ones are the heading text, body text, image, link and whether an optional element is visible.

Be selective. A component with twenty variables is just as confusing as twenty duplicated frames. For a feature card, four or five variables usually cover it: icon, title, description, link and an optional badge toggle. Name them in plain language so a client editing the site understands what each one does.

Variables also let you nest components cleanly. If a card contains a button component, you can pass the card's link and label down to the button, so editing one instance never requires opening the component itself.

Handle breakpoints with variants, not duplicates

Responsive behaviour is where duplicated sections cause the most damage. A common mistake is building a separate navigation for desktop, tablet and phone, each pasted on its own breakpoint. When the menu items change, three copies need updating.

A better approach is a single navigation component with variants for each layout, for example Desktop, Tablet and Phone, and a further Phone open variant for the expanded menu. On each breakpoint you place the same component and pick the matching variant. The links, logo and labels all live in one place.

The same pattern works for any section whose layout shifts significantly on small screens, such as a split banner that stacks vertically on phone. If the change is only stack direction or width, you often do not need a variant at all; a well-built stack handles it.

Keep your component library tidy as the site grows

Components save time only while you can find them. As the project grows, a few maintenance habits pay off:

• Group related components with consistent naming, such as Section / CTA, Section / Testimonials, UI / Button.
• Delete unused variants instead of leaving experiments in the component.
• Avoid detaching instances to make one-off tweaks. If a tweak is needed twice, it is a variant or a variable.
• Before handing the site to a client, check each component in preview at every breakpoint and with longer copy than you designed for.

Conclusion

Reusable sections in Framer come down to three decisions: build the component on a clean stack, use variants for genuine states and layouts, and expose only the variables people actually need to edit. Start with buttons and your navigation, then move to the sections you repeat most. The first component takes a little longer than copy and paste. Every change after that takes a fraction of the time, and your site stays consistent long after launch.