Figma Ui MCP vs AI Vision MCP
A side-by-side look at the Figma Ui MCP and AI Vision MCP MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Figma Ui MCP for multimedia process work as a local process; choose AI Vision MCP for multimedia process as a local process. You can also run both side by side in one mcpServers block.
Which MCP server should you choose?
Choose Figma Ui MCP when
- You need dedicated capabilities in the Multimedia Process domain.
- You prefer a local stdio subprocess transport.
- Its auth model fits you: No auth required.
- You want tools like
figma_status, figma_write, figma_read.
Choose AI Vision MCP when
- You need dedicated capabilities in the Multimedia Process domain.
- You prefer a local stdio subprocess transport.
- Its auth model fits you: API key required.
- You have the keys it needs:
IMAGE_PROVIDER, VIDEO_PROVIDER, GEMINI_API_KEY, VERTEX_CLIENT_EMAIL, VERTEX_PRIVATE_KEY, VERTEX_PROJECT_ID, GCS_BUCKET_NAME. - You want tools like
analyze_image, compare_images, detect_objects_in_image.
Feature & specification comparison
Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Multimedia Process | Multimedia Process |
| Quality signal | 71/100 · Great | 63/100 · Good |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | No auth required | API key required |
| Pricing | Free | BYOK (pay the provider) |
| Required env vars | None listed | IMAGE_PROVIDERVIDEO_PROVIDERGEMINI_API_KEYVERTEX_CLIENT_EMAILVERTEX_PRIVATE_KEYVERTEX_PROJECT_IDGCS_BUCKET_NAME |
| Verified owner | Community listing | Community listing |
| GitHub stars | 264 | 80 |
| Directory activity | 7 views 0 installs 0 upvotes | 5 views 0 installs 0 upvotes |
| Tools | 5 | 4 |
| Full listing | View Figma Ui MCP | View AI Vision MCP |
Tools & capabilities
Figma Ui MCP tools 5
figma_statusCheck whether the Figma plugin bridge is connected. Always call this first to confirm the plugin is running before any other tool.figma_writeExecute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. Use the `figma` proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMode, clearFrameVariableMode, createPaintStyle, createTextStyle, createComponent. Prototyping: setReactions, getReactions, removeReactions (click/hover/press → navigate/overlay/swap with Smart Animate transitions). Scroll: setScrollBehavior (overflowDirection: NONE/HORIZONTAL/VERTICAL/BOTH). Variants: setComponentProperties, swapComponent, getComponentProperties. Component property definitions (master-side, required for instance text overrides to recalc auto-layout): addComponentProperty (TEXT/BOOLEAN/INSTANCE_SWAP), bindComponentPropertyToText, removeComponentProperty. The code runs in a sandboxed VM: no access to require, process, fs, fetch, or network.figma_readREAD design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.figma_docsGet the API reference and design rules for figma_write. Call with no args first — returns quick-start guide + critical rules. Then load specific sections as needed: section='rules' (design principles, token rules, layer order, component-first), section='layout' (auto-layout, button/card/badge/progress/mobile rules), section='api' (create/modify/delete/clone/batch/read operations + workflow), section='tokens' (variables, multi-mode, paint styles, text styles), section='icons' (loadImage, loadIcon, loadIconIn, icon libraries, coloring, sizing). Always call figma_docs BEFORE any figma_write code.figma_rulesGenerate a design system rule sheet from the current Figma file — aggregates color tokens, typography styles, variables (all modes), and component catalog into a single markdown block. Equivalent to official Figma MCP's create_design_system_rules. Call once at the start of a design-to-code session to give the AI full context: what tokens to use, what text styles exist, which components are available. Re-run when the design system changes.
AI Vision MCP tools 4
analyze_imageAnalyze an image using AI vision models. Supports URLs, base64 data, and local file paths.compare_imagesCompare multiple images using AI vision models. Supports URLs, base64 data, and local file paths.detect_objects_in_imageDetect objects in an image using AI vision models and generate annotated images with bounding boxes. Supports URLs, base64 data, and local file paths. File handling: explicit filePath → exact path, otherwise → temp directory. Uses optimized default parameters for object detection.analyze_videoAnalyze a video using AI vision models. Supports URLs and local file paths.
Ready-to-paste client configs
Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
Figma Ui MCP
{
"mcpServers": {
"figma-ui-mcp": {
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
}
AI Vision MCP
{
"mcpServers": {
"tan-yong-sheng-ai-vision-mcp": {
"command": "npx",
"args": [
"-y",
"ai-vision-mcp"
],
"env": {
"IMAGE_PROVIDER": "YOUR_IMAGE_PROVIDER_HERE",
"VIDEO_PROVIDER": "YOUR_VIDEO_PROVIDER_HERE",
"GEMINI_API_KEY": "YOUR_GEMINI_API_KEY_HERE",
"VERTEX_CLIENT_EMAIL": "YOUR_VERTEX_CLIENT_EMAIL_HERE",
"VERTEX_PRIVATE_KEY": "YOUR_VERTEX_PRIVATE_KEY_HERE",
"VERTEX_PROJECT_ID": "YOUR_VERTEX_PROJECT_ID_HERE",
"GCS_BUCKET_NAME": "YOUR_GCS_BUCKET_NAME_HERE"
}
}
}
}
Frequently asked questions
Figma Ui MCP is categorized under Multimedia Process and uses a local stdio subprocess. AI Vision MCP belongs to Multimedia Process and uses a local stdio subprocess. Pick Figma Ui MCP for multimedia process work and AI Vision MCP for multimedia process.
Copy the mcpServers block from the config section on this page into your client's config (for example claude_desktop_config.json or ~/.cursor/mcp.json), then fully restart the client.
Figma Ui MCP is listed as free. Auth: no auth required. AI Vision MCP is bring-your-own-key: usage is billed by the API provider you supply a key for. Auth: api key required. If a server needs environment variables such as API keys, define them under the env key in your client's MCP config.
Yes. MCP clients support multiple servers: add figma-ui-mcp and tan-yong-sheng-ai-vision-mcp as separate keys in the same mcpServers object, and your assistant will call tools from either one.
On AllMCPs, Figma Ui MCP has a quality signal of 71/100 (Great) with 7 views, 0 installs and 264 GitHub stars. AI Vision MCP has 63/100 (Good) with 5 views, 0 installs and 80 GitHub stars.