How to share components with my team
By re-using components you can build pages faster. If you share them with your team, you can enable everyone to go faster.
How components work
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:
• 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).
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.
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.
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.
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.