Skip to main content
If you already have a design in Figma, Hiveku can turn it into real, responsive code. The AI reads the frame’s layout, typography, and colors, then writes the components.

​
Connect Figma First

Before importing, connect your Figma account.
1

Open Integrations

Go to Settings > Integrations.
2

Click Connect Figma

Authorize Hiveku to read your Figma files. We ask for read-only access.

​
Import a Frame

1

Copy the Figma frame URL

In Figma, right-click the frame you want to import and choose Copy link. Make sure the frame has view permissions that include your Hiveku-connected account (shared or part of a team you belong to).
2

Paste into AI chat

Open the AI tab in the Editor and paste the URL with an instruction:
Import this design as my homepage: https://figma.com/file/abc/Homepage?node-id=1:2
Or for a specific section:
Turn this frame into a pricing section: [URL]
3

Review the plan

The AI analyzes the frame — structure, colors, typography, spacing — and proposes a component breakdown. Approve or ask it to adjust.
4

Generate the code

The AI writes the components, styles, and any needed assets. You’ll see a diff in the chat and the preview updates live.
5

Refine

No import is pixel-perfect. Switch to Designer mode and ask for tweaks: “Make the hero headline larger”, “Tighten the spacing between cards”, etc.

​
What Imports Well

Auto-layout frames

Translate cleanly to flex/grid

Named layers

Become component and variable names

Typography styles

Map to Tailwind typography scale

Color variables

Become theme tokens in your code

​
What Doesn’t Import

Prototype interactions

Clicks, hovers, transitions — you’ll add these in code

Complex constraints

Deeply nested auto-resize can come out janky

Custom fonts

Fonts not available on the web are swapped for close matches

Image fills

Placeholders are used; you’ll replace with real assets

​
Tips for Better Imports

1

Use auto-layout everywhere

Frames with auto-layout produce clean flex/grid code. Absolute positioning translates to rigid layouts that break on mobile.
2

Name your layers

A layer called Primary Button imports as a PrimaryButton component. A layer called Rectangle 42 imports as… Rectangle42. Names matter.
3

Import one section at a time

A full-page import with 20 sections can get muddled. Import hero, features, testimonials, pricing, CTA, footer as separate passes. Easier to review and iterate.
4

Clean up hidden layers first

Hidden Figma layers still get imported unless you delete them. Trim dead layers before sharing the frame.
5

Use Figma variables for colors and text styles

Variables translate directly to CSS custom properties and Tailwind tokens, keeping your code consistent.

​
Refining After Import

Once the code is in, switch to Designer mode for visual tweaks. See Edit Visually for the full workflow. For structural changes, Code mode or direct AI requests work best: 
Swap the hero background to our brand gradient

Replace all placeholder images with the ones in /public/images/

​
Verifying the Import

After import, check:
  • Responsiveness — resize the preview to mobile and tablet widths
  • Typography — fonts and sizes should match the Figma frame
  • Spacing — padding and gaps should feel similar (won’t be exact)
  • Links and buttons — these are visual-only until you wire them up

​
Troubleshooting

Most common cause: the frame isn’t viewable by your connected Figma account. Open the file in Figma, click Share, and make sure your account (or the team your account is in) has at least view access. Then retry with the URL.
Expected. An import gets you to ~80% — the rest is refinement. Use Designer mode to tighten spacing, nudge colors, and fix responsive breakpoints. It’s much faster than building from scratch.
Figma image fills don’t transfer as real image files. The AI inserts placeholders. Upload your real images to /public/ (or ask the AI to), then replace the placeholders.
Custom Figma fonts often aren’t web-available. The AI picks a close match. If you want the exact font, install it via Google Fonts or upload the files — then ask the AI to apply it.
Run the AI in Refactor mode: “Clean up the imported components — extract shared styles and split into files.”

​
What’s Next?

Figma Integration

Full reference for the Figma integration

Edit Visually

Refine imported designs