The agent works with a design not "by eye" but through a connector (MCP) that gives it access to Figma data: components, layout, variables. Here we cover only the practical part; the connector mechanism as a whole (what MCP is, what else it connects) comes in Week 5.
Two ways, matching the two ways you run Claude Code.
In the Claude app: Settings → Connectors → Browse connectors, find Figma, click Connect, and follow the authentication prompts — a Figma login opens in the browser, click Allow. Done: back in a chat, you can point Claude at a Figma file.
The same connection for terminal sessions — the official Figma plugin is installed by command:
claude plugin install figma@claude-plugins-official
Then restart Claude Code, run /plugins, go to the Installed tab, select the figma server and press Enter to authorize — a browser page opens, click Allow access. Run /plugins again: the server should show as connected.
If the install fails ("Plugin not found in marketplace"): first update your CLI — run
claude updateand retry. If it still fails, connect the remote Figma MCP server directly:
Full official guide: https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server
Note on Figma plans: some features (like selection-based prompting via Dev Mode) require a paid Figma plan. Link-based prompting works more broadly — start there.
Two ways to point the agent at a design:
Start small — one card or one section, not a whole page.
Generated code from a design is a draft, not a final. Check it like any agent output: does the structure make sense, are the styles reasonable, does it follow your CLAUDE.md conventions? Fix at least something by hand — that's how you stay the architect.
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*
Built with ❤️ by the HackYourFuture community · Thank you, contributors
Found a mistake or have a suggestion? Let us know in the feedback form.