{
"openapi": "3.0.1",
"info": {
"title": "Figma to Next.js Code Generator",
"description": "AI-powered Figma to Next.js code generator. Converts Figma designs to React components with Tailwind CSS. Auto-generates landing pages, dashboards, and complete websites. Claude AI included - no API key needed.",
"version": "0.0",
"x-build-id": "9DTs3LBbtheCAO6ci"
},
"servers": [
{
"url": "https://api.apify.com/v2"
}
],
"paths": {
"/acts/enforceable_orbit~figma-actor/run-sync-get-dataset-items": {
"post": {
"operationId": "run-sync-get-dataset-items-enforceable_orbit-figma-actor",
"x-openai-isConsequential": false,
"summary": "Executes an Actor, waits for its completion, and returns Actor's dataset items in response.",
"tags": [
"Run Actor"
],
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/inputSchema"
}
}
}
},
"parameters": [
{
"name": "token",
"in": "query",
"required": true,
"schema": {
"type": "string"
},
"description": "Enter your Apify token here"
}
],
"responses": {
"200": {
"description": "OK"
}
}
}
},
"/acts/enforceable_orbit~figma-actor/runs": {
"post": {
"operationId": "runs-sync-enforceable_orbit-figma-actor",
"x-openai-isConsequential": false,
"summary": "Executes an Actor and returns information about the initiated run in response.",
"tags": [
"Run Actor"
],
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/inputSchema"
}
}
}
},
"parameters": [
{
"name": "token",
"in": "query",
"required": true,
"schema": {
"type": "string"
},
"description": "Enter your Apify token here"
}
],
"responses": {
"200": {
"description": "OK",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/runsResponseSchema"
}
}
}
}
}
}
},
"/acts/enforceable_orbit~figma-actor/run-sync": {
"post": {
"operationId": "run-sync-enforceable_orbit-figma-actor",
"x-openai-isConsequential": false,
"summary": "Executes an Actor, waits for completion, and returns the OUTPUT from Key-value store in response.",
"tags": [
"Run Actor"
],
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/inputSchema"
}
}
}
},
"parameters": [
{
"name": "token",
"in": "query",
"required": true,
"schema": {
"type": "string"
},
"description": "Enter your Apify token here"
}
],
"responses": {
"200": {
"description": "OK"
}
}
}
}
},
"components": {
"schemas": {
"inputSchema": {
"type": "object",
"required": [
"figmaFileKey",
"figmaAccessToken"
],
"properties": {
"figmaFileKey": {
"title": "📁 Figma File Key",
"type": "string",
"description": "The file key from your Figma URL. Example: If your URL is figma.com/file/abc123def456/My-Design, the file key is abc123def456
Where to find it: Open your Figma file → Look at the browser URL → Copy the alphanumeric string after /file/
Try with example: Use 1156860863353724933 to test with our Whitepace SaaS Landing Page"
},
"figmaAccessToken": {
"title": "🔑 Figma Personal Access Token",
"type": "string",
"description": "Your Figma Personal Access Token for API access. Must start with figd_
How to get your token:
1. Go to Figma Settings → Account
2. Scroll to Personal Access Tokens
3. Click Generate new token
4. Give it a name (e.g., 'Code Generator')
5. Copy the token and paste it here
⚠️ Note: Keep your token secure! It provides access to your Figma files."
},
"componentNaming": {
"title": "🏷️ Component Naming Convention",
"enum": [
"PascalCase",
"camelCase",
"kebab-case"
],
"type": "string",
"description": "Choose how to name generated React components in your code.
PascalCase (recommended) - Standard React convention: MyComponent
camelCase - Lowercase first letter: myComponent
kebab-case - Hyphenated lowercase: my-component
💡 Tip: Use PascalCase for React best practices.",
"default": "PascalCase"
},
"includeTypeScript": {
"title": "📘 Generate TypeScript",
"type": "boolean",
"description": "Enable this to generate TypeScript (.tsx) files with full type safety instead of JavaScript (.jsx).
Why TypeScript?
• Better IDE autocomplete and intellisense
• Catch errors before runtime
• Self-documenting code with type annotations
• Industry standard for modern React development
✅ Recommended: Keep this enabled unless you specifically need JavaScript.",
"default": true
},
"websiteMode": {
"title": "🌐 Website Mode",
"enum": [
"landing-page",
"multi-page"
],
"type": "string",
"description": "Choose the generation mode based on your Figma design structure.
🎨 Landing Page Mode (Single responsive page)
• Automatically extracts sections from your frame
• Perfect for: Marketing pages, portfolios, product pages
• No frame names needed - just point to your Figma file!
📄 Multi-Page Mode (Complete website)
• Creates separate pages with routing and navigation
• Perfect for: Full websites, SaaS apps, multi-page sites
• Requires: Exact frame names in frameNames field
• Optional: Prototype flows for navigation
💡 Tip: Start with Landing Page mode if you're unsure - it's simpler!",
"default": "landing-page"
},
"frameNames": {
"title": "📄 Frame Names",
"type": "array",
"description": "⚠️ Required for Multi-Page mode
Enter the exact names of Figma frames to convert into pages. Each frame becomes a separate page in your website.
Important:
• Names are case-sensitive: 'Home' ≠ 'home'
• Copy names directly from your Figma layers panel
• First frame (or 'Home') becomes the homepage (/)
• Other frames become routes like /pricing, /about
Example:
• Frame 'Home' → / (homepage)
• Frame 'Pricing' → /pricing
• Frame 'Contact' → /contact
💡 Tip: Check the Multi-Page Structure Guide in the README for proper Figma setup.",
"items": {
"type": "string"
},
"default": []
},
"usePrototypeNavigation": {
"title": "🔗 Use Prototype Navigation",
"type": "boolean",
"description": "Generate navigation components based on your Figma prototype flows.
When enabled:
• Actor analyzes your Figma prototype interactions
• Creates navigation based on click actions between frames
• Generates proper Next.js <Link> components
• Results in more accurate navigation matching your design intent
When disabled:
• Navigation generated from frame order only
• All frames included in navigation
• May not match your intended user flow
💡 How to set up prototype flows in Figma:
1. Select a button/link in your Figma frame
2. Go to Prototype tab (right panel)
3. Add interaction: Click → Navigate to → [Target Frame]
4. Repeat for all navigation elements
✅ Recommended: Keep enabled if you've set up prototype flows in Figma. See Prototype Navigation Guide.",
"default": true
},
"selectedPages": {
"title": "⚙️ Pages to Convert",
"type": "array",
"description": "Optional: Filter which Figma pages to process (not to be confused with frames).
In Figma, pages are the tabs at the top (like 'Page 1', 'Page 2'). Leave empty to process all pages.
Example use cases:
• Your file has multiple pages for different projects
• You only want to convert designs from a specific page
• Testing with a subset of your design
⚠️ Note: Page names are case-sensitive. Copy them exactly from Figma.
💡 Tip: Most users should leave this empty to process all pages.",
"items": {
"type": "string"
},
"default": []
},
"sectionExtractionDepth": {
"title": "🔍 Section Extraction Depth",
"minimum": 1,
"maximum": 10,
"type": "integer",
"description": "How many layers deep to traverse when extracting sections from frames (1-10).
What this means:
• Controls how deep the Actor looks for section elements
• 1 = Only direct children of frames (fastest, recommended)
• 5 = Default, handles most design structures
• 10 = Maximum depth for complex nested designs
When to increase:
• Your sections are nested inside multiple groups
• You're getting 'Too few sections' warnings
• Your Figma structure is legitimately complex
⚠️ Trade-offs:
• Higher values = More thorough but slower processing
• Higher values = May extract unwanted nested elements
✅ Recommended: Keep default (5) unless you have specific nesting needs. See Troubleshooting Guide.",
"default": 5
},
"maxRequestsPerCrawl": {
"title": "🚦 Max API Requests",
"minimum": 10,
"maximum": 1000,
"type": "integer",
"description": "Maximum number of Figma API requests to prevent excessive usage on very large files.
What this controls:
• Safety limit to prevent runaway API usage
• Typical files use 10-50 requests
• Large files (100+ frames) may need more
When to increase:
• You have a very large Figma file (> 50 frames)
• You're getting 'Max requests reached' errors
• You're processing multiple pages with many frames
⚠️ Note: Each request costs a small amount. Higher limits = potentially higher costs for very large files.
✅ Recommended: Keep default (100) for most projects. Only increase for enterprise-scale Figma files.",
"default": 100
},
"enableVisualTesting": {
"title": "🧪 Enable Visual Testing",
"type": "boolean",
"description": "EXPERIMENTAL - Phase 6
Automatically test generated code against Figma designs using visual regression testing.
What it does:
• Launches generated Next.js code in headless browser
• Captures screenshots of each section
• Compares screenshots with Figma references using pixel-level comparison
• Attempts to fix sections that fail visual tests (iterative correction)
• Generates detailed HTML diff report
⚠️ Important:
• Adds 3-5 minutes to generation time
• Requires downloading Playwright browsers (~100MB first run)
• Uses additional compute resources
• May fail on complex layouts or animations
Benefits:
• Higher accuracy: Automatically catches visual discrepancies
• Quality assurance: Get reports showing exact differences
• Iterative fixes: AI re-generates failed sections with corrections
💡 Recommended: Disable for testing. Enable for production-quality output when time allows.",
"default": false
},
"visualTestingThreshold": {
"title": "📊 Visual Difference Threshold (%)",
"minimum": 0,
"maximum": 100,
"type": "integer",
"description": "Maximum acceptable visual difference percentage (0-100) between Figma design and generated code.
How it works:
• After generating code, each section is compared pixel-by-pixel with Figma
• Difference is calculated as percentage of mismatched pixels
• Sections exceeding threshold are marked as failed
• Failed sections trigger automatic regeneration with corrections
Threshold guidelines:
• 3% = Very strict (near-perfect match, may be too sensitive)
• 5% = Recommended (catches significant differences, tolerates minor variations)
• 10% = Moderate (allows more variation in fonts, spacing)
• 15%+ = Lenient (only catches major layout issues)
What causes differences:
• Font rendering variations (browser vs Figma)
• Anti-aliasing differences
• Spacing/padding minor deviations
• Color rounding (hex to RGB conversions)
✅ Recommended: Start with 5% for balanced accuracy.",
"default": 5
},
"enableIconVerification": {
"title": "🎨 Enable Icon Verification",
"type": "boolean",
"description": "EXPERIMENTAL - Phase 6.5
Visually verify that downloaded icons match their appearance in Figma designs.
What it does:
• Captures high-res screenshots of icons from Figma
• Compares screenshots with downloaded icon files
• Automatically retries failed icons with alternative formats/scales
• Tries: SVG 1x, SVG 2x, PNG 2x, PNG 3x, PNG 4x
• Generates icon verification report
Why this matters:
• Icons may look different when exported (especially SVGs)
• Gradients, filters, or effects may not export correctly
• Ensures visual consistency between design and code
⚠️ Trade-offs:
• Adds 10-30 seconds per icon batch
• Makes additional Figma API requests for screenshots
• May retry failed icons multiple times
Benefits:
• Higher icon accuracy with automatic retries
• Catches export issues early
• Detailed verification reports
✅ Recommended: Keep enabled for icon-heavy designs.",
"default": true
},
"iconVerificationThreshold": {
"title": "🔍 Icon Verification Threshold (%)",
"minimum": 0,
"maximum": 100,
"type": "integer",
"description": "Maximum acceptable visual difference percentage (0-100) for icon verification.
How it works:
• Each downloaded icon is compared with its Figma screenshot
• Difference calculated as percentage of mismatched pixels
• Icons exceeding threshold trigger retry with alternative settings
Threshold guidelines:
• 5% = Very strict (exact match, may cause excessive retries)
• 10% = Recommended (catches significant issues, tolerates minor rendering differences)
• 15% = Moderate (allows more variation)
• 20%+ = Lenient (only catches major export failures)
Common sources of variation:
• SVG rendering differences (browser vs Figma)
• Anti-aliasing differences at small sizes
• Color space conversions
• Path rounding differences
⚠️ Note: Higher thresholds reduce retry attempts but may accept lower-quality icons.
✅ Recommended: Use 10% for balanced icon quality.",
"default": 10
}
}
},
"runsResponseSchema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"actId": {
"type": "string"
},
"userId": {
"type": "string"
},
"startedAt": {
"type": "string",
"format": "date-time",
"example": "2025-01-08T00:00:00.000Z"
},
"finishedAt": {
"type": "string",
"format": "date-time",
"example": "2025-01-08T00:00:00.000Z"
},
"status": {
"type": "string",
"example": "READY"
},
"meta": {
"type": "object",
"properties": {
"origin": {
"type": "string",
"example": "API"
},
"userAgent": {
"type": "string"
}
}
},
"stats": {
"type": "object",
"properties": {
"inputBodyLen": {
"type": "integer",
"example": 2000
},
"rebootCount": {
"type": "integer",
"example": 0
},
"restartCount": {
"type": "integer",
"example": 0
},
"resurrectCount": {
"type": "integer",
"example": 0
},
"computeUnits": {
"type": "integer",
"example": 0
}
}
},
"options": {
"type": "object",
"properties": {
"build": {
"type": "string",
"example": "latest"
},
"timeoutSecs": {
"type": "integer",
"example": 300
},
"memoryMbytes": {
"type": "integer",
"example": 1024
},
"diskMbytes": {
"type": "integer",
"example": 2048
}
}
},
"buildId": {
"type": "string"
},
"defaultKeyValueStoreId": {
"type": "string"
},
"defaultDatasetId": {
"type": "string"
},
"defaultRequestQueueId": {
"type": "string"
},
"buildNumber": {
"type": "string",
"example": "1.0.0"
},
"containerUrl": {
"type": "string"
},
"usage": {
"type": "object",
"properties": {
"ACTOR_COMPUTE_UNITS": {
"type": "integer",
"example": 0
},
"DATASET_READS": {
"type": "integer",
"example": 0
},
"DATASET_WRITES": {
"type": "integer",
"example": 0
},
"KEY_VALUE_STORE_READS": {
"type": "integer",
"example": 0
},
"KEY_VALUE_STORE_WRITES": {
"type": "integer",
"example": 1
},
"KEY_VALUE_STORE_LISTS": {
"type": "integer",
"example": 0
},
"REQUEST_QUEUE_READS": {
"type": "integer",
"example": 0
},
"REQUEST_QUEUE_WRITES": {
"type": "integer",
"example": 0
},
"DATA_TRANSFER_INTERNAL_GBYTES": {
"type": "integer",
"example": 0
},
"DATA_TRANSFER_EXTERNAL_GBYTES": {
"type": "integer",
"example": 0
},
"PROXY_RESIDENTIAL_TRANSFER_GBYTES": {
"type": "integer",
"example": 0
},
"PROXY_SERPS": {
"type": "integer",
"example": 0
}
}
},
"usageTotalUsd": {
"type": "number",
"example": 0.00005
},
"usageUsd": {
"type": "object",
"properties": {
"ACTOR_COMPUTE_UNITS": {
"type": "integer",
"example": 0
},
"DATASET_READS": {
"type": "integer",
"example": 0
},
"DATASET_WRITES": {
"type": "integer",
"example": 0
},
"KEY_VALUE_STORE_READS": {
"type": "integer",
"example": 0
},
"KEY_VALUE_STORE_WRITES": {
"type": "number",
"example": 0.00005
},
"KEY_VALUE_STORE_LISTS": {
"type": "integer",
"example": 0
},
"REQUEST_QUEUE_READS": {
"type": "integer",
"example": 0
},
"REQUEST_QUEUE_WRITES": {
"type": "integer",
"example": 0
},
"DATA_TRANSFER_INTERNAL_GBYTES": {
"type": "integer",
"example": 0
},
"DATA_TRANSFER_EXTERNAL_GBYTES": {
"type": "integer",
"example": 0
},
"PROXY_RESIDENTIAL_TRANSFER_GBYTES": {
"type": "integer",
"example": 0
},
"PROXY_SERPS": {
"type": "integer",
"example": 0
}
}
}
}
}
}
}
}
}
}