{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"npm_npm-figma-mcp-server","slug":"npm-figma-mcp-server","name":"figma-mcp-server","type":"mcp","url":"https://www.npmjs.com/package/figma-mcp-server","page_url":"https://unfragile.ai/npm-figma-mcp-server","categories":["mcp-servers","app-builders"],"tags":["figma","mcp","model-context-protocol","server"],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"npm_npm-figma-mcp-server__cap_0","uri":"capability://tool.use.integration.figma.document.tree.traversal.and.introspection","name":"figma document tree traversal and introspection","description":"Exposes Figma's document hierarchy as queryable data structures through MCP tools, allowing clients to recursively traverse frames, components, groups, and design tokens without manual API pagination. Implements a local caching layer that mirrors the Figma REST API response structure, enabling fast repeated access to design system metadata without rate-limit pressure on Figma's servers.","intents":["I need to programmatically inspect a Figma file's structure to understand component hierarchy and naming conventions","I want to extract all component metadata (names, properties, variants) from a design file to generate code or documentation","I need to find specific frames or components by name or property to automate design-to-code workflows"],"best_for":["Design system teams automenting component inventory and documentation","Developers building design-to-code generators that need to query Figma structure","AI agents (Claude, Gemini) that need to understand design context before generating UI code"],"limitations":["Requires valid Figma API token with read access to target files","Document tree is cached at server startup — real-time changes to Figma require server restart or manual refresh","Large files (1000+ frames) may cause initial traversal latency of 2-5 seconds","No built-in filtering or search optimization — full tree traversal required for complex queries"],"requires":["Node.js 16+","Figma API token (personal access token or OAuth token)","Figma file ID (accessible from Figma URL)"],"input_types":["Figma file ID (string)","Query parameters (frame name, component name, property filters)"],"output_types":["JSON tree structure with node metadata","Structured component definitions with properties and variants","Design token definitions (colors, typography, spacing)"],"categories":["tool-use-integration","design-automation"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_1","uri":"capability://code.generation.editing.component.variant.enumeration.and.property.extraction","name":"component variant enumeration and property extraction","description":"Automatically discovers and catalogs all component variants within a Figma file, extracting variant properties (color, size, state) and their corresponding design tokens. Uses Figma's component set structure to build a queryable registry that maps variant combinations to visual properties, enabling code generators to understand design system constraints and generate type-safe component APIs.","intents":["I need to generate TypeScript component props interfaces that match all available variants in our design system","I want to create a component inventory that lists every variant combination and its visual properties","I need to validate that my code components match the variants defined in Figma"],"best_for":["Design system maintainers building component libraries with strict variant coverage","Code generators (Storybook, Chromatic, Penpot) that need to enumerate all component states","Teams using design tokens and needing to sync variant properties to code"],"limitations":["Only works with Figma components (not instances) — requires proper component setup in Figma","Variant property extraction depends on consistent naming conventions in Figma","Does not extract computed styles (shadows, effects) — only explicit variant properties","No support for nested variant hierarchies beyond Figma's native component set structure"],"requires":["Figma file with properly structured components and variants","Read access to component definitions via Figma API token"],"input_types":["Component ID or component name (string)","Variant property filters (optional)"],"output_types":["JSON array of variant objects with property mappings","TypeScript interface definitions for component props","Design token references for each variant"],"categories":["code-generation-editing","design-automation"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_2","uri":"capability://data.processing.analysis.design.token.extraction.and.standardization","name":"design token extraction and standardization","description":"Extracts design tokens (colors, typography, spacing, shadows) from Figma's native token system or from component properties, normalizing them into a standardized JSON format compatible with design token standards (W3C Design Tokens, Tokens Studio). Implements token aliasing and hierarchical organization to map Figma's visual properties to semantic token names usable in code.","intents":["I need to export our Figma design tokens to CSS variables, Tailwind config, or design token JSON","I want to sync design token changes from Figma into our codebase automatically","I need to validate that our code is using only approved design tokens from Figma"],"best_for":["Design systems teams managing tokens across Figma and multiple code repositories","Frontend teams building token-driven component libraries","Organizations standardizing on W3C Design Tokens format"],"limitations":["Requires Figma Tokens plugin or manual token setup in Figma — no automatic token detection from raw colors","Token hierarchy and naming conventions must be consistent in Figma to extract correctly","Does not support computed tokens (e.g., 'color-primary-hover' derived from 'color-primary')","Export format is JSON only — requires additional tooling to convert to CSS, SCSS, or Tailwind"],"requires":["Figma file with design tokens defined (native or via Tokens Studio plugin)","Figma API token with read access"],"input_types":["Figma file ID","Token group or category filter (optional)"],"output_types":["JSON in W3C Design Tokens format","Flat or hierarchical token object","Token metadata (description, category, usage)"],"categories":["data-processing-analysis","design-automation"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_3","uri":"capability://data.processing.analysis.frame.and.artboard.content.export.with.metadata","name":"frame and artboard content export with metadata","description":"Exports individual Figma frames or artboards as structured data including layout information, child elements, text content, and visual properties. Implements a recursive export strategy that preserves the design hierarchy while flattening it into queryable JSON, enabling code generators to understand page structure and generate corresponding HTML/React layouts.","intents":["I need to convert a Figma frame into HTML or React JSX with proper structure and styling","I want to extract all text content from a frame to generate copy or translations","I need to understand the layout structure (grid, flex, absolute positioning) of a design to generate responsive code"],"best_for":["Design-to-code teams automating UI generation from Figma designs","Content teams extracting copy and translations from design files","Developers building design preview systems that need to understand frame structure"],"limitations":["Export is metadata-only — does not generate actual HTML/CSS, only structure and properties","Complex layout constraints (auto-layout, constraints) are exported as properties but not interpreted","Images and assets are referenced by URL only — not embedded in export","Text styling (font, size, weight) is exported but requires separate font loading in generated code"],"requires":["Figma file with frames or artboards","Frame ID or frame name for targeting"],"input_types":["Frame ID (string)","Export options (include children, include text, include styles)"],"output_types":["JSON object with frame metadata and child hierarchy","Text content array with styling information","Layout properties (position, size, constraints)"],"categories":["data-processing-analysis","code-generation-editing"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_4","uri":"capability://tool.use.integration.mcp.tool.registration.and.schema.generation","name":"mcp tool registration and schema generation","description":"Implements the Model Context Protocol server interface, automatically registering Figma operations as callable tools with JSON Schema definitions. Handles request/response serialization, error handling, and tool discovery, allowing Claude, Gemini, and other MCP-compatible clients to invoke Figma operations as first-class functions without custom integration code.","intents":["I want Claude or Gemini to be able to query my Figma file directly without me writing custom API code","I need to expose Figma operations as tools in my AI agent or agentic workflow","I want to use Cursor or Claude Desktop to interact with Figma files through natural language"],"best_for":["AI agent developers building multi-tool workflows that include design system access","Teams using Claude Desktop or Cursor that want Figma integration","Developers building LLM-powered design automation tools"],"limitations":["MCP protocol overhead adds ~50-100ms per tool invocation compared to direct API calls","Tool discovery and schema validation happens at server startup — adding new tools requires server restart","No built-in authentication beyond Figma API token — requires secure token management in deployment","Limited to tools that can complete within typical LLM context windows (no streaming responses)"],"requires":["Node.js 16+","MCP-compatible client (Claude Desktop, Cursor, Gemini CLI, or custom MCP client)","Figma API token"],"input_types":["MCP tool call requests with JSON parameters"],"output_types":["JSON responses conforming to MCP protocol","Error messages with MCP error codes"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_5","uri":"capability://memory.knowledge.local.caching.and.offline.document.access","name":"local caching and offline document access","description":"Maintains a local in-memory cache of Figma document structure and metadata, populated at server startup from the Figma API. Enables repeated queries without hitting Figma's rate limits and provides offline access to cached data after initial sync. Implements cache invalidation strategies (TTL, manual refresh) to balance freshness with performance.","intents":["I want to query my Figma file multiple times without hitting rate limits","I need fast responses for design queries without waiting for Figma API latency","I want to work with Figma data even if my connection to Figma is temporarily unavailable"],"best_for":["High-frequency design-to-code workflows that query the same file repeatedly","Teams with strict API rate limit budgets","Developers building interactive tools that need sub-100ms response times"],"limitations":["Cache is in-memory only — lost on server restart, no persistence to disk","Real-time Figma changes are not reflected until manual cache refresh or server restart","Large files (1000+ frames) consume significant memory — no cache size limits or eviction","No cache versioning — cannot track when data was last synced or detect stale data"],"requires":["Initial Figma API call to populate cache","Sufficient memory for document tree (typically <50MB for most files)"],"input_types":["Figma file ID for cache population"],"output_types":["Cached document metadata (in-memory, not directly exposed)"],"categories":["memory-knowledge","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_6","uri":"capability://tool.use.integration.cursor.and.claude.desktop.integration","name":"cursor and claude desktop integration","description":"Provides native integration with Cursor IDE and Claude Desktop through MCP protocol, enabling users to invoke Figma queries directly from the editor or chat interface. Implements context injection that allows Figma data to be referenced in code generation prompts, and supports tool invocation from natural language queries without explicit API calls.","intents":["I want to ask Claude in my editor 'what components are in this Figma file' and get an answer","I need to generate code based on a Figma design while working in Cursor","I want to reference design tokens from Figma in my code generation prompts"],"best_for":["Cursor users building design-to-code workflows","Claude Desktop users managing design systems","Teams where designers and developers collaborate in the same tools"],"limitations":["Requires Cursor 0.30+ or Claude Desktop 0.5+ — older versions do not support MCP","Tool invocation depends on LLM understanding of tool schemas — complex queries may not invoke correct tools","No built-in UI for browsing Figma files — all interaction is through text prompts","Context injection is limited by LLM context window — large design files may not fit in prompts"],"requires":["Cursor IDE 0.30+ or Claude Desktop 0.5+","figma-mcp-server running locally or accessible via network","Figma API token configured in server"],"input_types":["Natural language queries in Cursor or Claude Desktop chat"],"output_types":["Text responses with Figma data","Code snippets generated based on design context","Design token references in code"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm_npm-figma-mcp-server__cap_7","uri":"capability://tool.use.integration.gemini.cli.integration.and.command.line.tool.invocation","name":"gemini cli integration and command-line tool invocation","description":"Exposes Figma operations as command-line tools accessible through the Gemini CLI, enabling shell scripts and CI/CD pipelines to query Figma programmatically. Implements tool invocation through standard input/output, allowing Figma data to be piped into other CLI tools for automated design system workflows.","intents":["I want to query Figma from a shell script or CI/CD pipeline","I need to generate code or documentation from Figma as part of my build process","I want to validate design system compliance by checking Figma against code"],"best_for":["DevOps teams automating design system synchronization in CI/CD","Build systems that need to generate code from Figma designs","Teams using Gemini CLI for multi-tool automation"],"limitations":["Requires Gemini CLI to be installed and configured","Tool output is JSON only — requires jq or similar tools for text processing","No streaming responses — large exports may timeout or exceed memory limits","Error handling is limited to exit codes and stderr — no structured error reporting"],"requires":["Gemini CLI installed and configured","figma-mcp-server running and accessible","Figma API token"],"input_types":["Command-line arguments (file ID, query parameters)"],"output_types":["JSON output to stdout","Error messages to stderr"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":31,"verified":false,"data_access_risk":"high","permissions":["Node.js 16+","Figma API token (personal access token or OAuth token)","Figma file ID (accessible from Figma URL)","Figma file with properly structured components and variants","Read access to component definitions via Figma API token","Figma file with design tokens defined (native or via Tokens Studio plugin)","Figma API token with read access","Figma file with frames or artboards","Frame ID or frame name for targeting","MCP-compatible client (Claude Desktop, Cursor, Gemini CLI, or custom MCP client)"],"failure_modes":["Requires valid Figma API token with read access to target files","Document tree is cached at server startup — real-time changes to Figma require server restart or manual refresh","Large files (1000+ frames) may cause initial traversal latency of 2-5 seconds","No built-in filtering or search optimization — full tree traversal required for complex queries","Only works with Figma components (not instances) — requires proper component setup in Figma","Variant property extraction depends on consistent naming conventions in Figma","Does not extract computed styles (shadows, effects) — only explicit variant properties","No support for nested variant hierarchies beyond Figma's native component set structure","Requires Figma Tokens plugin or manual token setup in Figma — no automatic token detection from raw colors","Token hierarchy and naming conventions must be consistent in Figma to extract correctly","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.05,"quality":0.41,"ecosystem":0.52,"match_graph":0.25,"freshness":0.52,"weights":{"adoption":0.25,"quality":0.25,"ecosystem":0.15,"match_graph":0.23,"freshness":0.12}},"observed_outcomes":{"matches":0,"success_rate":0,"avg_confidence":0,"top_intents":[],"last_matched_at":null},"maintenance":{"status":"active","updated_at":"2026-05-24T12:16:23.903Z","last_scraped_at":"2026-05-03T14:23:53.936Z","last_commit":null},"community":{"stars":null,"forks":null,"weekly_downloads":null,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=npm-figma-mcp-server","compare_url":"https://unfragile.ai/compare?artifact=npm-figma-mcp-server"}},"signature":"Bs0IVoWfnNgzymICRuCO4HuIaTM9PvUg7jVqGeypEesztaH1kETDU2//gsnkdciVpJ6Hk7H8sv1lq/22Le7IAQ==","signedAt":"2026-06-21T19:04:52.568Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/npm-figma-mcp-server","artifact":"https://unfragile.ai/npm-figma-mcp-server","verify":"https://unfragile.ai/api/v1/verify?slug=npm-figma-mcp-server","publicKey":"https://unfragile.ai/api/v1/trust-passport-public-key","spec":"https://unfragile.ai/trust","schema":"https://unfragile.ai/schema.json","docs":"https://unfragile.ai/docs"}}