Last updated 4 days ago

Framer Projects

Framer projects are just JavaScript projects. If you look inside one you'll find familiar files like package.json, node_modules, and yarn.lock. The project dependencies are managed with Yarn, and (private) Framer stores are just npm repositories.

Folder Projects

Folder backed projects are a beta feature and you might lose work if you choose to use them. Be sure to add everything to git so you can always restore to a previous version by hand.

Default Framer X projects are binary format with the .framerx extension. They are zip compressed folders that temporarily get extracted while you work on them. This way we can optimize the experience for common users that like to double click to open, support multiplatform in the future and make file sharing reliable.

For more advanced usage, like adding to Git, we also support folder backed projects. They have the .framerfx extension and we set the bundle bit, so MacOS still sees them as a single file in the Finder that you can double click.

  • Create a new project, hold option and select File → Save…. You’ll see an option “File Format” where you can select “Framer X (Folder).

  • For existing .framerx projects, change the extension in the Finder to .zip and double click to extract them. Rename the folder extension to .framerfx and it should get a Framer project icon.

External Libraries

Under the hood Framer uses npm with yarn to manage all dependencies. You can easily install any external dependency just like you would with any other JavaScript project.

Make sure you are using a folder based project. Alternatively you can also open a .framerx file’s temporary location while the projects is opened in Framer X by selecting File → Show Project Folder….

Use the terminal to navigate to your project location:

~ $ cd project.framerfx

Now you can install any npm package using yarn, just like you normally would.

~/project.framerfx $ yarn add --dev lodash @types/lodash

From here, the package will be added to the node_modules and package.json file. It will be available in all your code components and automatically installed as a dependency whenever a project gets opened.

Framer runs its own npm registry, which is only used for packages in the @framer scope.

While most libraries work out of the box, some things might need tweaking in Framer. And because Framer runs the code, it can have performance or security implications for your projects (although the browser provides a fairly safe sandbox).

Private packages

To install packages from a private NPM registry, you can leverage your system-wide ~/.npmrc to set up the details of your registry.

As an example; let's assume the private registry is set up at https://registry.acme.corp and all packages are prefixed using the @acme scope. To set up the private registry, run the following commands in your terminal:

npm config set registry https://registry.acme.corp/ --scope=@acme
npm login --scope=@acme

After logging in, your private registry is set up and you will be able to install packages from your private registry:

~/project.framerfx $ yarn add @acme/library

Data from JSON

Framer X supports reading json data from any local file and use it directly in your code, so you can work with real data for any project.

  1. Open your project in Framer X and select File → Show Project Folder…

  2. Open the tsconfig.json file in your editor and add "resolveJsonModule": true to compilerOptions. Also see the documentation.

  3. You can now import any json document like you would any other module: import * as data from "./data.json"

As a bonus, VSCode will automatically pick up the contents of your json file and add it to type checking and autocomplete so you can avoid simple mistakes.

Git Integration

For git integration, you will need a folder backed project. You can then simply add them to git, like you would with any other file. When you open a project, Framer verifies if you have the right .gitignore rules in place and warns you if you don't.

Collaboration via Git on Framer project should go fairly well, as most files are mergeable. Try to avoid having multiple people edit json files like design/document.json as you'll have to merge them by hand. If you are planning to use many large media files, you might want to leverage Git LFS.

Store Publishing

Because Framer just uses yarn to manage packages, you can easily publish to your private store from the command line and integrate auto publishing in your workflow. It's easiest to use folder backed projects for this.

Store publishing requires authentication, which is being managed in the .npmrc file. Make sure you’ve published the package at least once and verify it exists in the root of your project.

~/design-system.framerfx/ $ yarn publish --access=restricted

Yarn will interactively ask you for the new version. If you know the version upfront you can use --new-version=1.2.3

Automated Workflow (build on commit)

A typical example would be where a GitHub commit to a package would trigger a GitHub Action or CircleCI script to automatically upload a new version to the store.

The auto publishing scripts don't account for package building yet, so code components cannot automatically be updated. We are working on a cli tool that will allow you to do yarn framer build to generate a new build/index.js.