AI
Recreating Figma designs with Trae
Setup: add Puppeteer (browser inspection) and Figma AI bridge in Trae. Workflow: copy design JSON via Figma to Cursor plugin; use Figma MCP with the frame link so the model lists required assets; refine in Trae. Pitfalls: AI cannot export recolored bitmaps—strict design specs; models add extra UI; …
7/27/2025 · 1 min read
Prep: In Trae, add Puppeteer (so the AI can inspect and operate the browser) and Figma AI bridge (to pull image assets from Figma).
Workflow:
- Use a Figma plugin such as Figma to Cursor to copy the design-source JSON (used to rebuild the layout).
- Connect via Figma MCP, paste the frame link for the UI, and have the AI compare against the JSON to list which slices/assets are needed.
- Fine-tune the implementation in Trae.
Issues found:
- If bitmaps were recolored inside Figma, the AI cannot export those color-adjusted assets—design files need strict, export-friendly specs.
- The AI may add UI elements that are not in the design.
- You need an explicit step asking the AI to verify pixel-perfect parity (it still drifts; I have not isolated model-by-model accuracy).