figma-mcplisted

# Figma MCP ## Overview This skill enables accurate design-to-code conversion by leveraging Figma's MCP (Model Context Protocol) server to access structured design data directly from Figma files. Unlike screenshot-based approaches, the Figma MCP provides semantic information about every design element including exact spacing, colors, typography, component hierarchy, and design system tokens, resulting in significantly more accurate code generation. ## When to Use This Skill Trigger this skill when users: - Provide Figma URLs (file links or frame selection links) - Request converting/implementing Figma designs into code - Ask to "build this from Figma" or "implement this design" - Need to extract design tokens, variables, or design system values - Want to update existing code to match a Figma design - Mention maintaining design-to-code consistency ## Workflow ### Step 1: Receive Figma Design Reference When a user provides a Figma URL or requests design implementation: 1. **Identify the Figma link type**: - File URL: `https://www.figma.com/file/[FILE_KEY]/...` - Frame selection: `https://www.figma.com/file/[FILE_KEY]/...?node-id=[NODE_ID]` - Design URL: `https://www.figma.com/design/[FILE_KEY]/...` 2. **Confirm access**: - Verify the Figma MCP server is configured and accessible - If not configured, reference `references/setup-guide.md` for setup instructions ### Step 2: Fetch Design Data Using MCP Tools Use the available Figma MCP tools to retrieve st