figma▌

Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors.

Use the use_figma tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in references/.

Translate Figma designs into production-ready code with pixel-perfect visual fidelity. \n \n Structured seven-step workflow: extract node IDs from Figma URLs, fetch design context and screenshots, download assets, translate to project conventions, and validate against Figma specs \n Integrates with Figma MCP server (remote or desktop) to access layout properties, typography, colors, design tokens, and component structure \n Emphasizes design system reuse, design token mapping, and 1:1 visual par

Fetch design context, screenshots, and assets from Figma, then translate designs into production code. \n \n Provides three core commands: get_design_context for structured node representation, get_screenshot for visual reference, and asset download via localhost endpoints \n Requires a mandatory workflow: fetch design context, retrieve screenshot, download assets, then implement using project conventions and design tokens \n Outputs React + Tailwind as a design representation; implementation mu

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.