Sharing Components in Framer

Instead of recreating the same UI elements repeatedly in Framer, you can share components in your library to easily reuse them across multiple projects. This feature can be particularly advantageous if you're working in a team or managing a design system. Below, we explain step-by-step how to efficiently share, insert, update, and retrieve components.

1. Adding Components to the Library

If you want to reuse a component created in one project across all projects in your workspace, you can add it to the library.

How to Add to the Library

1. Open the Assets panel.

2. Click the more options ··· icon next to the component name.

3. Select Library > Add from the dropdown that appears.

2. Inserting Components

Components added to the library can be used in all projects within the workspace, and you can search for specific components by name.

Finding Components in the Library

1. Press ⌘ K (or Ctrl + K on Windows) to open the Quick Actions window.

2. Select Browse Library.

The badge above the search bar shows the current workspace name. Navigate using the arrow keys and press Enter to insert the component into the canvas.

3. Updating Components

When you modify the Primary component, the latest version is available in all projects using its instance, without the need to manually republish. Click the “Update” button in the Assets panel to apply changes to individual components. You can also cancel updates if necessary.

Note: The batch application of component changes only applies if the component instances have not been detached.

4. Adding Components via URL (Copy URL)

1. In the Assets panel, click the more options ··· icon on a component.

2. Select “Copy URL.”

3. Paste the copied URL directly onto a new project canvas.

If you double-click a component on the canvas to edit it, a popup will ask if you want to “Unlink Instance.” Unlinking will add the component to the asset library.

5. Importing Components from Code or React Projects

Components created in Framer can also be used in external React environments.

How to Use

1. In the more options ··· menu on a component, select “Copy Import.”

2. Paste the copied import statement into your React code.

For example, if you design a button in Framer and want it to appear only under specific conditions (e.g., URL parameters or user location), try including that button in your React code using the “Copy Import” option. You can place it before the component's main function or override it to customize the button's behavior.

If the issue persists after following these steps, please contact us via Framer's contact page.

Frequently Asked Questions (FAQ)

Q. Can only Workspace Administrators modify library components?

• Yes. You must have Edit permissions in the Workspace to modify and update them; Viewers cannot.

Q. If I detach an instance, can I no longer update changes at all?

• Yes. Detached instances exist as separate elements completely disconnected from the original component, so they are no longer affected by updates.

Q. When sharing a component, is the CMS data connected to it also shared?

• No. CMS is project-based and not shared per component, so CMS data is not shared when components are shared.

This article is adapted from the official Framer blog post ‘Sharing Components’.