Agent skill · ma08
figma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
What it needs
About 2k tokens when loaded.
What this skill does
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) 1. Run getdesigncontext first to fetch the structured representation for the exact node(s). 2. If the response is too large or truncated, run getmetadata to get the high-level node map and then re-fetch only the required node(s) with getdesigncontext. 3. Run getscreenshot for a visual reference of the node variant being implemented. 4. Only after you have both getdesigncontext and getscreenshot, download any assets needed and start implementation. 5. 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. 6. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ma08/figma