This guide covers the basics of modifying components in Framer, so you can confidently customize your site.

What Are Components in Framer?

• Components are reusable elements that maintain consistency across your website.

• When you update a component, all instances of it are updated automatically.

• You can use them for buttons, headers, footers, and other repeated elements.

In Framer, regular components are wrapped in blue blocks, while components are wrapped in purple blocks.

Creating Components

1. Select the element you want to convert

2. Right-click the selected elements and choose "Create Component"

Editing Components

1. Double-click the component to open its editor.

2. Modify text, images, or other content as needed.

Using Variables

Variables in Framer allow you to create editable properties for components, enabling customization without altering the component's structure.

Setting Up Variables

• Within a component, define variables for properties like color, text, or size.

• These variables can be adjusted externally, providing flexibility in design.

Applying Variables

Outside of the component editor, apply desired value to the variables.

Wrapping Up

Editing components in Framer lets you customize your site while keeping a consistent design. By mastering creation, overrides, and variables, you can easily tailor your template to fit your brand.

Have questions? DM me on X — I’m happy to help! 🚀