implement-design

To achieve pixel-perfect Figma to code translation, this Skill uses the Figma MCP server to extract design context and generate production-ready React with Tailwind CSS. It maps design tokens to your project conventions for exact 1:1 visual parity.

To start translating Figma frames into Tailwind CSS, you need an active Figma MCP server connection and a user-provided Figma URL or a direct selection within the Figma desktop app. The Skill then fetches assets and extracts design context automatically.

Figma design token integration works by extracting styling variables from the Figma file and mapping them directly to your project's conventions. This ensures that the generated Tailwind CSS classes reflect the exact design system specifications without manual token translation.

Yes, you can fetch and download image assets directly from Figma files. The Skill facilitates asset handling by automatically downloading and integrating required images and components from the provided Figma URL into your local project environment.

The Figma to code conversion currently targets React and Tailwind CSS specifically to ensure 1:1 visual parity. The metadata does not indicate support for other frameworks, as it focuses on mapping Figma design tokens directly to Tailwind CSS project conventions.

If your Figma MCP server connection fails during UI implementation, ensure the server is running and accessible. This Skill requires a stable MCP server connection and a valid Figma URL or direct Figma desktop app selection to extract design context and fetch assets successfully.