Fast Track Design to Code With Figma MCP

So hi, everyone. So today I'm going to talk to you about composing MCP servers, FastTrack Design to Code. So let's start. And hello, everyone. I'm Riccardo. I am a developer advocate at Figma. I am based in London, in England, but I'm originally from Italy. I've been in England since 2010, and I'm actually pretty new at Figma. I only joined six months ago. And before then, I worked as a software engineer for 15 years, more or less. And I've done many front-end stuff. And most recently I did a lot of work on the design system. I worked in the design system team. I worked on multiple design systems.

So the role at Figma is called a developer advocate. It's a weird name. So what do we do? We are practitioners who try to bring as much value as possible to developers, like in their daily basis work and all the challenges that might face, especially in the context of working with designers. So let's focus on that first. So we all know I'm an engineer. I was a front-end engineer. I used to work with designers all the time. And we all know that you challenge in production development. It's kind of like the disconnection between design and implementation. As you can see in a very cute illustration, the design is so well organized, and it's so pretty. And then once you move to the implementation, it's kind of the same. It looks the same, but it's not as you wanted initially in the design. The pieces are there, but they're kind of misaligned. They don't look as good as they look in the design. And this is very, very common. And this is happening because moving from design to code, it's kind of like a lossy process.

We expect to have a straight line, but instead it's more like a roller coaster. There's a lot of back and forth. There's a lot of moments where there's incomprehension, misunderstanding, frustration. There's multiple sources of information. As you can see here, you might gather information from a Slack message or in a call or during the handoff, and then there's some issues back and forth. All this creates frustration quite often from both sides, both for designers and developers.

We think that this happens mainly because design and code are being siloed. You as a developer, you work in your code editor, and your fellow designer works in Figma, designs stuff in Figma, and then you have to implement in your code editor what has been designed in Figma. This is like the two different applications, whatever you use as a code editor. They just have different language. The context is different. You're just trying to translate one context, like the design one, to the code base one, moving from one tool to the other. And this can become complicated, again, like frustration, misunderstanding, miscommunication.

At Figma, we work very hard to create tools that can help to remove this gap and remove the silo and bring as much as possible developers and designers close together. DevMod makes it very easy for you as a developer to go into Figma, inspect the design selection, and then go back into your code editor with the knowledge to start implementing. Code Connect acts as a bridge, enabling a one-to-one connection between the design in Figma and the code in your editor, allowing for a seamless transition. Additionally, the Figma MCP server simplifies translating design to code, further enhancing the collaboration between agents in the design and development process.

This is a good first step, but also we know that more stuff is needed for the developers to actually, again, bring this gap that we have. That's why also we work in implementing something called Code Connect. Code Connect is a pretty useful tool. It's kind of like a bridge that you can bring between design and developers. That means that on top of DevMod, where you can go, you can inspect in a Figma file some information that you need as a developer. You can also actually find a one-to-one connection between what you see in the design and what you have to actually write in your code editor in order to actually achieve exactly the design selection. So you will find a code snippet, you can just copy and paste from Figma to your code editor. And actually what you will have in code is exactly the representation and the design. And this is very useful. We see a lot of developers using this and it really makes this connection very seamless.

But again, there's even more that we can do. And that's why we launched a few months ago our Figma MCP server. And what the Figma MCP server does actually makes it very easy for agents to translate design to code. These days, most code editors, they have an agent inside and this agent already has understanding on your code base because it lives there in your code base, but it does lack understanding of the design. And thanks to our Figma MCP server, we can just pass this information from Figma to the agent so the agent actually, when you're trying to build something, understands a lot about the design selection that you're trying to implement in your code base. And because, talking about code editor and talking about AI, we know already AI is pretty good at making code and generating code.

If you prompt your agent, not even inside your code editor, just in a chat app, and you just say, build this example, build a mobile, food ordering application, there's a search bar, there's a map and a bunch of options, there's tags, it will do a very decent job already. We know that. But then if you run your AI and your agent inside your code editor, then that will bring an even better output because then the agent has a context about your code base. So, for example, understand the language that you want this application to be built on, understand the framework that you're already using, understands the components that you want to use. If, for example, you have a design system, you tend to reuse components. So then the output becomes even better.

It's more close to actually what you want. And then if you then bring in the information from your design side, thanks to our MCP server, the output is even better because now the agent is also understanding what you want from your design side. What kind of colors you want to use, what kind of spacing you want to use, all these very, very important aspects that will make something more good in terms of design, in terms of language that your company has, in terms of all the effort that your designer put into designing a screen for you, then all this information can get passed down to the agent, and the agent can actually create something that's very, very close to what's the initial intent on the design side.

