Using NPM packages in Framer X
Make sure you're using a folder-backed project. Alternatively, you can open a .framerx file’s temporary location while the project is opened in Framer X by selecting
Show Project Folder.
Use the terminal to navigate to your project location:
~ \$ cd project.framerfx
Now you can install any NPM package using Yarn.
~/project.framerfx \$ yarn add 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.
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