Skip to main content
Import designs from Figma into your Hiveku project. The AI assistant analyzes the design and generates matching HTML and CSS.

​
Connect Figma

You can connect Figma in two ways:
  • Go to Settings > Integrations > Figma and click Connect
  • Or paste a Figma URL directly in the AI chat — you’ll be prompted to connect if you haven’t already

​
Import a design

1

Copy the Figma URL

In Figma, select the frame or component you want to import and copy its URL from the browser address bar or the Share menu.
2

Paste in AI chat

Paste the URL into the AI chat input. You can add instructions like:
Import this Figma design and build it as a responsive landing page
3

Review the generated code

The AI creates HTML and CSS files based on the design. Review the output in the editor and preview panel.

​
What gets imported

  • Structure — layout hierarchy, sections, and component grouping
  • Colors — exact hex/RGB values from the design
  • Typography — font families, sizes, weights, and line heights
  • Spacing — margins, padding, and gaps between elements

​
What isn’t imported

Figma import focuses on visual structure and styling. The following are not automatically carried over:
  • Prototype interactions and animations
  • Complex auto-layout constraints (simplified during conversion)
  • Custom fonts (you’ll need to add font files or use Google Fonts)
  • Embedded images (placeholders are added — replace with actual assets)

​
Tips for best results

  • Name your frames in Figma — named layers produce cleaner, more semantic HTML
  • Import one section at a time rather than an entire multi-page design
  • Use auto-layout in Figma — it translates more accurately to flexbox and grid
  • Clean up before importing — hidden layers, unused variants, and overlapping elements can confuse the conversion