Skip to main content
Import designs from Figma into your Hiveku project. Frames become React components styled with Tailwind, plus routed pages — real project code you can preview, refine with the AI, and deploy.

​
Connect Figma

You can connect Figma in either surface — the Figma button in the editor, or the Figma panel on your project’s Settings page:
  • Personal access token (recommended today) — create one in Figma (avatar → Settings → Security → Personal access tokens → Generate new token, with the File content scope set to Read-only) and paste it into the input. Hiveku validates it before saving and stores it encrypted.
  • Connect with Figma (sign-in) — one-click authorization via your Figma account. This is awaiting Figma’s approval of the Hiveku app and may show an error until that completes; use a token in the meantime.
A connection is required for every import. Once connected, you can import any file your Figma account can open — including files shared with you and public “anyone with the link” files.

​
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

Import from the editor or AI chat

Click the Figma button in the editor toolbar and paste the URL, or paste it directly into the AI chat with instructions like:
3

Review the generated code

Each frame becomes a React component in components/figma/ plus a routed page (e.g. /figma-import/home). Open the files from the import summary or view the pages in the live preview.

​
Organization modes

The base path (default figma-import) prefixes all routes, so imports never overwrite existing pages.

​
What gets imported

  • Structure — one React component per frame, with layout hierarchy preserved
  • Styling — Tailwind utility classes with exact values (colors, spacing, typography, shadows, borders)
  • Layout — Figma auto-layout becomes flexbox; freeform frames keep pixel positioning
  • Images — exported from Figma at 2x and uploaded to your project’s CDN automatically

​
What isn’t imported

Figma import produces a high-fidelity starting point, not a finished responsive site:
  • Prototype interactions and animations
  • Custom fonts (font names carry over; add the font files or a Google Fonts link)
  • Responsiveness for freeform (non-auto-layout) designs — pixel positioning is preserved, so ask the AI to make the imported page responsive

​
Tips for best results

  • Name your frames in Figma — frame names become component names and page routes
  • Use auto-layout in Figma — it translates directly to flexbox and adapts better to different screens
  • Import one section at a time for very large files (imports are capped at 20 frames)
  • Ask the AI to refine after importing — swap hard-coded colors for your design tokens and make the layout responsive