If you've built websites from Figma designs, you'll know the process. You open the design, measure the spacing, check the colours, inspect the typography, copy the SVGs and repeat. It works, but it takes time…
Even with AI coding tools, developers often have to explain what they're looking at. A screenshot can only show so much. It doesn't tell AI how the design is built or how the components fit together. That's where Figma MCP changes everything.
It gives our AI tools direct access to our design files, making the move from design to code much faster and much more accurate. In this blog, we cover what it is, how it works, and why we think it's one of the most exciting tools for front-end developers.
What is Figma MCP?
Figma MCP stands for Model Context Protocol.
MCP is an open standard that lets AI tools connect directly to other applications. Instead of relying on copied text or screenshots, AI can work with real project data.
When connected to Figma, Cursor can inspect a design just like a developer would.
It can understand:
Components - including how elements are structured and reused across a design
Auto Layout - how elements are positioned, spaced, and resized
Typography - fonts, sizes, weights, and line heights
Colours and variables - including the actual values used in the design
Spacing and constraints - how layouts should behave and adapt
That extra context makes a huge difference.
Instead of guessing how a design should be built, AI already knows.
Why we started using Figma MCP at madeby.studio
Before using MCP, building a new component usually meant switching between lots of different tools. We'd inspect the design in Figma, check spacing, copy colours, look up typography, and then jump back into our editor to start building. If something didn't look quite right, we'd go back to Figma, check it again, and make another adjustment. It worked, but there was a lot of back and forth between design and development.
Now, AI can access much of that information directly from the Figma file. Instead of explaining the design or relying on screenshots, we can point it towards the component or page we want to build and give it the context it needs. That means less time measuring and copying values, fewer opportunities for mistakes, and more time for our developers to focus on the parts of the build that need their expertise. Figma MCP is just one of the ways we're using AI in our day-to-day website development workflow.
How we use Figma MCP at madeby.studio
Our workflow is fairly simple, and the biggest change is that we're no longer constantly switching between Figma and our code editor to work out how a design should be built.
Build a clean design
Everything starts in Figma. Our designers create reusable components, shared variables, and consistent layouts, making sure the design system is clear and well organised. The cleaner the Figma file, the better the results, because AI has more useful information to work with. Good organisation isn't just helpful for designers anymore. It has become an important part of every project we undertake because it helps both our team and our AI tools understand how the project is structured.
Connect Cursor to Figma
Once the design is ready, we connect Cursor, our code editor, to Figma using MCP. The connection runs in the background while we work, so Cursor can access the design information directly rather than relying on screenshots or descriptions copied into a prompt. From there, our developers can work with the same design context without constantly jumping back into Figma to check the details.
Give AI the right context
Instead of uploading screenshots or explaining every detail of a design, we simply share the Figma frame we want to build. We might ask Cursor to create a hero section, a card component, or a navigation menu using our existing design system. Because it can see the actual design information, it has much more context than a traditional AI prompt and can produce a much stronger starting point.
Review and improve
AI gives us a strong starting point, but that's not where the development process ends. Our developers review the generated code, make improvements where needed, connect everything to the backend, add animations and interactions, and make sure the final result is accessible, responsive, and performs well. AI helps us get there faster, while our developers make sure the finished website actually works.
What we like most about Figma MCP
For us, the biggest benefit is simple: it removes a lot of the back and forth between design and development. We can spend less time figuring out what a design means and more time building it.
It Understands Design Tokens - Instead of guessing colours or font sizes, AI reads the actual design tokens from Figma. That means it uses the right variables and maps them to our Tailwind configuration. The result is cleaner, more consistent code.
It Understands Auto Layout - When designers use Auto Layout properly, AI can translate those layouts into Flexbox or CSS Grid. That saves us a lot of manual work and produces responsive layouts much faster.
It Speeds Up Development - We're not spending time measuring margins or checking font sizes anymore. Instead, we can focus on accessibility, animations, performance, and building a better user experience.
That's the real value of Figma MCP. It doesn't just make AI better at writing code. It helps connect the design and development process, making the whole workflow quicker and more efficient.
Why work with madeby.studio?
We don't just use AI because it's new. We use it because it helps us build better websites.
At madeby.studio, our designers and developers work closely together from the start of a project. We use tools like Figma MCP, Cursor, and other AI tools to speed up the repetitive parts of development, while our team focuses on the things that really matter. Great design, clean code, accessibility, performance, and a smooth user experience.
The result is a more connected process from design to development. Less time spent translating designs into code, and more time spent making the final website work brilliantly.
If you're looking for a team that combines thoughtful design, solid development, and a modern approach to AI, we'd love to work with you.
Karina is a Web Developer at madeby.studio, where she turns complex ideas into clean, user-friendly digital experiences. She focuses on building fast, accessible interfaces that are easy to use and built to perform, bridging the gap between design and development. From component systems to performance optimisation, Karina plays a key role in delivering platforms that are reliable, scalable, and built with both users and impact in mind.
