What problem does it solve? Developers implementing UI from Figma designs need a reliable way to pull structured design context, design tokens, and visual references from a specific frame without manually inspecting the file or pasting raw generated code into their codebase. ## Core Features & Use Cases - Dual access paths: Uses the official Figma MCP server over OAuth as the preferred path, with a PAT-based REST API fallback (X-Figma-Token header) for headless or enterprise setups. - Structured extraction tools: get_metadata for cheap node discovery, get_design_context for design-to-code context, get_variable_defs for color/spacing/typography tokens, get_screenshot for visual diffing, and get_code_connect_map to reuse real mapped components. - URL and node-id parsing: Extracts FILE_KEY from /design/ or /file/ URLs, handles branch URLs, and converts node-id dash format to colon format required by both MCP and REST. - Use Case: Given an acceptance criterion referencing a Figma frame URL, pull the frame's structured context and variable definitions, map tokens to the project's existing design system, and capture a screenshot to verify the implemented layout. ## Quick Start Extract the design context, tokens, and a screenshot from this Figma frame URL so I can implement it with our existing components.
