Skip to main content
All CollectionsIntegrationsFigma integration
Creating a proof directly from Figma
Creating a proof directly from Figma

With the PageProof plugin for Figma you can create proofs and new versions directly from Figma.

Gemma avatar
Written by Gemma
Updated over a week ago

To create a proof from Figma

Step 1

Head here to download the plugin.

Step 2

Follow the installation instructions and then go to plugins -> manage plugins... and search for PageProof to open the plugin. Log into PageProof.

Step 3

With your Figma prototype design open, click create proof.

The PageProof plugin in Figma showing your inbox.

Step 4

The proof name will default to the name of your Figma prototype design. The file type will default to URL however the following options are available: URL, PDF, SVG, PNG, and JPG.

URL:

Create a proof from Figma as a URL file type

  • URL: Will create an HTML web proof.

    • Set your Figma prototype share link to anyone can access, then copy and paste it into the URL field. Or, copy and paste copy prototype link.

Share link of your figma design


​

PDF:

Create a proof from Figma as a PDF file type

  • PDF: Will create a static proof.

    • If your prototype design has several layers selected, a multiple page PDF will be created. If you want to create a proof of certain layers, select your layers first before creating the proof.

    • If no layers are selected, a single page PDF of the entire prototype design will be created.

    • Set the color profile:

      • same as file (default)

      • sRGB

      • Display P3.

SVG:

Create a proof from Figma as an SVG file type

  • SVG: Will create a static proof.

    • Set the color profile:

      • same as file (default)

      • sRGB

      • Display P3.

    • Ignore overlapping layers*

    • Include attribute ID add an id tag to the SVG’s metadata. This allows JavaScript to easily access the <svg> element and can also be used to point to a specific id selector in a style sheet. Figma bases the id on the object’s name in the layers panel.
      ​
      Note: A single layer is supported. You can not select multiple layers of your prototype design.

PNG:

Create a proof from Figma as a PNG file type

  • PNG: Will create a single page static proof.

    • Set the color profile:

      • same as file (default)

      • sRGB

      • Display P3.

    • Ignore overlapping layers*

JPG:

Create a proof from Figma as a JPG file type

  • JPG: Will create a single page static proof.

    • Set the color profile:

      • same as file (default)

      • sRGB

      • Display P3.

    • Ignore overlapping layers*

*Overlapping layers

In Figma, the Ignore overlapping layers setting determines which layers are included in an export:

  • Enabled

    Only the selected layers are exported, and any overlapping objects are not included.

  • Disabled

    Any layers that intersect with the selected layer or group are included in the export.

To create a new version

Step 1

Search for the proof in your inbox. Hover over the proof and click the upload new version icon.

Click the upload new version icon to create a new version of the proof.

Related Articles
Creating a proof from Adobe InDesign
Creating a web proof of a Figma prototype in PageProof
Creating a proof directly from Airtable
Create a website proof from monday.com
How to install the PageProof plugin for Figma
Did this answer your question?