OpenSkillIndex← back to search
claude-code

Skilllibrary 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.

install
source · Clone the upstream repo
git clone https://github.com/merceralex397-collab/skilllibrary
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/merceralex397-collab/skilllibrary "$T" && mkdir -p ~/.claude/skills && cp -r "$T/08-web-frontend-and-design/figma" ~/.claude/skills/merceralex397-collab-skilllibrary-figma && rm -rf "$T"
manifest: 08-web-frontend-and-design/figma/SKILL.md
source content

Source: https://github.com/openai/skills/tree/main/skills/.curated skills/.curated/figma

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 get_design_context first to fetch the structured representation for the exact node(s).
  2. 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.
  3. Run get_screenshot for a visual reference of the node variant being implemented.
  4. Only after you have both get_design_context and get_screenshot, 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.
  • 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.

Figma REST API and Dev Mode

When not using MCP, the Figma REST API provides direct access:

  • GET /v1/files/:fileKey — file structure and metadata
  • GET /v1/files/:fileKey/nodes?ids=:nodeId — specific node data
  • GET /v1/images/:fileKey?ids=:nodeId — rendered images of nodes
  • GET /v1/files/:fileKey/variables/local — design token variables

Figma Dev Mode provides developers with:

  • CSS/iOS/Android code snippets from selected layers
  • Component property inspection without switching to design mode
  • Measurement overlays and spacing guides between elements

Authentication: Use a Personal Access Token in the 

X-Figma-Token
header, or OAuth 2 for team integrations.

References