Figma MCP Visual Studio Code Setup

I came across LI post – https://www.linkedin.com/posts/katarina-lea_looking-for-an-edge-in-your-nextjs-and-share-7474966739424923648-ZnwH/ leading to Figma MCP in Cursor: Build Next.js Components | Fishtank found it extremely useful and interesting.

Only I didn’t have Cursor and some Figma Designs to try it out. So, if you are like me stuck with VS Code here are the steps for setting up Figma MCP in VS Code with a free community design to try it out.

1. Registering the MCP in VS Code – CTRL+SHIFT+P – Open MCP:Open User Configuration. 

2. Add the below Figma MCP Server. (Official FIGMA company shared, not something from someone on the internet feel free to use this)

{
   "inputs": [],
   "servers": {
     "figma": {
       "url": "https://mcp.figma.com/mcp",
       "type": "http"
     }
   }
 }

You have to click start (for me it is already running so you are seeing running), then it will follow through some steps. Need a figma account. Anyone can create a Figma account. Figma account is needed to access the Figma Design Files specific component link, which will be used to read the design and create the code.

Verify if it’s setup properly by checking the Configure tools,

Now you can try it out yourself, not everyone will have a Figma Design, so I used the below public community design system -Figma Designs. Also, I wanted to increase the level of difficulty because I thought a simple header rich text and image component can be easily done and mostly in client projects we don’t need much support on those components and wanted to give it a bit difficult component.

Prompted to develop the below METRIC GROUP Component from Figma Design, 

While prompting need to give the exact component’s Link, which can be obtained by, 

The Figma Design,

The Actual Component,

Honestly I was really surprised. Because MCP using tool/function calling, I always visioned it as some logic/code based, basically for a CMS MCP, it will have functions like get_item, update_item and that felt logical..here the model has to visualize the design I mean image processing like may be? may be because I was never a design person, I always thought it would be highly difficult to convert the designs from Figma.

I thought it might make the chart as image but it created a proper chart component with graphs, but it used proper svg, linear gradient and path elements. I don’t think I need to share the code as the code will be different based on our prompts, target tech stack and our solution guidelines.

And yea connect it to a Sitecore or StoryBlok or ContentStack or any other CMS MCP server I think the cycle is complete.

If you are interested in knowing more check this SUGCON Europe 2026 session from Anton Tishchenko and Volodymyr Nikitin Vibesitecoring: From Figma to Sitecore with Zero Lines of Code by Anton Tishchenko,Volodymyr Nikitin – YouTube where they explained it through one of the very first stories we learn in kindergarten – the classic Hare and Tortoise tale.