Pricing
Pay per event
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.
0.0 (0)
Pricing
Pay per event
0
1
0
Last modified
12 minutes ago
figmaFileKeystringRequired
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
figmaAccessTokenstringRequired
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.
componentNamingEnumOptional
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.
"PascalCase": string"camelCase": string"kebab-case": stringDefault value of this property is "PascalCase"
includeTypeScriptbooleanOptional
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 value of this property is true
websiteModeEnumOptional
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!
"landing-page": string"multi-page": stringDefault value of this property is "landing-page"
frameNamesarrayOptional
⚠️ 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.
Default value of this property is []
usePrototypeNavigationbooleanOptional
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 value of this property is true
selectedPagesarrayOptional
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.
Default value of this property is []
sectionExtractionDepthintegerOptional
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 value of this property is 5
maxRequestsPerCrawlintegerOptional
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 value of this property is 100