Search Our Knowledge Base…

Components

Component Properties

Component Properties are what make Framer components truly flexible. They let you customize individual instances — changing the text, image, or visible state — without breaking the connection to the master.

What Are Component Properties?

Think of a Card component as a template for a card. It might have properties like Title (text), Description (text), Image (image), and Tag (text). Each card instance on your page can have different values for these properties, while sharing the same underlying design.

Finding Component Properties

  1. Click on any component instance on the canvas (purple border).

  2. Look in the right panel. Below the standard position and size fields, you'll see a section with the component's custom properties.

  3. Properties appear as labeled inputs: text fields, image pickers, dropdowns, toggles, etc.

Types of Properties You'll See

  • Text — A field where you type the label, heading, or description.

  • Image — An image picker to swap the thumbnail or background.

  • Boolean (Toggle) — True/false switches that show/hide elements (like showing an optional badge).

  • Enum (Dropdown) — Choose between variants like "Primary", "Secondary", or "Ghost" for a button style.

  • Color — Override the color for just this instance.

💡 Tip: Editing content via Component Properties is the cleanest way to customize — it keeps your instances connected to the master for design consistency while still letting each one show unique content.