Code generated from a screenshot invents hex values and spacing. Reading the file's actual variables and component definitions means the output references the design tokens that already exist — which is the difference between code that looks right and code that belongs in the codebase. Code Connect closes the loop by mapping components to their real implementations. The write side deserves care: an agent editing a shared canvas is editing what your team is looking at.
Figma's hosted server. It reaches Design, FigJam and Slides, and it writes as well as reads: an agent can create and modify canvas content, not only extract it. A local server through the desktop app is the alternative.
- Create and modify content directly on a Figma Design, FigJam or Slides canvas
- Extract variables, components and layout data into an IDE
- Turn browser UI into editable layers
- Generate code from a selected frame
- Code Connect component mapping
Figma account OAuth. What the connection can do depends on your plan and seat, so a viewer seat and an editor seat are different connections.
Paste a URL, then authorize — add the endpoint to your client, then approve the OAuth consent screen