How to share components with my team

How components work

Every component in Framer (both ones that you draw and code) ultimately get "compiled" into a small JavaScript file by Framer. So for example, if you draw a simple button with a title variable, the Framer compiler takes that and turns it into some code like this:

function Button({ title }) { return <div>{title}</div> }

That file will now live on a url like below and that's how it gets used everywhere on your project or site by Framer:

https://framer.com/m/Button-idLa.js@1VvbKFLIoQ1G5nswIlrM

• The file itself is an ES Module which is a browser standard. Browsers are really good at loading and caching these files and it's an open standard that works anywhere.

• Everything after the @ is the version of the component and updates every time the component gets updated. If you skip that part the component still works, but you'll always get the latest version which can lead to unexpected results (updates you were not counting on).

• The contents of the file is a React Component which can be used in any React environment (also outside of Framer, see Framer Handshake).

Sharing

Now that we know how component work it's very easy to share them. Just copy the url below to your clipboard and paste it on a Framer canvas and the component appears instantly.

https://framer.com/m/Button-idLa.js@1VvbKFLIoQ1G5nswIlrM

To get the url you can right click any component and select Copy Import which will contain a code snippet that contains the link.

You can obviously also just copy it from a canvas and paste it somewhere else, but in the background the exact same happens as above.

Now that we know how components work we can pick the best way to share them.

Component Project

The fastest and simplest way to share a set of components is to put them all in a central project that you call something like "Design System" and share with your team. They can open it in another tab and quickly find, copy and paste component into whatever project they are working on.

• It's nice to use canvas pages to lay the components out so you can have many root frames in sizes that make sense for your organization.

• You can have different configurations of the same component on the canvas to illustrate different uses. Copying a configured component copies it in that exact state.

• You can use simple text fields to document usage and constraints right next to the components on the canvas.

Component Site

If you can invest a bit more in your design system it can be cool to publish it as a site with a catalog of all your components and different types of usage. Framer comes with a "Copy to Clipboard" button in the insert menu that you can use to copy the component url to the clipboard and paste the component directly onto the canvas.

You can find an example site here.