{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"github_mcp-glips-figma-context-mcp","slug":"mcp-glips-figma-context-mcp","name":"Figma-Context-MCP","type":"mcp","url":"https://github.com/GLips/Figma-Context-MCP","page_url":"https://unfragile.ai/mcp-glips-figma-context-mcp","categories":["mcp-servers","app-builders"],"tags":["ai","cursor","figma","mcp","typescript"],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"github_mcp-glips-figma-context-mcp__cap_0","uri":"capability://data.processing.analysis.figma.design.data.extraction.with.css.translation","name":"figma design data extraction with css translation","description":"Fetches raw Figma file and node data via the Figma REST API, then applies a multi-stage extraction and transformation pipeline that filters metadata, converts Figma auto-layout concepts to CSS flexbox properties, translates effect objects to box-shadow CSS, and generates CSS-compatible color values. The extraction system (src/extractors) isolates layout and styling information while the transformer layer (src/transformers) performs semantic translation from Figma's design model to web-implementable CSS, outputting simplified JSON or YAML optimized for LLM consumption.","intents":["I want to fetch a Figma design and get only the layout and styling information without overwhelming metadata","I need Figma auto-layout converted to flexbox CSS so I can generate code directly","I want design data in a format optimized for AI models to understand and implement","I need to extract component hierarchy and styling from a Figma file programmatically"],"best_for":["AI coding agents (Cursor, Claude, etc.) implementing designs from Figma","Teams automating design-to-code workflows","Developers building design system tooling that bridges Figma and web development"],"limitations":["Requires valid Figma API token with file access permissions; fails silently if token lacks scope","Transformation pipeline is CSS-focused; non-web design systems (iOS, Android) require custom transformers","Metadata filtering is opinionated; some design properties may be stripped if not explicitly mapped in transformer logic","No real-time sync; fetches point-in-time snapshot of Figma file state"],"requires":["Figma API access token (Personal Access Token or OAuth Bearer Token)","Node.js 18+ (from package.json engines specification)","Valid Figma file ID and node ID for extraction","@modelcontextprotocol/sdk v1.10.2 or compatible"],"input_types":["Figma file ID (string)","Figma node ID (string, optional for full file extraction)","Configuration object with API credentials"],"output_types":["JSON object with simplified design structure","YAML format for human readability","CSS property mappings (flexbox, colors, shadows, spacing)"],"categories":["data-processing-analysis","design-to-code"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_1","uri":"capability://tool.use.integration.mcp.protocol.based.tool.exposure.for.ai.agents","name":"mcp protocol-based tool exposure for ai agents","description":"Implements the Model Context Protocol (MCP) server specification using @modelcontextprotocol/sdk v1.10.2, exposing Figma capabilities as standardized MCP tools (get_figma_data, download_figma_images) that AI agents like Cursor can discover and invoke via a schema-based function registry. The MCP layer (src/mcp.ts) handles protocol serialization, request routing, and response formatting, allowing any MCP-compatible client to call Figma operations without custom integration code.","intents":["I want Cursor or another AI agent to access Figma data without custom plugins","I need a standardized protocol so my AI tool can discover and call Figma operations","I want to expose Figma capabilities to multiple AI clients using a single server","I need schema-based function calling so the AI agent understands what parameters Figma tools accept"],"best_for":["AI coding agents (Cursor, Claude Desktop, Devin) that support MCP protocol","Teams building multi-tool AI workflows that need standardized integration","Developers creating LLM-powered design automation without writing custom API clients"],"limitations":["MCP protocol overhead adds ~50-100ms per request for serialization/deserialization","Requires MCP-compatible client; does not work with REST-only AI tools","Schema validation is strict; malformed requests fail with protocol errors rather than graceful degradation","No built-in request queuing or rate limiting; relies on client-side throttling"],"requires":["MCP-compatible AI client (Cursor, Claude Desktop, or custom MCP consumer)","@modelcontextprotocol/sdk v1.10.2","Node.js 18+","Transport layer (stdio, SSE, or HTTP) configured on client"],"input_types":["MCP request JSON with tool name and arguments","Schema-validated parameters matching tool definitions"],"output_types":["MCP response JSON with tool results","Error responses with protocol-compliant error codes"],"categories":["tool-use-integration","ai-agent-integration"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_10","uri":"capability://image.visual.batch.asset.retrieval.and.optimization","name":"batch asset retrieval and optimization","description":"Provides batch operations for downloading multiple assets from a Figma file in a single request, with optional image optimization (compression, format conversion). The batch retrieval system (src/index.ts image processing) collects asset node IDs, fetches them in parallel from Figma's CDN, and optionally applies optimization (e.g., SVG minification, PNG compression) before delivery. This reduces latency and network overhead compared to fetching assets individually.","intents":["I want to download all icons or images from a Figma file in a single batch operation","I need to optimize assets (compress PNGs, minify SVGs) before embedding in generated code","I want to fetch multiple assets in parallel to reduce total latency","I need asset metadata (dimensions, format) alongside the asset data"],"best_for":["Icon system automation where Figma is the source of truth","Design-to-code workflows that need to embed or reference multiple assets","Teams generating asset catalogs from Figma"],"limitations":["Parallel fetching is limited by Figma API rate limits; large batches may be throttled","Image optimization is basic; complex transformations require external image processing libraries","No caching; repeated batch operations hit Figma CDN each time","Batch size is not configurable; all assets are fetched regardless of count"],"requires":["Figma API token with file access","Array of node IDs for assets to download","Network access to Figma CDN"],"input_types":["Figma file ID (string)","Array of node IDs (strings)","Optimization options (optional)"],"output_types":["Array of asset objects with data, format, and metadata","Optimized SVG/PNG data (base64 or data URI)"],"categories":["image-visual","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_11","uri":"capability://automation.workflow.real.time.figma.file.monitoring.and.change.detection","name":"real-time figma file monitoring and change detection","description":"Implements optional polling-based change detection that periodically fetches Figma file metadata and compares against cached state to identify design updates. The monitoring system (if implemented in src/services/figma.ts) tracks file modification timestamps and node-level changes, allowing the MCP server to notify clients when designs have been updated. This enables AI agents to work with fresh design data without manual refresh.","intents":["I want to detect when a Figma design has been updated so I can regenerate code","I need to know which specific design elements have changed since last fetch","I want to automatically refresh design context when designers update Figma","I need to avoid regenerating code from stale design data"],"best_for":["Continuous design-to-code workflows where designs change frequently","Teams collaborating on design and code simultaneously","Automation pipelines that need to react to design changes"],"limitations":["Polling-based approach adds latency (typically 30-60 second detection delay)","Figma API does not provide granular change events; requires full file refetch to detect changes","Change detection is at file level; cannot identify specific property changes without full comparison","Polling adds API calls; high-frequency monitoring may exceed rate limits"],"requires":["Figma API token with file access","Polling interval configuration (e.g., 30 seconds)","State storage for cached file metadata"],"input_types":["Figma file ID (string)","Polling interval (milliseconds)"],"output_types":["Change detection event with file modification timestamp","List of changed node IDs (if available)"],"categories":["automation-workflow","memory-knowledge"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_2","uri":"capability://image.visual.figma.asset.download.with.format.conversion","name":"figma asset download with format conversion","description":"Implements the download_figma_images MCP tool that retrieves SVG and PNG assets directly from Figma designs, handling format conversion and optimization. The image processing pipeline (src/index.ts image processing section) manages asset fetching from Figma's CDN, format selection based on design node type, and optional image optimization before delivery to the AI agent. Supports both vector (SVG) and raster (PNG) formats with automatic selection based on node properties.","intents":["I want to download design assets (icons, images) from Figma for use in code generation","I need SVG assets converted to data URIs or base64 for embedding in generated code","I want to fetch PNG exports for reference or testing without manual Figma export","I need to retrieve multiple assets from a design in a single batch operation"],"best_for":["Design-to-code workflows that need to embed or reference design assets","Icon system automation where Figma is the source of truth","Teams generating component libraries with asset dependencies"],"limitations":["Figma CDN rate limits apply; high-volume asset downloads may be throttled","SVG assets may contain Figma-specific metadata that requires post-processing for web use","PNG exports are raster; scaling or modification requires image processing libraries not included in core","No caching layer; repeated downloads of same asset hit Figma CDN each time"],"requires":["Figma API token with file access","Valid node IDs for assets to download","Network access to Figma CDN (figma.com/api/file/...)","Node.js 18+ with built-in fetch or node-fetch"],"input_types":["Figma file ID (string)","Array of node IDs to download (strings)","Format preference (svg, png, or auto)"],"output_types":["SVG string or data URI","PNG buffer or base64-encoded string","Metadata object with asset dimensions and format"],"categories":["image-visual","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_3","uri":"capability://tool.use.integration.multi.transport.mcp.server.deployment","name":"multi-transport mcp server deployment","description":"Provides three transport layer implementations (src/server.ts) for deploying the MCP server: StdioServerTransport for local CLI integration, SSEServerTransport for HTTP long-polling, and StreamableHTTPServerTransport for REST-based MCP communication. The transport abstraction allows the same MCP server logic to run in different deployment contexts (local CLI, HTTP server on port 3333, or embedded in Node.js applications) without code changes. Server orchestration (src/server.ts) selects transport based on environment or CLI arguments.","intents":["I want to run the Figma MCP server locally via CLI for Cursor integration","I need to deploy Figma MCP as an HTTP service accessible from remote AI agents","I want to embed the MCP server in my Node.js application without separate process","I need to support multiple client types (local, remote, browser-based) with one server"],"best_for":["Solo developers using Cursor locally (stdio transport)","Teams deploying shared Figma MCP infrastructure (HTTP transport)","Organizations embedding design automation in larger Node.js applications"],"limitations":["Stdio transport requires local process; not suitable for remote or multi-client scenarios","HTTP transport adds network latency (~50-200ms per request) vs. local stdio","SSE transport requires persistent connection; may timeout in restrictive network environments","No built-in authentication on HTTP transport; requires external reverse proxy for security"],"requires":["Node.js 18+","Express.js v4.21.2 (for HTTP transport)","@modelcontextprotocol/sdk v1.10.2","Port 3333 available (for HTTP transport)"],"input_types":["CLI arguments (--transport stdio|http|sse)","Environment variables (FIGMA_API_KEY, PORT)","MCP protocol requests (transport-agnostic)"],"output_types":["Stdio stream (for stdio transport)","HTTP response with MCP payload (for HTTP transport)","SSE event stream (for SSE transport)"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_4","uri":"capability://automation.workflow.configuration.management.with.environment.and.cli.argument.support","name":"configuration management with environment and cli argument support","description":"Implements a configuration system (src/config.ts) that reads Figma API credentials and server settings from multiple sources with a priority hierarchy: CLI arguments override environment variables, which override defaults. Supports both Personal Access Token and OAuth Bearer Token authentication methods, allowing flexible credential management across local development, CI/CD, and production deployments. Configuration is validated at startup to fail fast if required credentials are missing.","intents":["I want to configure the MCP server with my Figma API key without hardcoding it","I need to support both personal tokens and OAuth tokens for different deployment scenarios","I want to run the server in different environments (local, CI/CD, production) with different configs","I need to validate configuration at startup to catch credential issues early"],"best_for":["Developers setting up local Figma MCP for Cursor","Teams deploying Figma MCP in CI/CD pipelines","Organizations using OAuth token rotation for security"],"limitations":["No built-in credential encryption; tokens stored in plaintext in environment or CLI args","No configuration file support (YAML/JSON); must use env vars or CLI args","Validation is basic; does not test token validity against Figma API at startup","No support for credential refresh; OAuth tokens must be manually rotated"],"requires":["Figma API token (Personal Access Token or OAuth Bearer Token)","Node.js 18+","Environment variable or CLI argument for credential passing"],"input_types":["CLI arguments (--figma-api-key, --figma-oauth-token, --port)","Environment variables (FIGMA_API_KEY, FIGMA_OAUTH_TOKEN, PORT)"],"output_types":["Validated configuration object","Error message if required credentials missing"],"categories":["automation-workflow","safety-moderation"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_5","uri":"capability://tool.use.integration.figma.api.client.with.request.handling.and.error.recovery","name":"figma api client with request handling and error recovery","description":"Implements a Figma API client (src/services/figma.ts) that wraps the Figma REST API with authentication, request construction, and error handling. The client manages API calls to fetch file data, node information, and asset URLs, handling Figma's pagination for large files and implementing exponential backoff for rate-limit recovery. Abstracts Figma API specifics (authentication headers, endpoint construction, response parsing) from the extraction and transformation layers, providing a clean interface for design data retrieval.","intents":["I want to fetch Figma file data without manually constructing API requests","I need error handling and retry logic for unreliable network conditions","I want to handle Figma API rate limits gracefully without crashing","I need to abstract Figma API complexity from my design extraction logic"],"best_for":["Developers building Figma integrations who want to avoid raw API calls","Teams deploying Figma MCP in production where reliability is critical","Automation workflows that need robust error recovery"],"limitations":["Rate limiting is handled reactively (exponential backoff on 429 responses); no proactive request queuing","Pagination is automatic but may cause multiple API calls for large files, increasing latency","Error messages are Figma API responses; not normalized or user-friendly","No caching; repeated requests for same file hit Figma API each time"],"requires":["Valid Figma API token (Personal Access Token or OAuth Bearer Token)","Network access to Figma API (api.figma.com)","Node.js 18+ with built-in fetch or node-fetch"],"input_types":["Figma file ID (string)","Figma node ID (string, optional)","API token (string)"],"output_types":["Figma file JSON (raw API response)","Figma node JSON (raw API response)","Asset URL list (strings)"],"categories":["tool-use-integration","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_6","uri":"capability://data.processing.analysis.design.data.simplification.and.metadata.filtering","name":"design data simplification and metadata filtering","description":"Implements an extraction system (src/extractors) that parses Figma's verbose API responses and filters out non-essential metadata, retaining only layout, styling, and hierarchy information relevant for code generation. The extraction pipeline walks the Figma node tree, identifies design-relevant properties (constraints, fills, strokes, typography, spacing), and discards internal Figma metadata (IDs, plugin data, version history). This reduces token count and improves LLM focus by removing noise from design data.","intents":["I want to reduce token overhead by filtering Figma metadata before sending to AI models","I need to extract only layout and styling information from complex Figma files","I want to flatten Figma's nested component structure into a simpler hierarchy for code generation","I need to identify which design properties are relevant for CSS/component implementation"],"best_for":["Teams optimizing token usage in AI design-to-code workflows","Developers building design extraction tools that need to focus LLM attention","Organizations with large, complex Figma files where metadata noise is significant"],"limitations":["Filtering is opinionated; some design properties may be discarded if not explicitly mapped","Component overrides and variant logic may be lost in simplification","Nested components are flattened; original component hierarchy is not preserved","Custom Figma plugins and metadata are always discarded"],"requires":["Raw Figma API response (from src/services/figma.ts)","Node.js 18+"],"input_types":["Figma file JSON (raw API response)","Node ID filter (optional, to extract specific subtree)"],"output_types":["Simplified design object with layout, styling, and hierarchy","JSON or YAML format optimized for LLM consumption"],"categories":["data-processing-analysis","memory-knowledge"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_7","uri":"capability://code.generation.editing.figma.to.css.semantic.transformation","name":"figma-to-css semantic transformation","description":"Implements a transformer layer (src/transformers) that converts Figma design concepts into CSS-compatible properties and values. The transformation pipeline maps Figma's auto-layout system to CSS flexbox (direction, alignment, gap), translates effect objects (shadows, blurs) to CSS box-shadow and filter properties, converts Figma color objects to CSS hex/rgba values, and normalizes typography properties to CSS font specifications. This semantic translation enables AI models to generate immediately-usable CSS without interpretation overhead.","intents":["I want Figma auto-layout converted to CSS flexbox so I can generate code directly","I need Figma colors, shadows, and effects translated to CSS properties","I want typography information from Figma converted to CSS font specifications","I need design spacing and sizing converted to CSS units (px, rem, etc.)"],"best_for":["Design-to-code workflows targeting web/CSS output","Teams automating component library generation from Figma","Developers building AI agents that generate HTML/CSS from designs"],"limitations":["Transformation is CSS-only; does not support iOS, Android, or other design systems","Some Figma properties have no direct CSS equivalent (e.g., component variants); these are dropped","Responsive breakpoints in Figma are not automatically converted to CSS media queries","Figma's component system does not map cleanly to CSS; requires manual component definition"],"requires":["Simplified design data from extraction layer (src/extractors)","Node.js 18+"],"input_types":["Simplified design object with Figma properties","Transformation configuration (optional, for custom mappings)"],"output_types":["Design object with CSS properties (flexbox, colors, shadows, typography)","CSS-compatible values (hex colors, px/rem units, CSS function syntax)"],"categories":["code-generation-editing","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_8","uri":"capability://data.processing.analysis.structured.context.delivery.in.yaml.and.json.formats","name":"structured context delivery in yaml and json formats","description":"Formats extracted and transformed design data into YAML or JSON output optimized for AI model consumption. The formatting layer (src/index.ts output formatting) structures design hierarchy, properties, and assets into human-readable YAML or machine-parseable JSON, with consistent key naming and property organization. This allows AI agents to easily parse design context and reference specific components, properties, and assets in generated code.","intents":["I want design data formatted as YAML for easy reading in AI context windows","I need JSON output for programmatic parsing and component generation","I want consistent property naming across design data for predictable AI parsing","I need design hierarchy clearly represented so AI can understand component relationships"],"best_for":["AI agents that parse structured design context (Cursor, Claude, etc.)","Teams building design-to-code pipelines that need consistent data formats","Developers debugging design extraction by inspecting YAML/JSON output"],"limitations":["YAML formatting adds ~5-10ms per output; not suitable for real-time streaming","Large design files may produce very large YAML/JSON (100KB+), exceeding some AI context windows","No compression or streaming; entire design data is buffered before formatting","Custom formatting rules are not configurable; output format is fixed"],"requires":["Transformed design data from transformer layer","Node.js 18+ with built-in JSON support"],"input_types":["Transformed design object with CSS properties","Format preference (yaml or json)"],"output_types":["YAML string (human-readable)","JSON string (machine-parseable)"],"categories":["data-processing-analysis","text-generation-language"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"github_mcp-glips-figma-context-mcp__cap_9","uri":"capability://data.processing.analysis.component.hierarchy.and.property.extraction","name":"component hierarchy and property extraction","description":"Extracts Figma's component structure, including component definitions, instances, overrides, and property hierarchies, mapping them to a simplified component model suitable for code generation. The extraction system identifies component boundaries, tracks instance relationships, and preserves property inheritance chains, allowing AI models to understand which properties are inherited vs. overridden. This enables generation of component-based code that mirrors Figma's design system structure.","intents":["I want to extract Figma components and their instances to generate component-based code","I need to understand which properties are inherited from components vs. overridden in instances","I want to generate component definitions and usage code that matches Figma structure","I need to identify component variants and their property differences"],"best_for":["Teams generating component libraries from Figma design systems","Design-to-code workflows that need to preserve component structure","Organizations with complex Figma component hierarchies"],"limitations":["Component overrides are partially supported; complex override chains may be lost","Component variants in Figma do not map cleanly to code; require manual variant definition","Nested components are flattened; original nesting hierarchy is not fully preserved","Component documentation and annotations in Figma are not extracted"],"requires":["Figma file with component definitions","Raw Figma API response with component metadata"],"input_types":["Figma file JSON with component nodes","Component ID filter (optional)"],"output_types":["Component definition objects with properties and defaults","Component instance objects with overrides","Property inheritance chains"],"categories":["data-processing-analysis","code-generation-editing"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":50,"verified":false,"data_access_risk":"high","permissions":["Figma API access token (Personal Access Token or OAuth Bearer Token)","Node.js 18+ (from package.json engines specification)","Valid Figma file ID and node ID for extraction","@modelcontextprotocol/sdk v1.10.2 or compatible","MCP-compatible AI client (Cursor, Claude Desktop, or custom MCP consumer)","@modelcontextprotocol/sdk v1.10.2","Node.js 18+","Transport layer (stdio, SSE, or HTTP) configured on client","Figma API token with file access","Array of node IDs for assets to download"],"failure_modes":["Requires valid Figma API token with file access permissions; fails silently if token lacks scope","Transformation pipeline is CSS-focused; non-web design systems (iOS, Android) require custom transformers","Metadata filtering is opinionated; some design properties may be stripped if not explicitly mapped in transformer logic","No real-time sync; fetches point-in-time snapshot of Figma file state","MCP protocol overhead adds ~50-100ms per request for serialization/deserialization","Requires MCP-compatible client; does not work with REST-only AI tools","Schema validation is strict; malformed requests fail with protocol errors rather than graceful degradation","No built-in request queuing or rate limiting; relies on client-side throttling","Parallel fetching is limited by Figma API rate limits; large batches may be throttled","Image optimization is basic; complex transformations require external image processing libraries","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.6922553790739597,"quality":0.34,"ecosystem":0.65,"match_graph":0.25,"freshness":0.75,"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:22.065Z","last_scraped_at":"2026-05-03T14:23:31.492Z","last_commit":"2026-04-30T00:17:20Z"},"community":{"stars":14596,"forks":1155,"weekly_downloads":null,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=mcp-glips-figma-context-mcp","compare_url":"https://unfragile.ai/compare?artifact=mcp-glips-figma-context-mcp"}},"signature":"a4++rQIrmHPPJCWK8srNcU5SvW8Y4PKxgutxx9iQTA2F5kibc68Ek4Wg997HckWWu+15j9JebloNMg5q0tb/DQ==","signedAt":"2026-06-20T10:44:23.220Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/mcp-glips-figma-context-mcp","artifact":"https://unfragile.ai/mcp-glips-figma-context-mcp","verify":"https://unfragile.ai/api/v1/verify?slug=mcp-glips-figma-context-mcp","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"}}