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

# Import from Figma

> Convert your Figma designs directly into working React components

Have a Figma design? Import it directly into VibeFlow and get a pixel-accurate React implementation.

## How It Works

<Steps>
  <Step title="Switch to Clone mode">
    On the landing page, click the **Clone** tab in the top switcher.
  </Step>

  <Step title="Choose Figma">
    Select the **Figma** option (the Figma icon with the "Import a design"
    subtitle).
  </Step>

  <Step title="Paste the Figma URL">
    Copy the URL of your Figma frame or page and paste it into the input field.

    The URL should look like:
    `https://www.figma.com/design/XXXXX/FileName?node-id=XX-XX`
  </Step>

  <Step title="Authenticate">
    If this is your first time, you'll be asked to connect your Figma account.
    This grants read access to your designs.
  </Step>

  <Step title="Import">
    Click **Import**. VibeFlow reads the Figma frame, extracts layers, styles,
    and layout constraints, and generates React components.
  </Step>
</Steps>

## What Gets Converted

| Figma Element         | React Output                                    |
| --------------------- | ----------------------------------------------- |
| Frames & Auto Layout  | Flexbox / Grid containers                       |
| Text layers           | Typography components with proper sizing        |
| Fills & strokes       | Tailwind background, border, and shadow classes |
| Images                | Referenced image assets                         |
| Components & variants | React components with props                     |
| Constraints           | Responsive positioning                          |

## Best Practices

<AccordionGroup>
  <Accordion title="Use Auto Layout in Figma">
    Frames with Auto Layout translate much more accurately to Flexbox. Absolutely positioned elements may not adapt well to different screen sizes.
  </Accordion>

  <Accordion title="Name your layers">
    Well-named Figma layers become well-named React components. "hero-section" is much better than "Frame 427".
  </Accordion>

  <Accordion title="Use components for repeated elements">
    Figma components become reusable React components. Cards, buttons, and nav items should be defined as Figma components.
  </Accordion>

  <Accordion title="Keep it to one frame">
    Import one frame at a time for best results. Full multi-page Figma files can be imported frame by frame.
  </Accordion>
</AccordionGroup>

## After Import

Once imported, your Figma design is a live React application. Use the editor to:

* **Add interactivity**  - "Make the tabs clickable and switch content"
* **Make it responsive**  - "Add a mobile layout with a hamburger menu"
* **Extend it**  - "Add a new section below the hero with a pricing table"

<Tip>
  **Figma to production in minutes.** Import your design, refine with AI chat,
  and publish  - all without writing a single line of code.
</Tip>