Pexels Figma Plugin

A Figma plugin to insert photos from the popular free stock photography site Pexels. All Pexels plugins are listed on the website.

Photo Usage Licence

All photos and videos on Pexels are free to use.
Attribution is not required. Giving credit to the photographer or Pexels is not necessary but always appreciated.
You can modify the photos and videos from Pexels. Be creative and edit them as you like.

View the Licence →

Build instructions

The main plugin code is in src/code.ts. The HTML for the UI is in src/ui.html, while the embedded JavaScript is in src/ui.ts. These are compiled to files in dist/ by Webpack and are what Figma will use to run the plugin.

Clone the repository and install the dependencies

git clone git@github.com:pexels/pexels-figma.git
cd pexels-figma
yarn install

Generate an API key

Visit https://www.pexels.com/api/ and click on "Request Access".
Duplicate and rename secrets.sample.js to secrets.js and add the API key.

Compile the source files

Run once.

yarn build

Watch for changes.

yarn build:watch

Point Figma to the plugin

Open the Figma desktop app and open any design file (or create a new one) so the “Plugins” app menu item is shown.
From the app menu bar go to Plugins → Development → New Plugin.
Under “Link existing plugin” select the manifest.json file in the unzipped plugin folder.

Publish a new version

When you're ready to publish a new version make sure you are logged in with the account that owns the plugin (bruno@pexels.com, password is in 1password) and click "Publish new release".

Troubleshooting

When you run yarn install and get a "401 Unauthorized" error make sure that your ~/.npmrc file looks like this:

registry=https://registry.npmjs.org/
@pexels:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=********** (Token generated from github at https://github.com/settings/tokens)