Figma API

Built by John Rippy | johnrippy.link

🏆 2025 Zapier Automation Hero of the Year — Project Phoenix: A 95-step AI sales pipeline cutting development time by 50%. Read more →

Design Asset Extraction & Export - Components, Styles & Images

Extract designs, components, styles, and images from Figma files using the official REST API. Export frames and nodes as PNG, JPG, SVG, or PDF. Perfect for design system documentation, asset pipelines, and design-to-code workflows.

What is the Figma REST API?

The Figma REST API allows programmatic access to Figma files, enabling you to extract design data, export assets, manage comments, and integrate Figma into your workflows.

Features

File Operations

• Get File - Retrieve complete file JSON with all layers and properties
• Get File Nodes - Extract specific nodes by ID
• Get File Metadata - Get file info without full content
• Get File Versions - Access version history

Asset Export

• Export Images - Render nodes as PNG, JPG, SVG, or PDF
• Get Image Fills - Download all images used in the file
• Batch Export - Export multiple nodes in one run

Components & Styles

• Get Team/File Components - List published components
• Get Component - Fetch component details by key
• Get Team/File Styles - List color, text, and effect styles
• Get Style - Fetch style details by key
• Get Variables - Access design tokens and variables

Collaboration

• Get Comments - Retrieve file comments
• Post Comment - Add comments to files

Organization

• Get Team Projects - List projects in a team
• Get Project Files - List files in a project
• Get User - Current user info

Use Cases

Design System Documentation

• Auto-generate component libraries
• Extract color palettes and typography
• Document design tokens/variables

Asset Pipelines

• Export icons and assets at multiple scales
• Generate app store screenshots
• Create marketing asset libraries

Design-to-Code

• Extract design specifications
• Generate style guides
• Sync design tokens to code

Design QA

• Track design changes via versions
• Monitor comments and feedback
• Audit component usage

Automation Workflows

• Trigger exports when files change
• Sync assets to CDN or storage
• Generate design reports

Input Parameters

Parameter	Type	Required	Description
task	string	Yes	Operation to perform (see tasks below)
accessToken	string	Yes*	Figma personal access token (*not needed for demoMode)
fileKey	string	No	File key from Figma URL
nodeIds	string	No	Comma-separated node IDs
teamId	string	No	Team ID for team operations
projectId	string	No	Project ID
componentKey	string	No	Component key
styleKey	string	No	Style key
exportFormat	string	No	Export format: png, jpg, svg, pdf
exportScale	number	No	Export scale (0.01-4)
depth	integer	No	Document traversal depth (1-4)
batchNodes	array	No	Nodes for batch export
webhookUrl	string	No	URL for webhook delivery
demoMode	boolean	No	Run with sample data (default: true)

Available Tasks

Task	Description
get_file	Get complete file JSON
get_file_nodes	Get specific nodes by ID
get_file_metadata	Get file metadata only
get_file_versions	Get version history
export_images	Export nodes as images
get_image_fills	Get all image fill URLs
get_comments	Get file comments
post_comment	Add a comment
get_team_projects	List team projects
get_project_files	List project files
get_team_components	List team components
get_file_components	List file components
get_component	Get component by key
get_team_styles	List team styles
get_file_styles	List file styles
get_style	Get style by key
get_variables	Get file variables
get_user	Get current user
batch_export	Export multiple nodes

Getting Your Access Token

1. Go to Figma Account Settings
2. Scroll to Personal access tokens
3. Click Generate new token
4. Give it a description and select scopes:
   • file_content:read - Read file content
   • file_metadata:read - Read file metadata
   • file_comments:read/write - Read/write comments
5. Copy the token (shown only once!)

Note: Personal access tokens now have a maximum 90-day expiration.

Example Usage

Get File Structure

{
  "task": "get_file",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "depth": 2
}

Export Specific Nodes as PNG

{
  "task": "export_images",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "nodeIds": "1:2,1:3,1:4",
  "exportFormat": "png",
  "exportScale": 2
}

Export as SVG

{
  "task": "export_images",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "nodeIds": "3:1,3:2,3:3",
  "exportFormat": "svg"
}

Batch Export with Different Formats

{
  "task": "batch_export",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "batchNodes": [
    { "nodeId": "1:2", "format": "png", "scale": 1 },
    { "nodeId": "1:2", "format": "png", "scale": 2 },
    { "nodeId": "1:3", "format": "svg" },
    { "nodeId": "1:4", "format": "pdf" }
  ]
}

Get All Components

{
  "task": "get_file_components",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "maxResults": 50
}

Get Design Tokens/Variables

{
  "task": "get_variables",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz"
}

Post a Comment

{
  "task": "post_comment",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "commentMessage": "This design is approved for development!",
  "commentX": 150,
  "commentY": 200
}

Output

Results are saved to the default dataset:

Export Result

{
  "task": "export_images",
  "success": true,
  "images": {
    "1:2": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/...",
    "1:3": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/..."
  },
  "format": "png",
  "scale": 2,
  "fileKey": "abc123xyz"
}

Components Result

{
  "task": "get_file_components",
  "success": true,
  "components": [
    {
      "key": "comp_abc123",
      "name": "Button/Primary",
      "description": "Primary action button",
      "thumbnailUrl": "https://..."
    }
  ],
  "total": 45,
  "fileKey": "abc123xyz"
}

Finding File Keys and Node IDs

File Key: From any Figma URL:

• https://www.figma.com/file/FILE_KEY/File-Name
• https://www.figma.com/design/FILE_KEY/File-Name

Node IDs:

1. Select a layer in Figma
2. Right-click → "Copy link"
3. The URL contains node-id=X:Y - the node ID is X:Y

Or use get_file with depth: 2 to explore the document structure.

Rate Limits

Figma API has rate limits based on tiers:

• Tier 1 (file/nodes/images): ~30 requests/minute
• Tier 2 (image fills): ~60 requests/minute
• Tier 3 (metadata): ~120 requests/minute

Image export URLs expire after 30 days.

Webhook Integration

Send results to Zapier, Make, n8n, or any webhook:

{
  "task": "export_images",
  "accessToken": "your-figma-token",
  "fileKey": "abc123xyz",
  "nodeIds": "1:2",
  "webhookUrl": "https://hooks.zapier.com/hooks/catch/123456/abcdef/"
}

Demo Mode

Test the actor without API credentials:

{
  "task": "get_file",
  "demoMode": true
}

Demo mode returns realistic sample data for testing integrations.

Pricing

Pay-per-result pricing:

Operation	Cost
Get file/nodes/metadata	$0.02
Get file versions	$0.01
Export images (per node)	$0.03
Get image fills	$0.02
Get/post comments	$0.01
Get team projects/files	$0.01
Get components/styles	$0.02
Get variables	$0.02
Batch export (per node)	$0.03

Related Actors

• Canva Connect API - Canva design automation
• Design Pickle API - Professional design requests
• AI Image Studio - AI-generated images

Support

• Figma API Docs: developers.figma.com/docs/rest-api
• Issues: Report on Apify

---