Connect Claude to your design tools and it stops being a chat window for screenshots. This guide covers which connectors to install, how to set them up, and what to ask.
In short
- Figma is the must-have. Add Linear and Notion if your team uses them.
- Copy, critique and docs: the Claude app. Code: Claude Code.
- Start read-only on one frame.
Why designers should care about Claude in 2026
Connectors run on the Model Context Protocol (MCP), an open standard for linking AI apps to other tools. They let Claude read and act inside your apps, not just use what you paste.
Claude inherits your permissions. If you can’t open a file, channel or record, Claude can’t reach it either.
For designers, three handoffs disappear. Claude reads a Figma frame’s real variables and components, files tickets in Linear and writes the spec in Notion.
Claude app, Claude Desktop or Claude Code?
| Surface | Best for | How tools are added |
|---|---|---|
| claude.ai (web) | Review, UX copy, research | Customize > Connectors (directory or custom URL) |
| Claude Desktop | The same, plus desktop extensions and local files | Same connectors, plus desktop extensions |
| Claude Code | Design-to-code, prototyping, pushing code back to Figma | Plugin or MCP commands, then /mcp to authenticate |
Rule of thumb: copy, critique and docs go in the Claude app. Anything touching a codebase goes in Claude Code.
Connectors added on claude.ai also appear in Claude Desktop and on mobile. Claude Code keeps its own MCP configuration.
The designer’s connector stack
| Tool | What it does for a designer | Priority |
|---|---|---|
| Figma (official MCP) | Reads layout, variables, components and screenshots. Writes native frames to the canvas (beta). | Must-have |
| Linear | Creates and updates issues, projects and comments from reviews | Must-have for product teams |
| Notion | Searches and updates specs, design-system docs and research | Must-have if your wiki lives there |
| Slack | Posts review summaries, pulls feedback threads | Nice-to-have |
| Google Drive, Gmail, Calendar | Finds briefs and decks, reads stakeholder email, schedules reviews | Nice-to-have |
Setup: Figma MCP
Full details: Figma’s MCP setup guide.
Option A: Claude app or Claude Desktop (simplest)
- Open Customize > Connectors (or + in a chat > Connectors > Manage connectors).
- Click + next to Connectors, search for Figma, click Connect.
- Sign in to Figma in the browser and click Allow access.
- In a new chat, check that + > Connectors shows Figma switched on.
- Test it: paste a link to one frame and ask, “Describe the layout, colors and components in this frame. Don’t write code yet.”
Option B: Claude Code (best for design-to-code)
- In a terminal, run
claude plugin install figma@claude-plugins-official. It installs the MCP connection plus Figma’s skills (ready-made instructions). - Or add just the server:
claude mcp add --transport http figma https://mcp.figma.com/mcp. Add--scope userto use it in every project. - Start Claude Code, type
/mcp, select figma, choose Authenticate and sign in. - Check that
/mcpshows Figma as connected. Then paste a frame link and ask for a summary.
Main tool: get_design_context. Also useful: get_variable_defs (tokens), get_screenshot and use_figma (writes to the canvas).
Figma pitfalls
- Without
--transport http, the add command creates a broken entry. - Canvas writing needs a Full seat (Dev seats are read-only). It is free only during the beta.
- The remote server needs links to specific frames. It can’t browse your files.
- Name your framework and component folder, for example “use components from src/components/ui”. Otherwise you get a parallel UI kit.
Setup: Linear
- Claude app or Desktop: Customize > Connectors, search Linear, click Connect, approve in Linear.
- Claude Code:
claude mcp add --transport http linear-server https://mcp.linear.app/mcp, then/mcpto sign in. - Test: “List my open issues in the Design team.” You should see real issue IDs.
- Older guides use the
/sseendpoint. Linear’s MCP docs call it a deprecated fallback, so use/mcp.
Setup: Notion
- Claude app or Desktop: Customize > Connectors, add Notion, pick your workspace, approve.
- Claude Code:
claude mcp add --transport http notion https://mcp.notion.com/mcp, then/mcpto sign in. - Test: “Find our design-system page in Notion and summarize its sections.”
- On Team and Enterprise plans, an owner must enable the connector for the organization first.
- Some Notion MCP tools, like meeting-note queries, need Notion’s Business plan or higher with Notion AI.
Setup: Slack, Google Drive, Gmail and Calendar
All four use the same steps: Customize > Connectors > + > search > Connect > sign in.
On Team and Enterprise plans, owners can limit each connector, for example read Gmail but not send. Each permission is Always allow, Needs approval or Blocked.
Five designer workflows
- Design-to-code. “Here is the frame link. Read the design context and variables, map them to our components in src/ui, use our Tailwind tokens and don’t hardcode hex values.”
- Code-to-canvas. After building a page in Claude Code, have Claude write it back to Figma as editable frames (beta). Design and code stay in sync.
- Design review. “Critique this frame for contrast, hierarchy and spacing consistency against our design-system variables. List issues by severity.”
- UX copy. Share the frame and your Notion voice guide. Ask for three variants per string, with character counts for buttons and error states.
- Linear and Notion. “Turn the review issues into Linear tickets in the Design team, one per issue, linked to the frame. Then add a review page to our Notion design log summarizing the decisions.”
Pitfalls and permissions
- Connect only what you need. A connector lets Claude access, and possibly change, that data.
- Many connectors? Set Tool access to On demand to save context (Claude’s working space in a chat).
- Start read-only on one frame before Claude writes anything back.