Designing using Claude Code and Figma MCP – how good are they?

My social media feed is flooded with content about how designers are “cooked” and AI is already a replacement for both technologists and designers. But if you take all the chatter with a grain of salt and actually do the work, what does that look like in practice?

Let’s narrow our focus to Claude Code and Figma MCP. Now the line between designing and building using Claude Code and Figma MCP is really impressive, but what it requires is smart people who can both design well and build well.

For the differences between AIs, see our Claude vs ChatGPT vs Gemini comparison.

Knowledge as a superpower

Claude Code is only as good as what you tell it to do. I had the option of working with a junior developer to create React components from a set of modules developed in Figma or to train Claude Code to do the same thing. The short answer is yes, Claude Code can tap into Figma MCP and create React components that are very good.

The catch is that it required me to spend a day or so giving Claude the right project context, design context, and build context so that Claude would develop the components in a manner that was correct for the project. I would have had to do that same thing with a junior developer. I had to talk it out in detail.

What this means is that a project manager or another knowledge worker generalist does not have the specific knowledge acquired from years of development and creative experience to tell Claude Code the level of specific and idiosyncratic information and content to do its job well.

On the creative side, designs in Figma had to be both built and annotated in detail so that Claude could inspect them properly and build accordingly cross-referencing the markdown file that contained all the information and detail given to Claude over the course of a day of conversations.

What Claude produced locally was impressive on many levels. The file structure was great. The code was clean. The visual build was accurate. But just like if you were to work with a junior developer, there were things that had to be iterated on and fixed.

The more complex, the more the polish

This project was part of a larger one, so additional work by more senior developers was required for CMS integration. In the end, Claude Code and Figma MCP did help. What was even more apparent is that there is a larger workflow change that must occur to fully capitalise on Claude Code and Figma MCP.

The future workflow could be achieved by a very capable designer who is both talented and rigorous in how they build and annotate their work in Figma along with a very capable creative technologist who has the expertise and knowledge to train Claude in the right way to get the best output.

In the future, rigorousness wins

What stands in the way is everyone else on the Zoom call who is not doing the work of these two capable, talented, and disciplined individuals. Work and the workplace are messy and it is the perpetual ambiguity of the decision-making and consensus-building process of knowledge work that really slows down and stands in the way of getting the most out of both talented humans and talented AI.

There are several things to get right for the future of the creative-to-code workflow to be seamless. First and foremost, everyone has to get far more organised. Designers have to be exceptionally buttoned up, and Figma files have to be delivered in the same way each time so Claude can do the work in the right way. Your sloppiness will make Claude fail, making the whole endeavour fruitless or more complex.

Second, your markdown files that Claude uses to refer to have to be things of detailed and articulate beauty. This takes the design knowledge to read a Figma file the way a developer would, and the engineering judgment to write down how it should actually be built in React.

The human layer that AI can't fix

Upstream, before we are at a point for Claude and Figma to do their magic together, there is a human layer of meetings and discussions and subjective back and forth. We can mitigate some of this by being more rigorous with how we discuss, capture, and distill our notes to ensure our feedback and directives are clearer.

Every place of work produces cloudiness, indecision, and intellectual mud that at the end of the day is on some level a necessity to work through things, build consensus, and get to the right thing to actually design and build.

Based on the actual work to get Claude Code and Figma MCP to create great results, we anticipate that certain projects will benefit more than others depending on complexity, time, and how finalised designs are. I can see a world in the near future where every project has a single source of informational truth that grows over the course of the project and Claude or similar tools are rigorously educated and trained so that a project management agent and a development agent can work together and build the knowledge to build things in the right way.

So, are we cooked?

Claude Code, with the right rigour, is workable. Figma is another matter. The kind of designer who can move work fluidly between Figma and Claude Code, and stay both talented and rigorous through the round trip, is a bit of a unicorn.

I can imagine that there is a creative “sloppy” team that is just working to get all the creative and executional ideas stable as non-designer people banter back and forth to get to the right thing. Once approved, this sloppier (expressive?) team hands off work to our rigorous and capable designer to get everything buttoned up for Claude. This ideal future workflow will only succeed with fewer voices and more decisiveness for projects that must bridge creative and code.

So, are we “cooked?” Not in the way you think. If you are disorganised, not a self-learner, and have a general skillset, I would think deeply about where you bring value in a workflow that demands the opposite of this.