Atlas connects to Figma through Figma's MCP server, which gives Atlas a frame's real layout, spacing, and variables, so the component it generates maps onto your existing theme instead of hardcoding hex values. The remote server is OAuth only: run atlas mcp add figma --url https://mcp.figma.com/mcp then atlas mcp auth figma. If the Figma desktop app is open you can use the local Dev Mode server instead, which needs no key at all.
What the Atlas and Figma integration does
Figma's MCP server gives Atlas a frame's real layout, spacing, and variables, so the component it generates maps onto your existing theme instead of hardcoding hex values. In 2026 that closes the gap between a design file and a React component that actually belongs in your codebase.
Screenshot-to-code produces components full of literal pixel values and invented colors, because a raster image carries no structure. Figma's MCP server carries structure. Atlas reads the selected frame's auto layout, its spacing scale, and the design tokens defined as Figma variables. That is enough to write a component that references your theme rather than restating it. The design system stays authoritative, and Figma stays the place where designers work, while Atlas handles the translation into code in your terminal.
Adding Figma's remote MCP server to Atlas
Add Figma's remote MCP server with atlas mcp add figma --url https://mcp.figma.com/mcp, then run atlas mcp auth figma. Those 2 commands are the whole setup, because the remote server is OAuth only and takes no token, so there is no Figma API key to generate, store, or rotate.
Two commands complete the remote setup. atlas mcp add figma registers the endpoint at https://mcp.figma.com/mcp, and atlas mcp auth figma walks the OAuth flow in the browser and stores the resulting grant. Because the server is OAuth only, attempting to pass a token flag will not help you: there is no token slot to fill. This is the right default for most teams, since it means no Figma credential ever lives in a file that could be committed by accident.
Using the local Dev Mode server when the Figma desktop app is open
If the Figma desktop app is open, use the local Dev Mode server instead: enable it in the Dev Mode sidebar and run atlas mcp add figma-desktop --url http://127.0.0.1:3845/mcp. The local server needs no key, because the running desktop app is already authenticated as you.
The Dev Mode server listens on 127.0.0.1:3845, which means the traffic never leaves the machine. Enable it from the Dev Mode sidebar in the desktop app first, since the port is closed until you do. Naming the Atlas entry figma-desktop, distinct from figma, lets you keep both registered and pick whichever is appropriate: the desktop server while you are actively designing with the app open, the remote server when Atlas runs somewhere the app is not.
The plain token route with figma-developer-mcp
For plain token access, the community figma-developer-mcp package reads FIGMA_API_KEY over stdio. Reach for it when neither OAuth against https://mcp.figma.com/mcp nor the local Dev Mode server at http://127.0.0.1:3845/mcp fits how Atlas is deployed in your environment.
A token over stdio is the simplest thing that can work in a headless context, such as Atlas running inside a container where no browser is available to complete an OAuth flow and no Figma desktop app is running. The tradeoff is that FIGMA_API_KEY is a long-lived secret you now have to store and rotate. Pass it by environment reference rather than literal value, and prefer the OAuth remote server whenever a browser is actually reachable.
The daily workflow: turning a Figma frame into a React component
Ask Atlas to read the selected frame's layout, spacing, and design tokens, then generate the React component. Naming all 3 inputs matters, because a request that only says build this frame invites Atlas to guess at spacing rather than read the values Figma already holds.
Select the frame in Figma, then make the request specific in the terminal: read the layout, read the spacing, read the design tokens, and then write the component. Atlas will pull the frame's structure through the MCP server and produce code that mirrors it. Because the layout and spacing come from the file rather than from a visual estimate, the generated component usually needs adjustment for behavior, not for geometry, which is a much shorter review.
Keeping the design system intact when Atlas writes the component
Have Atlas map Figma variables onto your existing Tailwind theme rather than inventing hex values, and review the component diff in the terminal before it lands. Those two habits are what keep a design system intact once an agent is writing components against it in 2026.
A Figma variable is a named token, and your Tailwind theme is a named token set. The job is a mapping, not a translation into raw color literals. State that expectation in the request, because an agent left to its own devices will happily emit a hex code that visually matches and semantically drifts. Then read the diff in the terminal before it lands. A component that references theme tokens survives the next palette change; one full of hex values quietly does not.
Setup
- 01Add Figma's remote MCP server with atlas mcp add figma --url https://mcp.figma.com/mcp then atlas mcp auth figma; the remote server is OAuth only and takes no token.
- 02If the Figma desktop app is open, enable the local Dev Mode server in the Dev Mode sidebar and run atlas mcp add figma-desktop --url http://127.0.0.1:3845/mcp, which needs no key.
- 03For plain token access, use the community figma-developer-mcp package, which reads FIGMA_API_KEY over stdio.
- 04Ask Atlas to read the selected frame's layout, spacing, and design tokens, then generate the React component.
- 05Have Atlas map Figma variables onto your existing Tailwind theme rather than inventing hex values.
- 06Review the component diff in the terminal before it lands, so the design system stays intact.
Frequently asked questions
- how do I connect Atlas to Figma
- Add Figma's remote MCP server with atlas mcp add figma --url https://mcp.figma.com/mcp then run atlas mcp auth figma. The remote server is OAuth only and takes no token.
- does the Figma MCP server need an API key
- The remote server at https://mcp.figma.com/mcp is OAuth only and takes no token. The local Dev Mode server at http://127.0.0.1:3845/mcp needs no key either. Only the community figma-developer-mcp package uses FIGMA_API_KEY.
- how do I use Figma Dev Mode with an AI coding agent
- Open the Figma desktop app, enable the Dev Mode server in the Dev Mode sidebar, and run atlas mcp add figma-desktop --url http://127.0.0.1:3845/mcp. No key is required.
- can Atlas generate a React component from a Figma frame
- Yes. Ask Atlas to read the selected frame's layout, spacing, and design tokens, then generate the React component. The MCP server supplies the real structure, not a screenshot.
- how do I stop an AI agent from hardcoding hex values from Figma
- Have Atlas map Figma variables onto your existing Tailwind theme rather than inventing hex values, and review the component diff in the terminal before it lands.
- figma mcp server local vs remote which should I use
- Use the remote server at https://mcp.figma.com/mcp with atlas mcp auth figma by default. Use the local Dev Mode server when the Figma desktop app is already open and you want traffic to stay on the machine.
- what does the Figma MCP server give an AI agent
- It gives Atlas a frame's real layout, spacing, and variables, so the component it generates maps onto your existing theme instead of hardcoding hex values.
Try Atlas in your terminal
The terminal-native AI coding agent. Free core, single binary.
Install AtlasRelated guides
Atlas with MiniMax-M2.1 in 2026: A Free Upgrade Over M2
MiniMax-M2.1 runs Atlas at $0.30 per Mtok input and $1.20 per Mtok output with a 204,800 token context and 131,072 max output. Setup, tradeoffs, and when to move on.
Atlas for C in 2026
Atlas is a terminal-native AI coding agent for C in 2026. Run it in a project with a Makefile, have it find memory leaks or add Unity tests, and review the diff.
Atlas with Claude Opus 4.8: The 2026 Model Guide
Claude Opus 4.8 in Atlas: a 1M token context window at $5 / $25 per Mtok with 128K output. When to pin Anthropic's top coding model in 2026, and when not to.
Atlas with MiniMax-M2: The $0.30 Open-Weights Agent Model in 2026
MiniMax-M2 runs Atlas at $0.30 per Mtok input and $1.20 per Mtok output with a 196,608 token context, open weights on HuggingFace, and an Anthropic-compatible API.
Atlas with MiniMax-M3 in 2026: A Million Tokens for Thirty Cents
MiniMax-M3 gives Atlas a 1,000,000 token context at $0.30 per Mtok input and $1.20 per Mtok output, the cheapest large-context reasoning offer of 2026. Setup and limits.
Atlas with DeepSeek V4 Flash: The Cheapest 1M Context Reasoning Model in 2026
DeepSeek V4 Flash in Atlas: $0.14 / $0.28 per Mtok on a 1M window with 384,000 output tokens, or $0.09 / $0.18 via DeepInfra. Setup, small_model wiring, tradeoffs.
Atlas for Electron: Terminal-Native AI Coding for Main, Preload, and Renderer in 2026
Atlas is a terminal-native AI coding agent for Electron in 2026, where the main and renderer split, contextIsolation, and preload bridges are the security model.
Atlas with Claude Opus 4.1: The Pre Price Cut Opus in 2026
Claude Opus 4.1 runs Atlas on a 200K context at $15 per Mtok input, $75 per Mtok output, with a 32K output ceiling. Setup, cost warnings, and better alternatives.