Skip to main content
If you already have a design in Figma, Hiveku can turn it into real project code. Each Figma frame becomes a React component styled with Tailwind, plus a routed page you can open in the live preview, refine with the AI, and deploy.

​
Connect Figma First

Every import needs a connected Figma account (or token). You have two options:
1

Create a token in Figma

In Figma, click your avatar → Settings → Security tab → Personal access tokens → Generate new token. Give it a name (e.g. “Hiveku”), pick an expiration, and set File content to Read-only — we recommend also setting Current user to Read-only so Hiveku can display which Figma account is connected. Copy the token immediately — Figma shows it only once.
2

Paste it in Hiveku

In the editor, click the Figma button in the chat toolbar (or open your project’s Settings page → Figma panel) and paste the token into the input. Hiveku validates it against Figma before saving, and stores it encrypted.
Once connected, you can import any file your Figma account can open — your own files, files shared with you, and public “anyone with the link” files.

​
Import from the Editor

1

Copy the Figma link

In Figma, click Share → Copy link on the file — or right-click a specific frame and Copy link to selection to import just that frame. Both figma.com/design/... and figma.com/file/... links work, with or without a node-id.
2

Paste and preview

Click the Figma button in the editor, paste the URL, and hit Preview Import. Hiveku fetches the file’s structure and shows the file name, pages, frame count, and image count before anything is written.
3

Choose how to organize the output

The Base Path field controls the URL prefix (default figma-import), so imports never overwrite your existing pages.
4

Import

Click Import with Configuration. Progress is shown per stage (fetching frames, exporting images, generating components, saving). Big designs with many images can take about a minute.
5

Review the results

The results screen walks you through what happened: the route your design is now live at, the files it created (click any to open it in the editor), where the images went, and a one-click Ask AI to finish this page button. Any warnings (for example an image that failed to export) are listed at the bottom.

​
After the Import — Where Everything Is

Nothing is hidden: the import writes normal project files you can see, edit, and deploy. To see it: open the preview panel (or the results screen’s Open link) and add the route to your preview URL — e.g. .../figma-import/home. It’s live there immediately; deploy when you want it public. To find the files later: they’re in the editor’s file tree under components/figma/ and app/(site)/figma-import/, and in version history like any other file.

​
Tell the AI What to Do With It

The AI already knows about the imported files — just describe the outcome you want:
The results screen’s Ask AI to finish this page button sends the first of these for you, pre-filled with the exact file paths.
The import is deliberately literal — it reproduces the design exactly as drawn, including fixed pixel positions on freeform frames. Making it responsive and on-brand is the AI’s job, and it’s usually one or two requests.

​
Import from the AI Chat

Paste a Figma link straight into the AI chat with an instruction:
The AI parses the link, runs the import, and then — this is the part the editor button doesn’t do — refines the result: swaps hard-coded colors for your design tokens, makes rigid layouts responsive, and can wire the new pages into your navigation. Follow up naturally:
If Figma isn’t connected yet, the AI will tell you exactly where to connect.

​
What Gets Imported

  • One React component per frame — layout hierarchy preserved, named after your frame (Hero Section → HeroSection.tsx)
  • Styling as Tailwind classes with exact values: colors, spacing, typography, borders, shadows, gradients
  • Layout — Figma auto-layout becomes flexbox; freeform frames keep exact pixel positioning
  • Images — every image fill is exported from Figma at 2x and uploaded to your project’s CDN automatically
  • Text — real copy from the design, with heading levels inferred from type sizes

​
Limits and Behavior

  • 20 frames per import — larger files import the first 20 and list what was skipped; run additional imports for the rest
  • Hidden frames and layers are skipped (with a note in the warnings)
  • Very large frames (unusually heavy design data) are skipped with a warning rather than failing the whole import
  • Re-importing the same frame creates new versions of the same files — your version history keeps the old ones

​
Tips for Better Imports

1

Use auto-layout everywhere

Auto-layout frames convert to clean flexbox that adapts to different screens. Freeform frames import pixel-perfect but rigid — ask the AI to make them responsive afterwards.
2

Name your frames and layers

Frame names become component names and page routes. Pricing imports as Pricing.tsx at /figma-import/pricing; Frame 427 imports as… Frame427.
3

Import a specific frame with node-id

Right-click a frame in Figma and Copy link to selection — the link carries a node-id and Hiveku imports only that frame.
4

Refine with the AI afterwards

The import is a high-fidelity starting point, not a finished site. One or two AI requests (“make it responsive”, “use our brand colors”) close the gap fast.

​
Troubleshooting

Open the Figma dialog (editor Figma button) or the Figma panel in project settings — it shows your live connection status. Paste a fresh personal access token, or click Connect Figma (or Reconnect). OAuth connections refresh themselves automatically; you’ll only see this if access was revoked on the Figma side.
Figma is still reviewing the Hiveku app for one-click sign-in, and until approval only the Hiveku team can use it. Paste a personal access token instead (Figma → Settings → Security → Personal access tokens) — imports work identically.
The token is checked against Figma the moment you paste it. Generate a new one in Figma under Settings → Security → Personal access tokens (with file read access) and paste again.
The connected Figma account (or token) must be able to open that file in Figma. Either connect the account that owns the file, or share the file with the connected account, or set the file to “anyone with the link can view”.
Image fills export automatically, but if Figma fails to render one, the import completes and lists the affected images in the warnings. Re-run the import, or ask the AI to generate a replacement image.
The linked file (or the specific frame in your link) has nothing visible to import — check that the frame isn’t hidden and the link points where you think it does.
Expected for freeform (non-auto-layout) designs, which import with fixed pixel positioning. Ask the AI: “Make the imported figma pages responsive.”

​
What’s Next?

Figma Integration

Full reference for the Figma integration

Edit Visually

Refine imported designs