Figma Import

Convert your Figma designs directly into working code. Import frames, components, and entire pages from Figma with just a few clicks.

Connecting Figma

1

Open Settings

Go to Settings → Integrations in your workspace.

2

Connect Figma

Click "Connect" next to Figma and authorize Weldship.

3

Grant Access

Allow access to the Figma files you want to import.

Importing Designs

Once connected, you can import Figma designs:

  1. Click the Figma button in the chat panel
  2. Select the file you want to import from
  3. Choose specific frames or the entire page
  4. Click Import to generate code

Select Specific Frames

For best results, import specific frames rather than entire pages. This gives you more control over what gets converted.

What Gets Converted

Figma import handles:

  • Layouts - Auto-layout becomes Flexbox/Grid
  • Components - Converted to React components
  • Styles - Colors, fonts, spacing preserved
  • Images - Exported and included in project
  • Icons - Converted to SVG or icon components
  • Text - Content preserved with proper hierarchy

Best Practices for Figma Designs

To get the best import results:

  • Use Auto Layout - Creates better responsive code
  • Name your layers - Descriptive names become component names
  • Use components - Figma components become reusable code
  • Organize frames - Keep related elements grouped
  • Use styles - Consistent colors and typography

After Import

Once imported, you can:

  • Review the generated code
  • Make adjustments through AI chat
  • Add interactivity and logic
  • Connect to real data

Iterative Refinement

Import is a starting point. Use the AI chat to refine the design, fix any issues, and add functionality.

Troubleshooting

File Not Appearing?

  • Check that you've granted access to the file
  • Ensure the file is in a team you have access to
  • Try reconnecting the Figma integration

Import Not Matching Design?

  • Use Auto Layout in Figma for better results
  • Import smaller sections at a time
  • Use the AI chat to fix discrepancies

Next Steps

PreviousModel SelectionNextScreenshot Analysis