Export a PNG screenshot of a specified frame from a Figma URL.
When to use
- When you need a static screenshot of a Figma design
- Before comparing the design vs the implementation
Prerequisites
FIGMA_ACCESS_TOKEN: environment variable, or placed in the project root's.env(the script reads it itself)- No extra packages needed—the script only uses Python's built-in urllib
Usage
python "${CLAUDE_PLUGIN_ROOT}/scripts/figma-export.py" "<figma_url>" --output design.png [--scale 1] [--node-id <id>]
The script is in the plugin directory, not in the user's project—the path must use ${CLAUDE_PLUGIN_ROOT}, a relative path will fail to find the file.
Parameters
| Parameter | Required | Description |
|---|---|---|
figma_url |
Yes | URL of the Figma file or frame |
--output |
No | Output filename (default figma-export.png） |
--scale |
No | Scale factor (default 1). It must match the device pixel ratio of the web page screenshot, otherwise pixel comparison will produce full-screen false differences |
--node-id |
No | Specify node ID (obtained from the URL's node-id= parameter) |
Figma URL format
The following formats are supported:
https://www.figma.com/file/XXXXX/FileName?node-id=1-2https://www.figma.com/design/XXXXX/FileName?node-id=1-2
Alternatives
If there is no Figma Token:
- Ask the user to manually export a screenshot from Figma
- Or use Playwright to open the Figma URL and take a screenshot (requires the user to be logged in to Figma)