L

Import from Figma

Convert your Figma designs into production-ready code with the AI website builder.

Turn your Figma designs into working websites. Import designs and let the AI generate the code.

How It Works

Import Process
1

Get the share link from your Figma file.

2

Paste in Chat

Share the link with the AI: "Build this from my Figma: [link]"

3

AI Generates Code

The AI analyzes your design and creates matching code.

Best Practices

Prepare Your Figma File

For best results:

  • Use Auto Layout: Better responsive code
  • Name layers: Descriptive names help the AI
  • Group components: Logical grouping = cleaner code
  • Use components: Reusable designs = reusable code
What Gets Imported
ElementSupport
Layout✅ Full support
Colors✅ Extracted as variables
Typography✅ Font styles preserved
Images✅ Exported as assets
Icons✅ Converted to SVG
Interactions⚠️ Limited (hover states)
Animations❌ Must be added via prompts

Tips

Start with One Page

Import one page at a time for better results:

"Import the homepage from this Figma file"

Then:

"Now import the about page with the same design system"

Iterate After Import

The import is a starting point—refine with prompts:

"Make the navigation sticky" "Add hover effects to buttons" "Improve mobile responsiveness"

Coming Soon

  • Figma plugin for one-click export
  • Component library sync
  • Design token import

Next Steps