Best practices for setting up a component library

Why create a component library?

Creating a component library early is key to efficient design. If you’re reusing the same components across projects, a library centralizes them, allowing you to update components once and apply changes everywhere they’re used. This saves time and ensures consistent designs at scale.

What can be turned into a component?

Components can range from simple to complex elements. Common examples include:

• Buttons

• Footers

• Navigations

• Page sections

• Interactive graphics and elements

Adding a component to your library

1. Navigate to the Assets tab in the left panel.

2. Select the desired component.

3. Click the three dots next to the component name and choose “Add to Library”.

Importing a component from your library

1. Press ⌘ + / (Mac) or Ctrl + / (Windows) to open the Quick Menu.

2. Browse available components or search for a specific one.

Updating components across projects

When you update a component in the master file, an “Update” button appears next to the component name in the Assets tab of all projects using it. Click “Update” to bring the component to its latest version.

Best practices for components

Use naming conventions:

• Use a forward slash for folders. For example, name a menu component Navigation/Menu to group it under a folder named “Navigation.”

• Name components structurally to include states, themes, and variations. Example: Buttons/Navigation/PrimaryButton.

Organize your components:

• Keep all components in a single project for easy updates and scalability.

Variants for breakpoints:

• Name component variants as Desktop, Tablet, and Phone to ensure Framer automatically selects the correct variant for each breakpoint.

Set constraints:

• Define proper maximum/minimum width and height for components to ensure predictable behavior when resized.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.