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

# Figma Import

> Convert your Figma designs into production-ready React Native components

Blox turns your static designs into living code. To get the best results, follow this guide to prepare your Figma files.

## 1. Connecting Figma

First, you'll need to authorize Blox to access your Figma account.

1. Go to **Settings > Integrations** in the Blox Dashboard.
2. Click **Connect Figma**.
3. Log in and authorize the application.

## 2. Preparing your File

The Blox AI agent is smart, but it works best when your Figma files follow these best practices:

### Clean Layer Naming

Rename your layers to reflect their purpose. Instead of `Frame 452`, use `LoginButton` or `HeaderTitle`.

### Use Auto Layout

Blox maps Figma's **Auto Layout** directly to Flexbox in React Native. Using Auto Layout ensures your app is responsive across different screen sizes.

<Tip>
  If a group isn't using Auto Layout, Blox will try to infer the layout, but it might not be as precise.
</Tip>

### Component Sets

If you have multiple states for a button (e.g., Primary, Disabled), organize them into a **Component Set** in Figma. Blox will recognize these as separate variants in the code.

## 3. Importing the Design

Once your file is ready:

1. Copy the URL of your Figma file.
2. In the Blox Builder, click the **Import** icon in the sidebar.
3. Paste the URL and select the frames you want to import.

<Steps>
  <Step title="Fetch">
    Blox fetches the design tokens (colors, fonts, spacing) from Figma.
  </Step>

  <Step title="Generate">
    The AI agent generates the corresponding React Native JSX and StyleSheet.
  </Step>

  <Step title="Sync">
    The code is instantly available in your editor and on your mobile preview.
  </Step>
</Steps>

## 4. Video Walkthrough

\[PLACEHOLDER: Insert Loom Video of Figma Import Flow Here]

## Troubleshooting

<AccordionGroup>
  <Accordion title="Images are missing after import">
    Ensure that any images or icons in Figma are marked as "Exportable" before you start the import.
  </Accordion>

  <Accordion title="Layout looks different on mobile">
    Check that your Figma frame width matches the mobile device width (usually 375px or 390px).
  </Accordion>
</AccordionGroup>