Import from Figma

Turn a Figma share link into a working website. Learn what gets imported (layout, colors, fonts, icons), how to prepare your file, and how to refine it.

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