AI in UX Studio: How to Use MCP and the Figma MCP Server

Hey everyone, welcome back to AI in UX Studio. Over the last few editions we have been treating AI tools as separate islands. You open ChatGPT for research synthesis, you open Stitch for visual exploration, you open Figma to actually build the thing. Each tool works in isolation, and you are the human glue carrying context between them, copying screenshots, re-explaining your design system, re-pasting brand guidelines into every new chat.

This edition is about removing that glue job. We are going to look at MCP, the Model Context Protocol, and specifically the Figma MCP server, which lets AI tools see directly into your Figma files: your components, your variables, your layout structure, your design tokens. No more screenshots. No more “here is my color palette again.”

By the end of this tutorial you will understand what MCP actually is, how the Figma MCP server works, how to set it up, and how to run a real design-to-code workflow with it.

Before we start this edition, I have a special learning material for you. Want to skip the learning curve and start using production-ready prompts immediately? I’ve created a comprehensive AI Prompt Kit specifically for UX designers and researchers who want to leverage AI as a strategic tool, not just a content generator.

Get the AI Prompt Kit for UX Designers

MCP stands for Model Context Protocol. Think of it as a universal plug that lets an AI assistant talk directly to other software, instead of you describing that software to the AI in words.

Before MCP, if you wanted an AI coding assistant to build a component based on your Figma design, your workflow looked like this: take a screenshot of the frame, paste it into the chat, describe the spacing and colors as best you can, hope the AI guesses the rest. The AI was working from a picture, not from the actual design data.

With MCP, the AI assistant can ask Figma directly: what are the layers in this selection, what are the spacing values, which design tokens are applied, what does the component hierarchy look like. The AI receives structured data instead of a flat image, which means the code or content it generates lines up with your actual design system rather than an approximation of it.

The easiest way to think about MCP is as a translator that sits between an AI tool and an application. Figma has one. So do Google Drive, Slack, and a growing list of other tools. Once a tool has an MCP server, any AI assistant that supports MCP, including Claude, Cursor, VS Code with Copilot, or Windsurf, can connect to it and use it.

The Figma MCP server is Figma’s own implementation of this idea, built specifically for the design-to-development handoff. Once it is running, an AI agent in your code editor can request live information from your Figma file, including the layer hierarchy and structure of a selected frame, layout rules such as auto layout, padding, and alignment, text styles and applied design tokens or variables, component properties and variants, and image references for any assets in the selection.

This matters for designers as much as for developers. If you have spent any time handing off designs, you already know the friction. The developer opens your file, inspects every layer manually, and still ends up emailing you to ask what the spacing token for a button should be. The Figma MCP server skips that step. The AI agent reads the actual values from your file.

There are two versions available. The remote server is the one most people should use, and it covers the broadest set of features including reading design context, generating code, and even writing content back into Figma. The desktop server runs locally on your machine and is aimed at specific organization and enterprise setups. Unless you have a reason to need the desktop version, start with remote.

Here is the setup, step by step. The exact menu wording can shift slightly between Figma updates, but the flow stays the same.