Guides8 min read

Best MCP Servers for Designers in 2026: Figma, Canva & Creative Workflows

The top MCP servers for UX/UI designers and creatives. Connect Figma, Canva, Cloudinary, Unsplash, and more to your AI assistant for faster design workflows.

By MyMCPTools Team·

Designers spend a disproportionate amount of time on coordination work — searching for assets, writing copy briefs, updating design system docs, exporting files, communicating specs to developers. MCP servers shift that overhead to your AI assistant.

Here are the MCP servers that deliver the most value to UX/UI designers and creative professionals in 2026.

1. Figma MCP Server — Your Design System, AI-Accessible

Figma's official MCP server is the cornerstone integration for any design team. It exposes your Figma workspace to your AI, enabling intelligent interactions with your actual design files rather than abstract descriptions of them.

What you can do:

  • Ask your AI to describe components in your design system
  • Extract exact color tokens, spacing values, and typography specs from live files
  • Generate developer handoff notes from frames and components
  • Query your component library by name, tag, or description

Real workflow example: "Describe the button variants in our design system" → your AI reads your actual Figma file and returns an accurate, up-to-date description that matches what developers will implement — not what you last documented.

Setup: Requires a Figma Personal Access Token. Generate one in Figma → Account Settings → Personal Access Tokens.

2. Canva MCP Server — Templates, Exports, and Brand Management

For designers working with marketing teams who live in Canva, the Canva MCP server bridges the gap between design execution and content strategy. Your AI can browse your brand kit, suggest templates, and coordinate asset exports without you context-switching into Canva manually.

Best for: Social media designers, brand managers, and marketing designers who produce high volumes of templated content.

Workflow unlock: Brief your AI on the campaign theme, let it pull matching templates from your Canva library, and generate the copy — you do the final visual polish.

3. Cloudinary MCP Server — Asset Management at Scale

If your team manages a large media library, Cloudinary's MCP server is transformative. Instead of searching Cloudinary's UI for the right asset, you can describe what you need in natural language and let your AI retrieve it.

Key capabilities:

  • Search your media library by tags, metadata, and visual descriptions
  • Generate optimized image URLs with transformations (resize, format, quality)
  • Bulk tag and organize assets
  • Check asset dimensions, file sizes, and format compliance

Design system use case: Ensure all images in a content refresh meet your compression and dimension specs without manually checking each one. Your AI can audit the library and flag non-compliant assets.

4. Unsplash & Pexels MCP Servers — Stock Photography on Demand

The Unsplash and Pexels MCP servers give your AI assistant access to millions of free, high-quality images — surfaced through natural language search rather than keyword guessing.

Practical use:

  • "Find a warm, editorial-style photo of a coffee shop interior for the hero image" → returns curated options from Unsplash's catalog
  • Generate multiple search queries in parallel to get diverse options
  • Pull image metadata (photographer credit, dimensions, license) automatically

Time saved: Stock photo searches that used to take 20 minutes of manual browsing collapse to a 30-second AI query.

5. Airtable MCP Server — Design Project Tracking

Many design teams use Airtable as their project management backbone — tracking design requests, feedback rounds, and asset status. The Airtable MCP server makes this database queryable by your AI.

Design workflow applications:

  • Query open design requests by priority, deadline, or status
  • Update asset status fields as you complete work
  • Generate weekly design reports from your project data
  • Cross-reference client feedback with design file versions

6. Notion MCP Server — Design Documentation Hub

Design teams that document their systems, brand guidelines, and processes in Notion can use the Notion MCP server to make all of that knowledge AI-accessible. Your assistant can reference your brand voice guide while writing microcopy, or consult your design system documentation while answering developer questions.

Setup tip: Create a "Design Resources" page in Notion with links to your design system, brand guidelines, and asset libraries. Give your AI access to that parent page — it can navigate the full hierarchy.

7. Webflow MCP Server — Design-to-Deploy without Hand-off Friction

For designers who also own their web publishing workflow, the Webflow MCP server closes the gap between design and deployment. Your AI can query your CMS, update content, and help manage the site structure — without you needing to touch the Webflow editor for routine updates.

Best for: Freelance designers who build and maintain client sites in Webflow.

Recommended MCP Configuration for Designers (Claude Desktop)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp-server"],
      "env": { "FIGMA_API_KEY": "your-figma-token" }
    },
    "cloudinary": {
      "command": "npx",
      "args": ["-y", "mcp-server-cloudinary"],
      "env": {
        "CLOUDINARY_CLOUD_NAME": "your-cloud-name",
        "CLOUDINARY_API_KEY": "your-api-key",
        "CLOUDINARY_API_SECRET": "your-api-secret"
      }
    },
    "notion": {
      "command": "npx",
      "args": ["-y", "@notionhq/notion-mcp-server"],
      "env": { "NOTION_API_TOKEN": "your-notion-token" }
    }
  }
}