So that's why we have the Figma MCP server, it's really helpful getting agents to generate a new piece of code by using all the information that we are in the design, the variables and the colors and the layout pattern. It's a bunch of information that can really help the dev workflow, going from design to code and avoid the lossy process and become more focused. Our MCP, it's our MCP, it's officially made by Figma, is maintained by us. It has a direct connection to Figma, it's enterprise-level security, and we maintain and we support it. We've done multiple improvements already, we've introduced multiple tools. Our MCP server used to be local initially, now it's also remote, that means you can use it even if you don't have the Figma desktop app running on your computer.

As you can see, I selected a selection in Figma and then in my ID I'm using cursor in this case, but it will work the same in VS Code, all the other ID, they have agent capability. You can see I'm asking to actually get a selection, implementing this demo file, and I'm saying to using these other files, use pricing, just because we want to do a real demo of probably the back-end code, the back-end data is coming from a CMS or somewhere else, it's not from the design. As you can see, it's going through, understanding the design, taking a screenshot, but it's also understanding the code that you're already using, all the components. As you can see, it's kind of like importing a bunch of components that were already there in the repository, and it's saying, okay, build all this, we accept these changes, we look at this, and you can see it's very close to the design, it's not perfect.

As you can see, it's going through, understanding the design, taking a screenshot, but it's also understanding the code that you're already using, all the components. As you can see, it's kind of like importing a bunch of components that were already there in the repository, and it's saying, okay, build all this, we accept these changes, we look at this, and you can see it's very close to the design, it's not perfect.

And I want to actually show exactly a situation where the output is good enough, like 90-95% there, but not 100%, because we want to be realistic. Those MCP servers and AI in general are quite helpful, but there's work that you have to put in in order to be able to output and get a very good result. It's not like a magic wand that you just prompt something and then everything will be perfect. That's why we usually have a few recommendations that can really help to get the most of your design and to actually bring as much context as possible down to your agent and then guide your agent as much as possible in order to output something good.

So we always say, on the design file, and this is mainly probably for your fellow designers, but I think it's good knowledge to have in general, try to reuse components that you already have in there, your buttons and your cards. And as I was saying in the beginning, we have a very powerful tool called Code Connect. Try to use that, try to implement that. That's the best way to actually reuse the code that already exists. So if you have Code Connect, then the agent understands, okay, this is the design that has to be implemented, but those components that are used in this design, they already exist in code, so actually I should reuse them. I should not create a new button, a new card, or something like that.

And also, obviously, try to use variables. Try to have your variables on the design side connected to your tokens on the code side because obviously, the agent understands the connection and will reuse the tokens instead of writing new styling from scratch based on the variables. Also, again, on the design side, try to have a good naming convention for your layers. Name them accordingly. Don't use just random names because, again, this information is passed down via the MCP to the agent, so the agent can really understand quite a lot reading those name layers. Use AutoLayout. It's a massive feature that we have in Figma that really helps to communicate to the agent that you want something to be responsive and to adapt based on the viewport, for example, of the browser or if you build on an app, the different size of your devices.

And also, use annotation in DevMod with something very useful called annotation. And it's intended for a designer in the process of hand-off to pass down a bunch of information to the engineer who is going to implement the component, the design, and say something. It's more like an explained intent, something that is not visible on the design side. See maybe something about accessibility, and then maybe your designer will write an annotation and will say, oh, remember then this image needs an alt value so it can be read by screen readers or something like that. Those annotations can also get passed down to the agent via the MCP. Again, really useful information for the agent to understand as much as possible about how do you want to build something based on a design selection.

But also once you're in your code editor, we also recommend a few suggestions or better way of working for the agent itself. When you prompt your agent, try to be as explicit as possible. In the example I was just showing you, the prompt was very, very simple. Just implement this from the selection in this file, and then there was the extra about using some backend data. But if you know, for example, what kind of components you want to use and what kind of styling coding or syntax or framework you want to use, try to use that as much as possible. Try to inform the agent. After all, the agent, you should treat him as a colleague, someone that actually helps you to get the job done. So obviously more information you give to a colleague, in terms of building something, more actually the colleague can understand and actually can build something that's very close to the specification that you shared.

Similar, there's some examples. For example, first of all, generate iOS with UI code from this frame. So you want to say to your agent, okay, I want this programming language to be used. I want this specific framework. This is very important. And we have other examples there.

And then, yeah, as I was saying, your agent should become your colleague. Clear intent is very, very useful to lead to a better result. And another recommendation that we do, and what I was showing before, like the example in the design and also, as you can see, like the screenshots of the code, this is like both based on SDS, like simple design system. That's a design system that we build at Figma, both on the design side and on the coding side. And both design and code are open source.

So you can find the Figma file in our community and you can find the repository with the coding side of the design system in GitHub. And just like, you know, it's an open repo, so you can have a look, you can fork it, and we build it because we want to show and help other developers and designers maybe to bootstrap a new design system and to get inspired. So in the repo, I didn't show you in the video, but you can see here, we have a bunch of custom rules, a bunch of instructions. They always recommend to write down, because again, this informs the agent to kind of like, what are your guidelines, what are your preferences in terms of like, you know, how do you want to build files, how you don't want to build files, you know, what kind of like naming pattern you want to use, what kind of like pitfalls you want to avoid.

