Skip to main content
hc
Submit
3 compared

Design MCP servers compared

Design-tool MCP servers that connect Claude to your design workflow, compared on trust, setup, and safety.

Open in the interactive comparison tool
FieldFigma MCP Server for Claude

Access designs, export assets, and interact with Figma files through Claude

Open dossier 		Canva MCP Server for Claude

Browse, summarize, and generate Canva designs directly from Claude

Open dossier 		Zeplin MCP Server for Claude

Official Zeplin MCP server that lets AI coding agents access Zeplin screen specs, component specs, annotations, assets, and design tokens for design-to-code workflows.

Open dossier
Trust
Install riskLow riskLow riskReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categorymcpmcpmcp
Sourcefirst-partyfirst-partysource-backed
AuthorFigmaCanvaZeplin
Added2025-09-182025-09-182026-06-03
Platforms
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Source repo———
Safety notes✓Use a scoped Figma token and review export or edit permissions before granting access to shared design files.✓Limit access to the intended Canva team or projects and review generated or modified designs before publishing or sharing them.✓Treat `ZEPLIN_ACCESS_TOKEN` as a secret. It can expose design handoff data for every Zeplin project the token holder can access, so store it in MCP environment configuration rather than prompts, checked-in files, or shared transcripts. Use specific Zeplin screen, component, or layer links in prompts. Broad design-context requests can pull too much implementation detail into the model context and increase the chance of incorrect generated UI. Generated code should still be reviewed against the real product codebase, existing components, accessibility requirements, responsive behavior, and design-system constraints before merge. Avoid giving agents production deploy rights just because they can inspect Zeplin specs. Design context is input to implementation, not approval to ship unreviewed UI changes.
Privacy notes✓Figma designs, comments, components, prototypes, team names, and file metadata may be sent through model context.✓Design contents, uploaded media, brand assets, templates, and Canva account metadata may be sent to the MCP client and model.✓Zeplin MCP results can expose unreleased screens, component specs, assets, annotations, interaction notes, product copy, styleguide tokens, brand details, and internal design-system structure. Mock data in design files can still contain customer names, email addresses, account screenshots, revenue figures, support details, or other sensitive examples that should not be copied into public prompts or logs. MCP client logs, AI transcripts, generated code comments, screenshots, and debugging output can retain Zeplin links and design details outside Zeplin's normal access controls.
Prerequisites
  • Figma Desktop application installed and running (download from https://www.figma.com/downloads/)
  • Figma Desktop Dev Mode MCP Server enabled (check Figma Desktop preferences/settings to enable)
  • Figma Desktop running with MCP Server active on local port 3845 (http://127.0.0.1:3845/mcp)
  • Internet connection (for initial Figma Desktop installation, though MCP server operates locally)
  • Canva account (Canva Pro subscription recommended for full API access and team features)
  • OAuth 2.0 authentication configured via Canva Developer Console (https://www.canva.dev/)
  • HTTP transport support in MCP client (required for Canva MCP server)
  • Internet connection for accessing Canva API (https://api.canva.com endpoints)
  • Zeplin account with access to the projects, screens, components, and styleguides Claude should use
  • Zeplin personal access token generated from the Zeplin profile developer settings
  • Node.js 20 or later and npx available for running `@zeplin/mcp-server`
  • Claude Code, Cursor, Windsurf, VS Code with Copilot, or another MCP-capable client
Install
claude mcp list && claude mcp status figma
claude mcp list && claude mcp status canva
claude mcp add zeplin --env ZEPLIN_ACCESS_TOKEN=YOUR_ZEPLIN_PERSONAL_ACCESS_TOKEN -- npx -y @zeplin/mcp-server@latest
Config
{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp",
      "type": "http"
    }
  }
}
{
  "mcpServers": {
    "canva": {
      "url": "https://mcp.canva.com/mcp",
      "type": "http"
    }
  }
}
{
  "mcpServers": {
    "zeplin": {
      "command": "npx",
      "args": [
        "-y",
        "@zeplin/mcp-server@latest"
      ],
      "env": {
        "ZEPLIN_ACCESS_TOKEN": "${ZEPLIN_ACCESS_TOKEN}"
      },
      "type": "stdio"
    }
  }
}
Citations
ClaimUnclaimedUnclaimedUnclaimed
More comparisons, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.