Getting remarkable results quickly with Figma MCP and Cursor

In Part 27 of my project to build the biggest online archive of the Rotis font, I try integrating Figma directly with Cursor with great results

In my last newsletter I walked through the slightly disappointing start to leveraging AI to build a new homepage.

After publishing that newsletter, I decided to change tack.

Rather than feed static mock-ups into a generative AI tool like Lovable, I decided to explore the nascent field of the Model Context Protocol (MCP). This is a new open source standard that enables AI models to connect to sources of information outside of the dataset they were trained on.

Figma have created their own MCP that enables you to send content from the tool directly to the AI model you’re using.

In our case, that means the AI can ‘see’ how the thing I’ve designed is constructed. This gives the AI a much better idea of how the thing is meant to work. This is much more effective than feeding in a static image of the design which forces the AI to make lots of assumptions about how it’s meant to work.

So what did I do?

We’re about to dive into a soup of software brand names. But don’t fear, I’ll include a little definition for any software names I introduce.

I first decided to try the common approach of linking Figma MCP to Claude Code (a generative AI from Anthropic that lets you build software using natural language). But I discovered that this required a $17/month pro plan just to get started. So that was a no.

Looking for another way to dip my toe in, I discovered I could link Figma MCP to Cursor (an integrated development environment with a built-in generative AI) using their free Pro plan trial.

All you need to do is select the content in Figma Dev Mode and copy the URL

I created a local Git repository (a local folder containing all your code which can be version controlled) synchronised it with GitHub (a website for hosting these version controlled coding projects), and opened the repository in Cursor.

Switching to Figma’s ‘Dev Mode’, I selected the design content I wanted to build, grabbed its URL, and pasted this into a simple prompt in Cursor to build the content into code written in HTML and CSS (the two code languages which form the basis of almost all websites).

To give you easy traceability of your changes, Cursor highlights the code it has created so you can check it before keeping or regenerating it

What were the results like?

The results were surprisingly good! Certainly far better than what I had created in Lovable using just static images of the content.

The thumbnail content after just one prompt!

I was really impressed with what Figma MCP and Cursor were able to achieve after just a single prompt.

It had captured the colours and layout accurately, and even the button hover states! It hadn’t captured the font or font weights likely because the rotis font isn’t available as a free web font.

Plenty more tweaking to be done, but it’s very promising. And it’s hard to believe that a static Figma design can now quickly become a functioning piece of code on the web.

More to come, in the meantime have a lovely week 😎

Sources

• For a design-relevant introduction to MCPs, check out Figma’s article here.

• For practical details on using the Figma MCP, check out this documentation.

• For more information on Claude Code, check out their homepage here.

• For more information on Cursor, check out their homepage here.