How to Clone Figma Designs with an Open-Source Tool |

This is a Figma file, and I was able to generate a perfect one-to-one clone just by pasting the Figma file link. The best part is that I used an open-source tool, so you do not need to buy anything because it is available on GitHub. I bet you can’t recreate this with just a screenshot. So, let us jump in, and I will show you how to set it up and do it yourself.

The Tool

This is the tool I am about to show you; it is an MCP server from Gips, and the installation process is pretty straightforward. First, let us install it, and then I will explain more about the tool.

Installation

Down here, you can see the installation instructions.

The first step is to clone the repository. To do that, just scroll up, copy the repository link, and go into your terminal. In your terminal, type the following command:
```
git clone <repository_link>
```
Once it is cloned, navigate into the directory. I already have it, so I’ll just move into it.
Next, to install the dependencies, run:
```
pnpm install
```
Note: Keep in mind that you need to have pnpm installed on your system for this to work.

After the dependencies are installed, we can run the server. But before that, we need a personal access token from Figma.

Generating a Figma Personal Access Token

To generate a personal access token for your Figma file or project:

Go to your Figma team space, click on your username, and navigate to Settings.
Once there, open the Security tab, where you will find the section for Personal access tokens.
Here, you will see the option to generate a new token. I have already generated one for my use, but you can simply click the option to create a new token.
You will be able to name your token. For permissions, you only need to grant read-only access to the file content; no other permissions are necessary.
After that, generate your token. Keep in mind that it will only be visible once, so make sure to copy it and store it in a safe place.

Running the Server

After that, paste this command and replace the Figma API key in the command with your personal access token. It will use npx to run the Figma developer MCP on a server.

FIGMA_API_KEY=your_personal_access_token npx figma-developer-mcp

After running the command, you should see a message like New SSE connection has been established, which confirms that the server is up and running.

Integrating with Cursor

Now, to add this to Cursor, just open it up. Here in Cursor, I am in the MCP server section. To access this:

Go to Cursor Settings.
Navigate to the Features tab and scroll down until you find MCP Servers.
I have already added the server, so let me show you the configuration:
- Name: You can name it whatever you like. I named mine Figma MCP. This is just a nickname for the server.
- Type: Make sure to select SSE instead of Command, since we are running it on a server, as you saw earlier.
- URL: Then, paste the server URL you got from the terminal output.
Once added, the connection status should turn green, indicating that it is active.

The tools provided by this integration include get file and get node, which are now ready to use.

Note on Cursor Update: Before we move on, I wanted to mention that Cursor got updated while I was creating this article. Instead of being in the Features section, MCP Services now has its own dedicated section. You will find MCP Service there, but the rest of the configuration is still the same.

How to Use the Tool

Now, you have already seen the Figma file, but let me show you how to actually use the tool. For example, if there is a specific section you want to replicate (though in my case, I replicated the entire page), just right-click on the section, go to Copy/Paste as, and Copy link to selection.

Once you have the link, go back into Cursor, paste it, and ask it to implement the design in whichever file you like. For this demo, I asked it to implement the design using an HTML and CSS web stack.

At first, I noticed it was using the get file tool, which is only necessary if you want the agent to analyze the entire Figma file. But since I only needed it to process a single page, I had to make it use the get node tool instead. This was probably because the tool descriptions are not clear enough in the code. After I forced it, the tool correctly called the get node MCP and returned the full page details.

Let me show you, it actually provided the entire structure, including specific sizes, colors, and even material types, like whether a section was solid or had a glass effect. This level of detail is something you just cannot get from a screenshot.

Based on that, it generated the file you have already seen, but let me show it again. The result is pretty impressive. There were a few minor bugs, like the placement of an arrow or the search icon, but everything else was perfectly structured, just like the Figma file.

I honestly do not think this level of accuracy would be possible with a screenshot alone. But if things do not line up perfectly, you can provide both a screenshot and the Figma link. That way, instead of fixing each element manually (which is what you usually have to do with most AI tools), you can replicate the entire design in one go.

Conclusion

So, this open-source tool is a powerful addition to your workflow. While it does not completely replace dragging in a screenshot, it offers a level of accuracy and automation that makes it worth using alongside other methods.