mcp-figma

Name: mcp-figma
Author: juyoung-won

design MCP Server

Figma MCP server for accessing Figma API

byjuyoung-won

VerifiedInstall Ready

designdesign

7 views0 stars0 forksv0.1.0MIT

View on GitHub Homepage

Why This Matters

Discovered via smithery and last synced 3mo ago.

VerifiedInstall Ready

Source: smithery
Stars: 0
Last synced: 3mo ago
Install: Instructions detected

Install

1. Install the package

npx mcp-figma

2. Add to claude_desktop_config.json

{
  "mcpServers": {
    "mcp-figma": {
      "command": "npx",
      "args": [
        "mcp-figma"
      ]
    }
  }
}

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)

Tools

Resources

Prompts

Standard I/O

Transport

Available Tools (18)

get_component

Get a component by key

get_team_components

Get components for a team

check_api_key

Check if an API key is already configured

get_project_files

Get files for a project

get_file_nodes

Get specific nodes from a Figma file

get_file_components

Get components from a file

get_team_component_sets

Get component sets for a team

get_style

Get a style by key

get_file

Get a Figma file by key

set_api_key

Set your Figma API personal access token (saved to config)

get_team_projects

Get projects for a team

get_image

Get images for nodes in a Figma file

get_image_fills

Get URLs for images used in a Figma file

get_comments

Get comments on a Figma file

post_comment

delete_comment

Delete a comment from a Figma file

get_file_styles

Get styles from a file

get_team_styles

Get styles for a team

Works Well With - Skills

product-design

Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.

52 starsHas guide

imagegen

Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.

20 starsHas guide

demand-elegance

Challenges hacky fixes on non-trivial changes.

3 starsHas guide

refactoring-ui

Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".

2 stars

Works Well With - Agents

Baoyu Design

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.

4202 stars

Ui Craft

Design engineering skill for AI Agents — build interfaces with craft-level quality

44 stars