Figma for Edu: Ask a developer Part 1, What is Figma MCP?

Hey Akbar, how you doing? Hey Miggi, how's it going? Going really well. I got some questions from some students and I figured you would probably be the best person to answer them. Can you go from Figma's canvas to code? And this is a concept, you know? Mm-hmm. It's, it's known as, as MCP. So, they wanna know like, what is Figma, MCP? Yeah. So can you go from Canvas to code and Absolutely you can. And like you said, this is powered by Figma's, MCP server. So MCP stands for model context Protocol, which is an open standard that Anthropic had developed that now almost every major AI company is has adopted. Essentially what it does is it provides a really neat and simple way for any app, service database, any place that would host information to be able to share that with any AI agent that requests it. And so it's basically just a protocol for how we do that. An MCP server is a place that's sending the data, and an MCP client is the place that's getting that data. So MCP server in this case is Figma. An MCP client would be, Claude Code or OpenAI ChatGPT or any, IDE, like VSCode and copilot. What we're saying is, is that you design something in Figma, you wanna build it, you. And you are using Claude, you're using OpenAI. Mm-hmm. You would use Figma's MCP server to provide it that context from the Canvas. What are ways and Figma that you can give additional context to help reference what it is that you're trying to build? Yeah, so when we're using the Figma MCP server in the design context that we're sharing over to your AI agents, we're actually sending a bunch of like really specific details. All the names, of the layers, like their properties and their sizes. But then we also have information like variables styles being applied. The components their descriptions, and if you use Code Connect, you can actually even get the code snippets for those specific components. All of those things together combined provide this really rich picture of what it is that you have in your design. When you send it over to, Claude Code. It gets all of that, and it also gets a screenshot. And so it can take visual information and the actual nitty gritty of all the content that exists, and put that together. We do have a feature called annotations that also gets passed over as design context. What that means is we can create an annotation, we can set the category for that annotation or we can just make our own, and then we can just write a little note that's about that design. We can say this should animate this should scale up and then zoom back down when it's being animated. And so what happens? Is we'll tell it to, Hey, your designer, put this note on here. This is pretty important. Take this into account, and it almost acts as like a mini prompt that comes along with all that Figma data. So instead of you having to prompt your AI agent yourself, you can just get it from the data.