Figma
Turn Figma designs into production-ready React components
Paste a Figma URL into the chat and the agent generates React components that match the design.
Setup
Go to Settings > Integrations and click Figma.
Click Connect and authorize through Figma OAuth.
Usage
Copy a frame URL from Figma and pass it to the agent:
Implement this design: https://figma.com/file/abc123/...What it does
| Feature | Detail |
|---|---|
| Asset extraction | SVGs, images, and icons are exported and added to the project |
| Design tokens | Figma values are mapped to your Tailwind config |
| Component reuse | Existing components are reused where they match |
| Responsive layout | Auto-layout is translated to flex and grid |