Figma

Connect Claude Code to your Figma files and pull design data into your editor. It reads pages, frames, layers, and component sets; extracts design tokens (colors, typography, spacing, radii); and returns a JSON representation you can inspect. The plugin maps auto-layout and constraints, so layouts and flow are preserved when you generate code or build components.

Claude reads component instances and their overrides, then returns a component tree and CSS-like styles. It finds nested components, images, and vector paths, and it reports missing fonts or unsupported effects. You can ask Claude to generate React, Vue, SwiftUI fragments or plain CSS variables based on the tokens and component structure it pulled from Figma.

It connects to your Figma account via a personal access token and can target specific file IDs or pages. The GitHub repo (https://github.com/tokens-studio/figma-plugin) contains the code for token extraction and mapping rules, which you can extend if your design system has custom properties or naming conventions.

In a typical workflow, you open a design, point Claude at the file, and get ready-to-edit component code and a token set—no manual copy-paste of color values or re-measuring spacing. That saves time when converting a final Figma screen into components for a sprint, and avoids flipping between Figma and your IDE to reconcile tokens and layout details.