figma
Fetch design context, screenshots, and assets from Figma, then translate designs into production code.
- Provides three core commands: get_design_context for structured node representation, get_screenshot for visual reference, and asset download via localhost endpoints
- Requires a mandatory workflow: fetch design context, retrieve screenshot, download assets, then implement using project conventions and design tokens
- Outputs React + Tailwind as a design representation; implementation must reuse existing project components, color systems, and typography instead of duplicating Figma output verbatim
- Link-based operation: extract node IDs from Figma URLs to fetch specific frames, layers, or variants; validate final UI against Figma for 1:1 visual and behavioral parity
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.
More from openai/skills
screenshot
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
2.8Kpdf
Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`, `pdfplumber`, and `pypdf` for generation and extraction.
2.6Ksecurity-best-practices
Perform language and framework specific security best-practice reviews and suggest improvements. Trigger only when the user explicitly requests security best practices guidance, a security review/report, or secure-by-default coding help. Trigger only for supported languages (python, javascript/typescript, go). Do not trigger for general code review, debugging, or non-security tasks.
2.6Kplaywright
Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script.
2.4Kfigma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
2.3Klinear
Manage issues, projects & team workflows in Linear. Use when the user wants to read, create or updates tickets in Linear.
2.2K