Figma MCP Workflow

This skill standardizes the Figma-to-code workflow using the Figma MCP (Model Context Protocol). Follow this process to ensure high-fidelity implementations that respect project conventions and design systems.

Workflow Overview

The workflow consists of 6 mandatory steps that must be executed in order:

1. Fetch Design Context - Get structured node data from Figma
2. Handle Truncation - Fetch metadata and re-query specific nodes if needed
3. Get Visual Reference - Capture screenshot for validation
4. Download Assets - Retrieve images/SVGs from localhost sources
5. Implement - Build using project conventions and tokens
6. Validate - Ensure 1:1 parity with Figma design

Step-by-Step Process