What Designers Are Using MCP For in Practice

Based on community feedback, the most common designer use cases for MCP servers are:

  1. Component documentation: Auto-generating developer-facing docs from Figma components
  2. Asset discovery: Finding the right stock photo or brand asset without manual search
  3. Copy assistance: Writing UI copy with access to actual component labels and brand guidelines
  4. Project status: Getting a natural language summary of all open design requests
  5. Handoff notes: Generating detailed implementation notes from design specs

The common thread: designers are using MCP to automate the coordination and documentation work that surrounds design execution, so more time goes to the actual creative work.

Browse the full catalog of design-adjacent MCP servers at MyMCPTools Media category.

Recommended Tools

Better Stack

Free Plan

Get alerted when your APIs, browser tests, payment pipelines, or MCP server dependencies go down. Used by 100K+ developers.

Start monitoring free →

1Password

14-day Free Trial

Store and inject API keys, payment credentials, tokens, and file access secrets into your MCP server configs. Trusted by 150K+ developers.

Try 1Password free →

🔧 MCP Servers Mentioned in This Article

💻

Figma MCP Server

There are three different Figma MCP servers and the install command on most listings belongs to the one Figma no longer leads with, so start with which you are choosing. **Figma's recommended server is now the hosted remote one at `https://mcp.figma.com/mcp`** — nothing to install, OAuth in the client, attached with `claude mcp add --transport http figma https://mcp.figma.com/mcp`. It is also the only one with the write and cross-file tools (`use_figma`, `generate_figma_design`, `generate_diagram`, `create_new_file`, `search_design_system`, asset upload and download). **The Dev Mode desktop server ships inside the Figma Desktop app** — enable it in Dev Mode (Shift+D) from the MCP server section of the inspect panel and the app opens a local endpoint at `http://127.0.0.1:3845/mcp`. Figma's docs now describe the desktop server as being for specific organisation and enterprise cases and recommend the remote one instead. Because it runs in the app, it reads whatever you have selected on the canvas: exact colors, typography, spacing, auto-layout constraints, component variants, and — the part a token-based reader cannot do — your Code Connect mappings, so it emits your component names rather than generic divs. It requires a Dev or Full seat on a paid plan and the desktop app must be open. The repository linked here is `figma/mcp-server-guide`, Figma's own setup guide; Figma does not publish the server's source. **The community alternative is Figma-Context-MCP by GLips** (15,500+ stars), installed as `npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_ACCESS_TOKEN`. It authenticates with a Personal Access Token from Figma Settings → Personal Access Tokens and calls the REST API, so it needs no desktop app, works headlessly in CI, and can read any file your account can open — including from a free plan. It exposes the document JSON, node lookup by ID, component listing, text extraction, and rendered-image download. The practical split: pick the official server when design-to-code fidelity and Code Connect matter and you are already paying for Dev Mode; pick GLips when you need automation, a free plan, or a machine with no Figma app installed. Both let an assistant translate a frame into accurate React, Tailwind, or plain HTML/CSS instead of guessing from a screenshot.

Auth required📘
🎬

Canva MCP Server

Canva runs a first-party remote MCP server — marketed inside the product as the Canva AI Connector — at https://mcp.canva.com/mcp, so there is nothing to clone or run locally. Claude Code connects with a single line: claude mcp add canva --transport http https://mcp.canva.com/mcp. Clients that only speak stdio can reach the same endpoint through npx mcp-remote. Authentication is OAuth against your Canva account; Canva's recommended path is now Client ID Metadata Documents, where your client_id is itself a URL pointing at a JSON document describing the client, with the older Dynamic Client Registration flow still supported but deprecated. The tool surface is unusually wide for a design product and is what makes this worth connecting rather than screenshotting designs into a chat. Designs: search-designs, get-design, get-design-pages, get-design-content, get-presenter-notes, generate-design, create-design-from-candidate and copy-design. Brand templates and autofill: search-brand-templates, list-brand-kits, create-design-from-brand-template, get-brand-template-dataset and autofill-design — the combination that lets an agent take a row of data and produce an on-brand asset without a human touching the editor. Assets: upload-asset-from-url and get-assets. Export and import: get-export-formats, export-design, import-design-from-url and resize-design. Folders: create-folder, search-folders, list-folder-items and move-item-to-folder. Comments: comment-on-design, reply-to-comment, list-comments and list-replies, which is the piece that lets an assistant participate in review rather than only produce. The detail most listings miss is the editing-transaction group: start-editing-transaction, perform-editing-operations, commit-editing-transaction and cancel-editing-transaction. Edits are staged and then committed or discarded as a unit, so a model that gets halfway through a change and stops does not leave a half-modified design behind — a meaningfully safer model than fire-and-forget mutations. get-design-thumbnail gives the agent a preview to check its own work against.

