OUTVISION / PRACTICAL AI GUIDES

From Figma to
Angular + SCSS.

Connect your design to Claude Code. Build reusable components with two clear workflows and prompts you can put to work.

Download 8½ × 11 cheat sheet Download prompts (.txt)

Figma supplies design context. Claude Code creates files in your Angular project. This is a design-to-code workflow, not a native Angular export button.

PATH 01 / REMOTE MCP

Share a Figma link.

Run this command in your terminal from your Angular project folder.

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

Restart Claude Code. Enter /mcp, select figma → Authenticate, and approve access.
Select the top-level frame in Figma. Right-click → Copy link to selection.
Paste your frame links into the prompt below and send it in Claude Code.

PATH 02 / DESKTOP MCP

Start inside Figma.

Open Figma desktop, deselect everything, and enter Dev Mode (Shift + D).
In the right sidebar, choose MCP server → Enable desktop MCP server.
Run this command in your terminal.

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Restart Claude Code and enter /mcp to verify.
Select one top-level frame in Figma, then send the selection prompt in Claude Code.

Keep Figma desktop open on the same computer. Desktop MCP requires an eligible plan and a Dev or Full seat.

COPY. ADAPT. BUILD.

Two complete prompts.

Each prompt includes the shared Angular and SCSS requirements. Replace placeholders with your project details.

Build from Figma frame links

Implement these Figma screens in the current Angular project:
[PASTE FRAME LINKS]

Use the remote Figma MCP connection to inspect the actual frames, components, variables, layout, and available visual references before writing code.

Requirements:
- Use Angular, TypeScript, separate HTML templates, and SCSS. Follow this repository's Angular version and conventions.
- Reuse existing components; extract repeated UI into shared components.
- Match Figma typography, spacing, colors, icons, assets, and states.
- Match the 1920px desktop design; adapt to 1440px, 1024px, 768px, and 390px. Identify any responsive behavior you infer.
- Use Grid/Flexbox and shared SCSS design tokens.
- Use real assets saved in the project, not temporary asset URLs.
- Include semantic HTML, labeled controls, keyboard interaction, and visible focus states.
- Preserve the original Figma screens. Do not modify the Figma file.
- Implement one screen first for visual review before expanding.
- Run the project build and check responsive layouts against Figma.
- Report changed files, missing assets, assumptions, and remaining visual or functional gaps.
If MCP access fails, explain what is missing instead of guessing.

Build from the selected Figma frame

Use figma-desktop MCP to inspect the currently selected frame in Figma. First confirm its name and dimensions.

Implement the selected screen in this Angular project.

Requirements:
- Use Angular, TypeScript, separate HTML templates, and SCSS. Follow this repository's Angular version and conventions.
- Reuse existing components; extract repeated UI into shared components.
- Match Figma typography, spacing, colors, icons, assets, and states.
- Match the 1920px desktop design; adapt to 1440px, 1024px, 768px, and 390px. Identify any responsive behavior you infer.
- Use Grid/Flexbox and shared SCSS design tokens.
- Use real assets saved in the project, not temporary asset URLs.
- Include semantic HTML, labeled controls, keyboard interaction, and visible focus states.
- Preserve the original Figma screens. Do not modify the Figma file.
- Implement one screen first for visual review before expanding.
- Run the project build and check responsive layouts against Figma.
- Report changed files, missing assets, assumptions, and remaining visual or functional gaps.
If MCP access fails, explain what is missing instead of guessing.

Make the connection work.

Check status: use /mcp in Claude Code or claude mcp list in your terminal.
Remote: provide a specific frame link and authenticate with an account that has file access.
Desktop: keep the Figma app and its server running on the same computer as Claude Code.
Both connected: name figma or figma-desktop explicitly in your prompt.
Review early: validate one screen at desktop and mobile sizes before generating the rest.
Team conventions: save Angular, SCSS, and component conventions in your project's CLAUDE.md.

Figma for Government: use desktop MCP in your organization's approved environment.

Handoff: component .ts, .html, and .scss files, shared styles, project assets, and build/visual-review results.

Setup reference: Figma MCP documentation. Instructions checked October 29, 2026.

Explore more Outvision prompts →