Figma (Context)

Figma Context MCP turns Figma files into structured JSON that Claude can parse and code from. Instead of pasting screenshots or writing out specs, you point your agent at a Figma URL and it pulls the layout tree, text content, spacing, colours, and component names. It's the most direct path I've found from design file to working component without the usual back-and-forth. The killer use case is one-shot implementation. You're in Cursor, you reference a Figma frame, and Claude writes the JSX or Vue template with correct spacing and colour tokens. It doesn't hallucinate layout because it's reading the actual node structure. I've used it to port entire landing pages in Next.js without opening Figma myself. The JSON is simplified enough that Claude doesn't choke on deeply nested groups, but detailed enough to preserve hierarchy and constraints. It's also useful for extracting design tokens. If your Figma file uses consistent naming, you can ask Claude to generate a tokens file from the styles it sees. No more manual transcription of spacing scales or colour palettes. The pre-listed use case about cross-referencing components to existing code is real: you can diff a Figma component against your actual component file and spot drift. Quirks: it's read-only, so you can't push changes back to Figma. The API key setup is straightforward but you need developer access to the Figma file. If your designs are a mess of ungrouped layers with no naming convention, the JSON will reflect that mess. This isn't a design linter. Also, it doesn't handle images or assets beyond noting they exist, so you'll still need to export those separately. Skip this if you're not regularly coding from Figma files or if your designs live in Sketch or Penpot. It's Figma-specific and assumes you're working in a modern editor with MCP support. But if you're a frontend dev who gets handed Figma links and expected to build pixel-perfect UIs, this is the fastest way to close that loop.