Find file History
Latest commit 73ae885 Mar 23, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
images add projector to demos Mar 21, 2018 Update Mar 22, 2018
index.html add projector to demos Mar 21, 2018
perspective.js add projector to demos Mar 21, 2018

Figma Api Projector

This demonstrates using the Figma REST API to render and project an image onto a mockup.

API Usage

We use 1 endpoint in this project:

  • GET /v1/images/:file_key - Render a frame from a specific Figma document and return a url to rendered image.

We render an image of a specific frame and use perspective.js to project that rendered frame into several different mock ups. You could imagine using this to demo the design for an app you are working on in Figma.

Set up

  1. Update PERSONAL_ACCESS_TOKEN in index.html
  2. Open index.html in a web browser.
  3. Select a frame from a Figma document you want to project on to the mock ups and copy the url.
    • Be sure the the url you copy includes the node-id.
  4. Input the frame url on index.html and click render.

You should see your frame projected into each image on the page.