1---2title: "From Figma to Angular with Claude Code and the Figma MCP server"3slug: "figma-mcp-claude-code-angular"4date: "2026-10-04"5description: "How to connect Figma to Claude Code through MCP, set rules so the output fits an Angular codebase, and turn a design frame into a real component."6cover: flow7tags:8 - AI tools9 - Angular10 - Workflow11---12 13Handing 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.14 15The 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.16 17Prefer to watch? This 2½-minute video covers the same four steps.18 19<YouTube id="lm2NbrioG8Y" title="Figma to Angular with Claude Code + Figma MCP" />20 21## What MCP is, in one paragraph22 23MCP, 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.24 25<Diagram title="How the pieces connect">26 <Layer name="Figma" detail="Your design file and the frame link" />27 <Layer name="Figma MCP server" detail="mcp.figma.com: design data over MCP" />28 <Layer name="Claude Code" detail="Calls the tools, reads your repo" />29 <Layer name="Angular codebase" detail="Components, tokens and CLAUDE.md rules" />30 <Layer name="Review" detail="Build, compare with the design, merge" />31</Diagram>32 33## Step 1: Connect Figma to Claude Code34 35Figma 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:36 37```bash38claude plugin install figma@claude-plugins-official39```40 41If 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:42 43```bash44claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp45```46 47Then sign in:48 491. Start a new Claude Code session.502. Type `/mcp`, choose **figma**, then **Authenticate**.513. Click **Allow access** in the browser window that opens.52 53To confirm it worked, run `claude mcp list` in your terminal. The figma server should show as **Connected**.54 55## Step 2: Tell Claude how your project works56 57This 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.58 59Put the rules in `CLAUDE.md` at the root of the repo, so they apply to every session:60 61```md62## Figma MCP rules63 64- This is an Angular 20 app. Translate Figma output into Angular:65 standalone components, signals for state, typed reactive forms.66 Never write React or JSX.67- Reuse existing components from src/app/shared before creating new ones.68- Use our design tokens from src/styles/tokens.scss. Never hardcode69 colours, spacing or font sizes.70- If the Figma payload includes an image or SVG, use that asset.71 Do not add new icon packages.72- Follow the existing routing, state and data-fetching patterns.73```74 75Figma'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.76 77## Step 3: Point Claude at a frame78 79Everything 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.80 81A prompt that works well looks like this:82 83```text84Build this as an Angular standalone component in85src/app/features/invoices/invoice-summary:86https://www.figma.com/design/<file-key>/<file-name>?node-id=12-34587 88Use our existing card and button components and the tokens in89tokens.scss. Compare your result with the design screenshot when done.90```91 92Behind that one prompt, Claude Code calls several of the server's tools. These are the four you will see most often:93 94- `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.95- `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.96- `get_screenshot`: an image of the selection, so Claude can check the layout visually.97- `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.98 99<Diagram title="What happens after you paste a frame link">100 <Layer name="Outline" detail="get_metadata for large frames" />101 <Layer name="Design" detail="get_design_context for structure and styles" />102 <Layer name="Tokens" detail="get_variable_defs to match your tokens" />103 <Layer name="Check" detail="get_screenshot to compare the layout" />104 <Layer name="Code" detail="Angular component, following CLAUDE.md" />105</Diagram>106 107## Step 4: Review before you merge108 109The output is a strong first draft, not a finished feature. Before merging, I check four things:110 1111. **It builds and passes lint.** Run `ng build` and your linter. Any React that slipped through will fail here.1122. **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.1133. **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.1144. **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.115 116> The rules file is where the quality comes from. Every correction you make in review is a rule you have not written yet.117 118## Getting better results from your Figma files119 120The server can only read what is in the file, so a tidy design gives better code:121 122- **Use auto layout.** It maps naturally to flexbox and grid. Frames built from absolutely positioned layers tend to come back as absolutely positioned code.123- **Name your layers.** "Invoice total" becomes a sensible class or variable name. "Frame 482" does not.124- **Use variables for colours and spacing.** Then `get_variable_defs` returns real token names, not raw hex values.125- **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.126- **Map your components with Code Connect.** It links Figma components to the matching components in your code, so Claude uses yours instead of guessing.127 128---129 130## Wrapping up131 132Connecting 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.133 134Start with one small component. Paste the frame link, read the result closely, and fix your rules before you try a whole screen.135 136**Sources:** [Figma: set up the remote MCP server](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) · [Figma: tools and prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/) · [Figma: add custom rules](https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/) · [Claude Code: connect to MCP servers](https://code.claude.com/docs/en/mcp)