# Figma Image/Screenshot Feature
## Overview
The MCP server now supports capturing screenshots and rendered images from Figma designs using the **getImage** tool.
## Features
- **Multiple Formats**: PNG, JPG, SVG, PDF
- **Scalable**: Scale from 0.01x to 4x for higher/lower resolution
- **Automatic Download**: Test script downloads images automatically
- **Temporary URLs**: Figma provides time-limited URLs (valid for ~30 minutes)
## Usage
### Via MCP Tool
```
Use the getImage tool with:
- fileKey: INORb289gzR56ny4JuCPLo
- nodeId: 2168:13148
- format: png (optional: jpg, svg, pdf)
- scale: 2 (optional: 0.01 to 4)
```
### Via Test Script
Run the test script to capture and save an image:
```bash
npx tsx test-image.ts
```
This will:
1. Request an image from Figma API
2. Get a temporary download URL
3. Download the image
4. Save it as `figma-screenshot-{nodeId}.{format}`
## Format Comparison
| Format | Best For | Pros | Cons |
|--------|----------|------|------|
| **PNG** | UI designs, screenshots with transparency | Lossless, supports transparency | Larger file size |
| **JPG** | Photos, large designs | Smaller file size | No transparency, lossy |
| **SVG** | Icons, simple vectors | Scalable, small size | Not all Figma elements render well |
| **PDF** | Print-ready documents | Vector format, professional | Larger size, needs PDF reader |
## Scale Options
- **1x** (default) - Original size
- **2x** - High DPI displays (Retina)
- **3x-4x** - Very high resolution (printing, zooming)
- **0.01-0.99x** - Thumbnails and previews
## Example Output
For the Threat Intel Hub design:
- File Key: `INORb289gzR56ny4JuCPLo`
- Node ID: `2168:13148`
- Format: PNG
- Scale: 2x
- **Result**: ~1.2 MB high-quality screenshot
## API Endpoint
The tool uses Figma's Images endpoint:
```
GET https://api.figma.com/v1/images/{fileKey}?ids={nodeId}&format={format}&scale={scale}
```
## Important Notes
1. **Temporary URLs**: Image URLs expire after ~30 minutes. Download immediately if needed.
2. **Node IDs**: Use colon format (`2168:13148`) or dash format (`2168-13148`) - both work.
3. **Authentication**: Requires valid Figma Personal Access Token in `.env`
4. **Rate Limits**: Figma API has rate limits - avoid rapid successive calls
## Troubleshooting
### "No image URL returned"
- Check that the node exists and is visible
- Some node types may not be renderable (e.g., empty frames)
- Verify the node ID format
### "Invalid token"
- Ensure your `FIGMA_TOKEN` in `.env` is a Personal Access Token
- Check token hasn't expired
- See [TROUBLESHOOTING.md](./TROUBLESHOOTING.md)
### Image quality issues
- Increase the `scale` parameter (try 2x or 3x)
- For print: use PDF or SVG format
- For web: PNG at 2x is usually best
## Use Cases
1. **Design Documentation** - Capture screenshots for design system docs
2. **Asset Export** - Export individual components as images
3. **Presentations** - Get high-quality screenshots for slides
4. **Automated Testing** - Compare design versions visually
5. **Social Media** - Export designs for sharing
6. **Print Materials** - Get PDF exports for printing
## Testing
Test the feature with:
```bash
# Basic test
npx tsx test-image.ts
# Or modify test-image.ts to test different:
# - File keys
# - Node IDs
# - Formats (png, jpg, svg, pdf)
# - Scale factors
```
