When should I use figma vs figma-implement-design?

Use figma for MCP data fetching, context, assets, and MCP setup; use figma-implement-design when you need pixel-perfect code directly from a Figma design.

What if the design_context response is truncated or large?

Use get_metadata to fetch a high-level map and then re-fetch the required node(s) with get_design_context.

How should assets be handled if the MCP returns localhost sources?

Use the localhost image or SVG source directly; do not replace with placeholders or import external icons—the assets must come from the Figma payload.

figma

Scanned

npx machina-cli add skill tech-leads-club/agent-skills/figma --openclaw

Files (1)

SKILL.md

3.3 KB

Figma MCP

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.

Figma MCP Integration Rules

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

Required flow (do not skip)

Run get_design_context first to fetch the structured representation for the exact node(s).
If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
Run get_screenshot for a visual reference of the node variant being implemented.
Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
Validate against Figma for 1:1 look and behavior before marking complete.

Implementation rules

Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
Use the project's color system, typography scale, and spacing tokens consistently.
Respect existing routing, state management, and data-fetch patterns already adopted in the repo.
Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.
Validate the final UI against the Figma screenshot for both look and behavior.

Asset handling

The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.
IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
IMPORTANT: do NOT use or create placeholders if a localhost source is provided.

Link-based prompting

The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.

References

references/figma-mcp-config.md — setup, verification, troubleshooting, and link-based usage reminders.
references/figma-tools-and-prompts.md — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.

Source

git clone https://github.com/tech-leads-club/agent-skills/blob/main/packages/skills-catalog/skills/(design)/figma/SKILL.md

View on GitHub

Overview

Uses the Figma MCP server to fetch context, screenshots, variables, and assets from Figma, and to translate nodes into production-ready code. It guides end-to-end Figma-driven implementation, leveraging project tokens and components. Do not use for pixel-perfect output; use figma-implement-design for that goal.

How This Skill Works

Initiate with get_design_context for the exact node(s). If the response is large, fetch a high-level map via get_metadata and re-fetch only the needed nodes. Then run get_screenshot, download assets, and translate the MCP output into React + Tailwind using your project's conventions; finally, validate UI against the Figma reference before marking complete.

When to Use It

When you have a Figma URL or node ID and need production-ready scaffolding.
When you need design context, assets, and variables for a component or screen.
When translating Figma nodes into React + Tailwind using project tokens.
When setting up or troubleshooting the Figma MCP integration (env vars, config, verification).
When you require a 1:1 parity reference and asset fidelity before coding.

Quick Start

Step 1: Run get_design_context for the exact node(s) using the Figma MCP server.
Step 2: If the response is large, run get_metadata and re-fetch only the required node(s).
Step 3: Run get_screenshot, download assets, translate to React + Tailwind per project conventions, and validate against the Figma reference.

Best Practices

Always run get_design_context first for exact node(s).
If the response is too large, use get_metadata before re-fetching.
Get a screenshot before starting implementation.
Reuse existing components, tokens, and color systems instead of introducing new ones.
Validate UI against the Figma reference and adjust only minimally.

Example Use Cases

Fetch design context for a login form node and scaffold React components.
Fetch assets (SVGs, images) for a storefront card and render them in the UI.
Troubleshoot MCP setup by verifying env vars and performing get_design_context.
Translate a Figma node to React + Tailwind, replacing classes with design-system tokens.
Generate a button component from a Figma frame and validate visuals with a screenshot.

Frequently Asked Questions

Add this skill to your agents