From Figma to Angular with Claude Code and the Figma MCP server

Handing a design to an AI coding tool used to mean pasting a screenshot and hoping. The tool guessed the spacing, invented colours that were almost right, and rebuilt components you already had.

The Figma MCP server changes that. Instead of looking at a picture, Claude Code reads the design itself: the layout, the variables, the components and the text. This post walks through the setup, the rules that make the output fit an Angular project, and what to check before you merge anything.

Prefer to watch? This 2½-minute video covers the same four steps.

Figma to Angular with Claude Code + Figma MCP

What MCP is, in one paragraph#

MCP, the Model Context Protocol, is an open standard that lets an AI tool talk to other systems. A system exposes an MCP server with a set of tools, and an AI client such as Claude Code can call those tools when it needs them. Figma runs one of these servers, so Claude Code can ask Figma questions like "what is inside this frame?" while it writes your code.

Step 1: Connect Figma to Claude Code#

Figma recommends its remote server, which works without the Figma desktop app. The quickest route is the official plugin, which bundles the server settings with some ready-made skills:

claude plugin install figma@claude-plugins-official

If you prefer to add the server yourself, one command does it. The --scope user flag makes it available in every project, not just the current one:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Then sign in:

1. Start a new Claude Code session.
2. Type /mcp, choose figma, then Authenticate.
3. Click Allow access in the browser window that opens.

To confirm it worked, run claude mcp list in your terminal. The figma server should show as Connected.

Step 2: Tell Claude how your project works#

This is the step most people skip, and it is the one that matters most. By default, the Figma server returns React and Tailwind code. In an Angular project you need to say so, and you need to point Claude at the components and tokens you already have.

Put the rules in CLAUDE.md at the root of the repo, so they apply to every session:

## Figma MCP rules

- This is an Angular 20 app. Translate Figma output into Angular:
  standalone components, signals for state, typed reactive forms.
  Never write React or JSX.
- Reuse existing components from src/app/shared before creating new ones.
- Use our design tokens from src/styles/tokens.scss. Never hardcode
  colours, spacing or font sizes.
- If the Figma payload includes an image or SVG, use that asset.
  Do not add new icon packages.
- Follow the existing routing, state and data-fetching patterns.

Figma's own guidance says much the same: reuse existing components, use the project's colour, type and spacing tokens, and avoid hardcoded values. The server also includes a prompt called create_design_system_rules that can draft a starting rules file for you to edit.

Step 3: Point Claude at a frame#

Everything works from links. In Figma, select a frame, copy its link, and paste it into your prompt. The link includes a node-id, which tells the server exactly which layer you mean.

A prompt that works well looks like this:

Build this as an Angular standalone component in
src/app/features/invoices/invoice-summary:
https://www.figma.com/design/<file-key>/<file-name>?node-id=12-345

Use our existing card and button components and the tokens in
tokens.scss. Compare your result with the design screenshot when done.

Behind that one prompt, Claude Code calls several of the server's tools. These are the four you will see most often:

• get_design_context: the main one. It returns the structure and styling of the selected layer as code, which Claude then translates using your rules.
• get_variable_defs: the variables and styles the selection uses, such as colours, spacing and typography. This is how Claude matches Figma values to your tokens.
• get_screenshot: an image of the selection, so Claude can check the layout visually.
• get_metadata: a lightweight outline of layer names, types, positions and sizes. Useful for very large frames, where Claude can map the structure first and then fetch details piece by piece.

Step 4: Review before you merge#

The output is a strong first draft, not a finished feature. Before merging, I check four things:

1. It builds and passes lint. Run ng build and your linter. Any React that slipped through will fail here.
2. No hardcoded values. Search the new files for hex colours and pixel sizes. Each one should be a token, unless the design genuinely has a one-off value.
3. Existing components were reused. If Claude made a new button, replace it with yours and add that to your rules so it does not happen again.
4. It still matches the design. Open the screen next to the Figma frame at a few widths. Check spacing, text wrapping and empty or loading states, which designs often leave out.

The rules file is where the quality comes from. Every correction you make in review is a rule you have not written yet.

Getting better results from your Figma files#

The server can only read what is in the file, so a tidy design gives better code:

• Use auto layout. It maps naturally to flexbox and grid. Frames built from absolutely positioned layers tend to come back as absolutely positioned code.
• Name your layers. "Invoice total" becomes a sensible class or variable name. "Frame 482" does not.
• Use variables for colours and spacing. Then get_variable_defs returns real token names, not raw hex values.
• Send one section at a time. A whole page is a lot of context. A card, a form or a table works better, and you can assemble the page yourself.
• Map your components with Code Connect. It links Figma components to the matching components in your code, so Claude uses yours instead of guessing.

Wrapping up#

Connecting Figma to Claude Code takes a couple of minutes. Getting good Angular out of it is mostly about the rules file: tell it the framework, point it at your components and tokens, and keep adding rules as you review.

Start with one small component. Paste the frame link, read the result closely, and fix your rules before you try a whole screen.

Sources: Figma: set up the remote MCP server · Figma: tools and prompts · Figma: add custom rules · Claude Code: connect to MCP servers