Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.
/ figma-pexels Public archive

A Figma plugin to insert photos from the popular free stock photography site Pexels.

Notifications You must be signed in to change notification settings

craigmdennis/figma-pexels

Repository files navigation

This is now an official Pexels plugin

This repo is now archived. Code is now maintained over at https://github.com/pexels/pexels-figma/.

Plugin Cover Art

Pexels Figma Plugin

Node.js CI

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:craigmdennis/figma-pexels.git
cd figma-pexels
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 Figma 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.