Why create a component library?

Building a component library is crucial for efficient work. When reusing the same components across multiple projects, managing them through a library allows you to update components all at once and apply changes wherever those components are used. This saves time and maintains consistent design regardless of scale.

What elements can be made into components?

In Framer, you can make almost any UI element into a component, from simple to complex.

• Button

• Footer

• Navigation

• Page sections

• Interactive graphics and elements

Note: If a complex structure is frequently used, it is efficient to make it a component.

How to add components to the library

1. Click the Assets tab in the left panel

2. Select the component to save

3. Click the more menu (⋯) next to the component name and choose Library > Add

Importing components from the library

1. Open the Quick Menu with ⌘ + / (Mac) or Ctrl + / (Windows)

2. Browse or search for available components

Updating components across multiple projects

When you modify a registered component in the library, the Update button is activated in all projects using that component.

1. Locate the component to update in the Assets tab

2. Click the Update button

By just clicking the update button, all components can be updated at once without manual work.

Tips for managing components

1. Establish naming conventions

• Use slashes for folders.
  For example, naming the menu component as Navigation/Menu groups it under a "Navigation" folder.

• Structurally name components to include state, theme, and variant.
  Example: Buttons/Navigation/PrimaryButton

2. Centralize components

• Keep all components in a single project to easily update and reuse them.

3. Create Variants for breakpoints

• Include Desktop, Tablet, Phone in the component variant names. Framer will automatically select the right variant for the device.

4. Set Constraints

• Clearly define minimum/maximum width and height. The component size will adjust as intended when the screen size changes.

This article is an adapted translation of Framer's official blog post ‘Best practices for setting up a component library’.