Skip to main content
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.
If a group isn’t using Auto Layout, Blox will try to infer the layout, but it might not be as precise.

​
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.
1

Fetch

Blox fetches the design tokens (colors, fonts, spacing) from Figma.
2

Generate

The AI agent generates the corresponding React Native JSX and StyleSheet.
3

Sync

The code is instantly available in your editor and on your mobile preview.

​
4. Video Walkthrough

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

​
Troubleshooting

Ensure that any images or icons in Figma are marked as “Exportable” before you start the import.
Check that your Figma frame width matches the mobile device width (usually 375px or 390px).