Auth required
🎬

Cloudinary

Exposes Cloudinary's media upload, transformation, AI analysis, management, optimization and delivery.

Auth required
🎬

Unsplash

Search and download high-quality free stock photos from Unsplash. Find images by keyword, collection, or photographer. Get proper attribution and download links.

Local
🎬

Pexels

Search and download free stock photos and videos from Pexels. Find high-quality creative assets for any project with a simple natural language interface.

Local
🗄️

Airtable MCP Server

The Airtable MCP Server connects your AI assistant directly to Airtable bases, letting you read records, create entries, update fields, and query structured data using natural language — no manual spreadsheet navigation required. The leading community implementation is domdomegg/airtable-mcp-server, which exposes the full Airtable REST API as MCP tools: list all bases and tables in your workspace, fetch records from any view with optional filter formulas, create or update individual records with typed field values, and delete records by ID. Authentication uses an Airtable personal access token passed as AIRTABLE_API_KEY, scoped to whichever bases you grant access; the token needs at least the schema.bases:read and data.records:read scopes, plus the write scopes if you want the assistant to create or update anything. Airtable itself now also runs an official hosted MCP server at https://mcp.airtable.com/mcp, which uses OAuth instead of a token. Once connected, ask Claude to "show me all leads added this week in my CRM base" or "create a new product entry in my inventory table" and the server handles the API calls. Common use cases include AI-assisted CRM workflows (pull contact records, log meeting notes back into Airtable), inventory management, content calendars, and project tracking where Airtable acts as a lightweight database. Works with Claude Desktop, Cursor, VS Code (Copilot Chat), Windsurf, and any MCP-compatible client. Install via: `npx -y airtable-mcp-server` with `AIRTABLE_API_KEY=pat...` set in your environment.

Auth required📘
📋

Notion MCP Server

The Notion MCP Server is the official integration from Notion that connects AI assistants directly to your Notion workspace via the Notion REST API. With 4,580+ GitHub stars, it is the canonical MCP tool for bringing Notion's knowledge management capabilities into Claude Desktop, Cursor, Windsurf, and any MCP-compatible client. The server exposes a rich set of tools: search your entire workspace by keyword and return matching pages and databases; retrieve full page content and block trees; create new pages inside any parent page or workspace section; update, append, or delete block content on existing pages; list all databases your integration has access to; query database entries with filter and sort parameters; retrieve individual blocks or nested children by block ID; and add comments to pages. Authentication uses a Notion integration token — create an internal integration at notion.so/my-integrations, share specific pages or databases with it, and set NOTION_TOKEN in your environment (the older OPENAPI_MCP_HEADERS form still works). Install with a single npx command. The Notion MCP Server is especially powerful for AI workflows that span documentation retrieval, project planning, and knowledge capture — Claude can read product specs from Notion, draft new pages from conversation output, log structured data into databases, and search across thousands of notes without any manual copy-paste.

Auth required📘
💻

Webflow MCP Server

Webflow's official MCP server exposes the Webflow Data API — CMS collections, pages, custom code, assets, and site publishing — to AI coding tools and to Webflow's own AI-assisted Designer workflow. The recommended path is Webflow's hosted remote server at mcp.webflow.com/sse: add it to Cursor, Claude Desktop (via the `mcp-remote` bridge), or another MCP client, authenticate with OAuth against your Webflow workspace, then open the "Webflow MCP Bridge App" from the Designer's Apps panel (press E) to sync your live canvas with the AI agent in real time — letting you ask it to analyze recent blog posts for new topic ideas, add internal links between related posts, or build out a new hero section with a responsive CTA. Teams that want a fully self-hosted setup can instead register their own Webflow Bridge App with Admin permissions and run the open-source `webflow-mcp-server` npm package locally (`npx -y webflow-mcp-server@latest`) with a scoped WEBFLOW_TOKEN, giving full control over the OAuth flow and hosting. The server requires Node.js 22.3.0+ for the remote/local hybrid flow. Under the hood it's generated from Webflow's OpenAPI spec via Fern, so it tracks new Data API endpoints automatically as Webflow ships them. Typical use cases lean CMS-heavy: bulk content edits, SEO audits across blog collections, and automating repetitive Designer tasks that would otherwise mean clicking through the visual builder by hand.

Auth required

📚 More from the Blog