A Figma plugin to insert photos from the popular free stock photography site Pexels. All Pexels plugins are listed on the website.
- 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.
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.
git clone [email protected]:pexels/pexels-figma.git
cd pexels-figma
yarn install
- Visit https://www.pexels.com/api/ and click on "Request Access".
- Duplicate and rename
secrets.sample.jstosecrets.jsand add the API key.
Run once.
yarn build
Watch for changes.
yarn build:watch
- 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.jsonfile in the unzipped plugin folder.
When you're ready to publish a new version make sure you are logged in with the account that owns the plugin ([email protected], password is in 1password) and click "Publish new release".
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)