> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma Import

> Import Figma designs as React components and pages

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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:

    ```
    Import this Figma design and build it as a responsive landing page
    ```
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Organization modes

| Mode                         | Output                                                                                                                           |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| **Page per Frame** (default) | A React component per frame in `components/figma/` plus a routed page per frame under your base path (e.g. `/figma-import/home`) |
| **Single Page**              | One routed page stacking every frame as a section                                                                                |
| **Components Only**          | Components without routes, for composing yourself or with the AI                                                                 |

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

<Info>
  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
</Info>

## 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