Let’s say you wish to replicate a single part of a Figma web page.
- Proper-click the part → Copy/Paste As → Copy Hyperlink to Choice
- In Cursor, paste the hyperlink and immediate it:“Implement this utilizing HTML and CSS.”
Cursor chat window
Now right here’s the place this technique actually ranges up.
Beforehand, when working with AI instruments, we needed to guess at how you can recreate the pictures embedded in a Figma design, avatars, icons, UI artwork, and so on. The outcomes had been typically fuzzy, misaligned, or simply plain flawed.
However with the Obtain Figma Pictures device constructed into MCP, each picture is routinely downloaded, organized, and injected immediately into your app construction.
- Avatar pictures
- Icons
- Frames and illustrations
- Even folder buildings are pre-organized
In my case, I wished to recreate a App UI I discovered on-line. Right here’s what occurred:
- I copied hyperlinks to every display in Figma
- Cursor used
getFigmaDatato fetch format knowledge for every web page - Then, it used
downloadFigmaImagesto seize each picture and place them in the suitable folders - Cursor routinely rendered all the pieces into purposeful React code
And sure, the app ran flawlessly on the primary strive.
