Build reusable Framer systems.

Component or section?

Make a component when the structure repeats or has a meaningful state. Keep a one-off editorial section on the page. A component should have a clear purpose, sensible defaults and a small set of variants.

Create a maintainable component

Here is the process broken into clear steps. Take them one at a time and check each off before continuing.

1. Select the repeated structure and create a component.
2. Name the component by its role, not its appearance.
3. Expose only properties that editors or page builders need to change.
4. Create variants for real states such as Default, Hover, Open or Disabled.
5. Test an instance at every breakpoint before copying it elsewhere.

Marketplace and shared assets

Marketplace components can accelerate a build, but inspect their layers, font dependencies, interactions and breakpoints before adopting them. Copy the smallest useful section into the project and replace dependencies you cannot maintain.

• Keep source and destination projects on compatible styles.
• Reset instance overrides when a component behaves unexpectedly.
• Unlink only when the copied version needs to evolve independently.
• Document shared libraries so future edits do not break other pages.

Pre-build checklist

The list below breaks this down into the parts that matter most. Read through each one and note anything that applies to your own setup.

• Confirm which states actually occur in real content, not hypothetical ones.
• Agree naming conventions for properties before building the first variant.
• Decide which properties are locked and which are editable by page builders.
• Check that nested components do not duplicate the same property twice.
• Set default variant content that reads sensibly even when nothing is edited.

Warning signs of an unstable component system

Before making changes, work through the points below. Each one covers a different part of the picture, so treat them as a set rather than picking favourites.

• Editors routinely detach instances to make small changes.
• The same override appears on most instances across the site.
• Variants multiply because states are combined rather than isolated.
• A single component controls unrelated sections of the page.
• Renaming a layer inside the component breaks existing instances.