Creating, Publishing, and Testing Components

5m

Intermediate

Component Libraries in Framer have become increasingly popular, with some great examples of creating drag and drop tools to enable programmatic control over elements in a Framer project.

If you’ve taken a stab at doing some of this yourself, you may find these tips useful. They’re mainly aimed at those building code component libraries, though they will work for design components as well.

If you wanted to test your new library in a sample project and see if everything works, you’d then have to publish it, and then install it, right? Not necessarily!

In this article I’ll show you how to test your packages for Framer before you release them into the wild. You’ll need to use Terminal for most of this work.

Testing Before Publishing

Being able to test your components before publishing them is really important. This is particularly true if you’re relying on paths or package names in your components.

Your project for your components might be called “MyLibrary.framerx”, but when you publish to the Framer store, or publish to a team store, the installed name will be different.

Once installed in another project, your package will be in the @framer namespace.

This means it will be called @framer/myusername.mylibrary or @framer/myteam.mylibrary.

Yarn to the rescue

Behind the scenes Framer uses a package manager called Yarn. Yarn has some useful tricks for developers working on packages. Install yarn by following these instructions.

Yarn link

Using the yarn link command will create a reusable link to a folder as long as that folder has a valid package.json file in it. Take a look in any Framer project folder and you'll see there is a package.json file.

If you haven’t yet published your package, you’ll need to add a name to the package.json file. The name entry should look like this:

{
'name': '@framer/username.packagename',
...
//rest of package.json contents
}
COPY

Where username is your Framer account username and packagename is the name you choose for your package. You can always remove this and let Framer add the “real” name later when you do publish.

If you’ve already published your package, you can use yarn link straight away. Open the file in your project called .yarnrc, and copy the line that says --link-folder "/Users/.../yarn-link-folder".

If you then run yarn link --link-folder "/Users/.../yarn-link-folder" inside the project folder, yarn will create a link for you, based on the name. You should see something like this:

Building your package

Once you’ve created a link, you’ll need to build the package in the same way that the Framer package store builds packages. You can do this easily with the Framer command line tool.

To install the Framer command line tool you can use yarn again, with:

$ yarn global add framer-cli

which makes the framer-cli available in Terminal anywhere on your machine.

The first time you run this in Terminal, you’ll have to log in to your Framer account, using:

$ framer authenticate youremail@example.com

Now, you just need to run the build command like this with your component library project:

$ framer build MyLibrary.framerfx
COPY

This will build your component package for you.

Using a linked package

Let’s now create a project which we xan use to test our our package. Start a new document in Framer and then “install” the package so it shows up as if you’re installing a package from the Framer packages panel.

With a new document created, open the project folder in Terminal and type:

$ yarn link @framer/username.packagename
COPY

This tells Yarn that you want to use the linked version of the package in your project.

Finally, we need to tell Framer that it has a new package available.

Open your test project’s folder and edit the package.json file. We need to give the project a new dependency of our library.

{
//...rest of package.json
"dependencies": {
"@framer/username.packagename":"^1.0.0"
}
}
COPY

If you open your test project now, you'll see your package listed under the components section!

You’ve just “installed” your package, without publishing it or installing it.

Why do this?

At this point you might be wondering why we did all this.

Well, now we’ve got the link set up, we can carry on working on our library and see how it will work in projects without have to publish the changes.

Each time you update the library, you can build a new version using

$ framer build MyLibrary.framerfx

And any project using the linked version will automatically update to the new version as well.

Watching for updates

We can even set up a watch script to run that will rebuild the library every time we make a change.

To do this, we need to install another tool to watch for changes in our library project.

$ yarn add chokidar-cli --dev

Now we can run this command to watch for changes in our library and rebuild it whenever we’ve changed something:

$ yarn run chokidar "code/**/*" -c "framer build"

This command watches for changes in the code folder, and runs the framer build command in the library when anything changes.

To stop watching for changes just type ⌃C .

Using external libraries

You might also want to integrate an existing JavaScript library into Framer. The tips we used above can be used for this as well. You can use yarn link to other external, local git repositories as dependencies of your package.

When doing this, you need to provide the --link-folder argument to yarn link, because Framer uses it’s own yarn link folder.

To see what your Framer yarn link folder is, go into a Framer project and type cat .yarnrc, you’ll see a line like this:

--link-folder "/Users/sam/Library/Application Support/Framer X/yarn-link-folder"

You can then use that link folder when linking other non-Framer libraries into Framer:

$ cd ~/MyJavascriptLibrary
$ yarn link --link-folder "/Users/sam/Library/Application Support/Framer X/yarn-link-folder"
$ cd ~/MyLibrary.framerfx
$ yarn link MyJavascriptLibrary
COPY

Finishing Up

Remember, before you actually publish your library to Framer, make sure you clean up your placeholder names you’ve set in the package.json files.

I hope these tips have been helpful. I look forward to seeing more great libraries created for Framer!