Import from Figma

Turn a Figma frame into a website with the Looops plugin: what gets imported (layout, colors, fonts, icons) and how to prepare and refine your file.

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

How It Works

Import Process
1

Install the Plugin

Install the Looops plugin in Figma.

2

Select and Copy

Select the frame you want in Figma, then copy it.

3

Paste in Chat

Paste directly into the Looops chat box. The design comes across with layout, colors, fonts, and images, and the AI generates 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"

Next Steps