Those things are very, very important. Again, you want to keep your agent as focused as possible on the task and not make your agent kind of like, in a way, like think too much or like try to understand things. If you know things, you like share the information with the agent. And this is like the best way to actually prepare like a list of rules that then the agent can actually consume and understand. And those files tend to be like long because usually there's a lot of rules based on like the size of your repository, but can be like quite a lot of stuff. But we also say like, you know, AI can actually help you to write those rules. Like if you have a repository, you can ask your agent, okay, go through the repository, write a set of rules based on how I write components, how I structure my folders. That could be like a starting point, and then you can continue on that.

So, you know, I was showing up at the MCP, you connect one application, like Figma, to your agent, and you feel like, you know, a science, you're putting things together. Kind of like feel like a magician, like, you know, taking like a white rabbit from a hat. But, you know, like we also like think like, you know, it's important to understand like from the design side, what you have to do. You want to kind of like break down the screen in small bits because, you know, in the example I was showing you, I just selected like one simple section. You know, if you want to build a full page, don't select the whole page. Just do like section by section. It's way more important. You keep like the knowledge, kind of like short and focused, for your agent via the MCP server. And yeah, as I was saying before, like once you do this connection and things work, you feel like a bit of a magician, right? But you only are doing, dealing with one, like one MCP, one server. It's, you're a magician, but not a very good one. You're just juggling one thing.

Like, you know, what if like we combine like other context, other information from other sources, right? So let's have a look. In this like second demo, this is like continuation of what I was showing you before. So now we have something built, and I want to check like how does it look. So it's running localhost, and actually I'm asking to the agent like resize the window and check if actually on mobile, it's actually on one column layout because we want to be responsive. As you can see, it went there, took a screenshot. It's understanding like that doesn't look like the way we want it, and it's going like to change, like the actual file with the code, taken out the screenshot again. And now it's telling us, okay, I fixed that. Now it's actually one column layout. And you can see I'm accepting the file, and now you can see it's like fully responsive. And now it's so much better, right? You're actually using like multiple MCP, multiple context together to actually help your agent to build things in the best ways possible. What I was showing before like that knowledge, the ability to actually go into a browser, open a window, like moving, resizing the screen, taking screenshot, there was actually, there was like the Google Chrome like DevTools MCP as an MCP that really helps you to interact with a live page, and actually you can take screenshots, you can resize browser, you can even click on things, you can go like an entire flow.

And again, you feel like a better magician now. You're juggling with multiple things, but maybe we can do something even more. Let's say like, you know, your design usually lives in Figma, but your knowledge might live somewhere else. Like designers maybe wrote a bunch of documentation for you as a developer to understand how to implement something. The example was in Notion. So now let's see what we can do with that.

Now I'm copying and pasting a link, and I'm asking the agent to search the page, find the information about the responsive behavior, and implement it in what we already have built. And then now, as you can see, it's going through, it's able to actually go to the page, connect to the page, find the page, like fetch the information, and try to compare to what we have in code. And it's making a comparison, it's finding things that are not clear, that are not right and not the way it's supposed to be. So now it's going to apply some changes.

As you can see, it's going back to the page again, it's taking a screenshot, it's comparing the page to the knowledge, to the code, and trying to actually find something that actually is connecting all the different pieces, and try to understand how it has to build something. And now, as you can see, it made a bunch of changes. And now I'm a real magician. Now you're actually juggling with multiple pieces. And the knowledge was in Notion, and I was using the Notion MCP server, but maybe your knowledge, your documentation is maybe not last, you don't have the tools. There's many, many, many MCP servers based on multiple apps and services.

This is just a list I found from the Coursera website, and there's a lot here. But there's potentially even more, and there's a new one every day. At the end, MCP sources from various apps and services, offering the ability to create custom MCP servers. For instance, integrating Figma with different repositories through a small MCP server enhances component use across projects. Combining multiple MCP servers yields diverse knowledge sources, including visual and behavioral insights, ensuring accurate outputs through server interconnection.

The agent's ability to access multiple servers simultaneously, like the Notion MCP server and Chrome DevTools MCP server, improves accuracy and efficiency in tasks. By utilizing various servers based on prompts, the agent maintains focus and avoids unnecessary exploration. This amalgamation of servers streamlines the design-to-code process, minimizing errors and miscommunication between designers and developers. Leveraging MCP servers from platforms like Figma enhances communication and information sharing for efficient design synthesis.

Gratitude is expressed for the audience's presence, with an invitation to connect on LinkedIn for further discussions and access to shared design system resources. The session concludes with an offer to access public slides and design system resources on Figma and GitHub for in-depth understanding of design system structuring. The focus on utilizing MCP servers to bridge design and coding aspects exemplifies the efficiency and clarity brought to the design-to-code workflow, reducing frustration and enhancing collaboration.