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, in the PageProof plugin click the create new proof icon.
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:
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.
PDF:
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.
Include bounding box
SVG:
SVG: Will create a static proof.
Set the color profile:
same as file (default)
sRGB
Display P3.
Ignore overlapping layers*
Include attribute ID adds 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.
Include bounding box
Outline text
Note: A single layer is supported. You can not select multiple layers of your prototype design.
PNG:
PNG: Will create a single page static proof.
Set the resolution
Set the color profile:
same as file (default)
sRGB
Display P3.
Ignore overlapping layers*
Include bounding box
JPG:
JPG: Will create a single page static proof.
Set the resolution
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.
To see how to bring comments back into Figma using the PageProof plugin, read this article.