{"passport":{"unfragile":{"@version":"1.0","version":"2026-05","artifact":{"id":"npm-figma-mcp","slug":"figma-mcp","name":"figma-mcp","type":"mcp","url":"https://www.npmjs.com/package/figma-mcp","page_url":"https://unfragile.ai/figma-mcp","categories":["mcp-servers"],"tags":[],"pricing":{"model":"open_source","free":true,"starting_price":null},"status":"active","verified":false},"capabilities":[{"id":"npm-figma-mcp__cap_0","uri":"capability://tool.use.integration.figma.document.tree.traversal.and.introspection.via.mcp","name":"figma document tree traversal and introspection via mcp","description":"Exposes Figma's document hierarchy (pages, frames, components, layers) as MCP resources that LLM agents can query and navigate. Implements a resource-based protocol where each Figma node becomes an addressable entity with metadata (type, name, bounds, properties), enabling agents to understand design structure without direct API calls. Uses MCP's resource subscription pattern to maintain live references to Figma objects.","intents":["Query the structure of a Figma file to understand its organization and component hierarchy","Retrieve metadata about specific design elements (dimensions, position, fill colors, typography)","Navigate parent-child relationships between frames and components to map design dependencies","Identify all instances of a component or pattern across a file for bulk operations"],"best_for":["Design systems teams building automated documentation or code generation from Figma","LLM agents that need to understand design structure before performing edits","Developers building Figma-to-code pipelines that require semantic understanding of layouts"],"limitations":["Read-only traversal in initial implementation — no mutation of document structure during traversal","Latency depends on Figma file size; large files (1000+ layers) may require pagination or caching","Does not expose real-time collaboration state or version history","Limited to Figma REST API capabilities — cannot access prototype interactions or advanced constraints"],"requires":["Figma API token with read access to target files","Node.js 16+ runtime for MCP server","MCP client implementation (Claude Desktop, custom agent framework, etc.)","Figma file ID or team/project context"],"input_types":["Figma file ID (string)","Node ID or path (string)","Query parameters (layer name, component type, bounds filter)"],"output_types":["JSON-structured node metadata","Hierarchical tree representation","Property objects (dimensions, colors, typography, constraints)"],"categories":["tool-use-integration","design-systems"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_1","uri":"capability://code.generation.editing.figma.to.code.generation.via.llm.prompting","name":"figma-to-code generation via llm prompting","description":"Enables LLM agents to analyze Figma design elements (frames, components, text, shapes) and generate corresponding code (HTML/CSS, React, Vue, or other frameworks). The MCP server provides design metadata to the LLM, which uses chain-of-thought reasoning to map visual properties (layout, colors, typography, spacing) to code constructs. Supports component-aware generation where Figma components map to reusable code components.","intents":["Convert a Figma frame or component into production-ready HTML/CSS or React component code","Generate responsive layouts from Figma designs with media queries and flexbox/grid","Extract design tokens (colors, typography, spacing) from Figma and generate design system code","Batch-generate code for multiple components or pages in a Figma file"],"best_for":["Design-to-code workflows where designers use Figma and developers need to implement quickly","Design system teams automating component library generation from Figma source of truth","Rapid prototyping teams that want to skip manual HTML/CSS boilerplate"],"limitations":["Code quality depends on LLM reasoning — complex layouts or custom interactions may require manual refinement","No built-in handling of Figma prototypes, interactions, or animations (requires manual implementation)","Responsive design generation is heuristic-based; may not match designer intent for all breakpoints","Requires LLM context window large enough to hold full design metadata + code generation prompt"],"requires":["Figma file with properly organized frames/components (naming conventions help LLM understanding)","LLM with code generation capability (Claude 3+, GPT-4, etc.)","Target framework/language specified (React, Vue, HTML/CSS, etc.)","Design tokens or style guide context (optional but improves output quality)"],"input_types":["Figma frame/component ID","Design metadata (layout type, colors, typography, spacing)","Code generation prompt or template"],"output_types":["HTML/CSS code","React/Vue component code","Design token definitions (CSS variables, Tailwind config)","Component library scaffolding"],"categories":["code-generation-editing","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_2","uri":"capability://tool.use.integration.mcp.based.tool.calling.for.figma.api.operations","name":"mcp-based tool calling for figma api operations","description":"Exposes Figma API operations (create/update/delete nodes, modify properties, manage components) as MCP tools that LLM agents can invoke with structured arguments. Implements schema-based tool definitions where each Figma operation (e.g., 'update node fill color', 'create frame') is a callable tool with input validation, error handling, and response normalization. Handles authentication and API rate limiting transparently.","intents":["Programmatically update design properties (colors, text, dimensions) in Figma from LLM instructions","Create new frames, components, or layers in Figma based on design specifications","Batch-modify multiple design elements (e.g., update all button colors across a file)","Automate design system maintenance tasks (rename components, update shared styles)"],"best_for":["Design automation workflows where LLM agents modify Figma files based on feedback or requirements","Design system maintainers automating bulk updates to component libraries","Teams building AI-assisted design tools that need to mutate Figma documents"],"limitations":["Figma API has rate limits (120 requests/minute for standard tier) — bulk operations may require queuing","No transactional guarantees — partial failures in multi-step operations require manual rollback","Limited to Figma REST API capabilities — cannot directly manipulate prototype interactions or advanced constraints","Changes are not undoable via MCP — requires Figma's native undo or external version control"],"requires":["Figma API token with write access to target files","File edit permissions in Figma (not just view access)","LLM with tool-calling capability (Claude 3+, GPT-4, etc.)","Understanding of Figma's node ID system and property schemas"],"input_types":["Tool name (string, e.g., 'update_node_fill')","Structured arguments (node ID, property name, new value)","Optional: batch operation list"],"output_types":["Operation status (success/failure)","Updated node metadata","Error messages with remediation hints"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_3","uri":"capability://data.processing.analysis.design.token.extraction.and.synchronization","name":"design token extraction and synchronization","description":"Automatically extracts design tokens (colors, typography, spacing, shadows) from Figma styles and variables, normalizing them into structured formats (JSON, CSS variables, Tailwind config). Implements a mapping layer that translates Figma's style hierarchy into token definitions, with support for semantic naming (e.g., 'primary-button-color' instead of 'color-blue-500'). Enables bidirectional sync where token changes in Figma propagate to code.","intents":["Export all colors, typography, and spacing from a Figma design system as design tokens","Generate CSS variable declarations or Tailwind configuration from Figma styles","Maintain a single source of truth for design tokens between Figma and codebase","Detect token inconsistencies or unused styles in a Figma file"],"best_for":["Design system teams that use Figma as the source of truth for tokens","Frontend teams that want to keep design tokens in sync with Figma without manual updates","Organizations building design-to-code pipelines that require consistent token usage"],"limitations":["Requires well-organized Figma styles and variables — poorly named or nested styles produce poor token output","One-way sync in basic implementation — code-to-Figma sync requires additional tooling","No support for complex token transformations (e.g., deriving responsive values from base tokens)","Semantic naming inference is heuristic-based and may require manual curation"],"requires":["Figma file with organized styles and variables (recommended: follow design token naming conventions)","Figma API token with read access","Target format specification (JSON, CSS, Tailwind, etc.)","Optional: design token naming schema or conventions document"],"input_types":["Figma file ID","Style/variable filter (e.g., 'colors/*', 'typography/*')","Output format specification"],"output_types":["JSON token definitions","CSS variable declarations","Tailwind configuration file","Design token documentation"],"categories":["data-processing-analysis","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_4","uri":"capability://data.processing.analysis.component.instance.analysis.and.dependency.mapping","name":"component instance analysis and dependency mapping","description":"Analyzes Figma component hierarchies to identify component instances, overrides, and dependencies. Builds a dependency graph showing which components use which other components, enabling impact analysis for changes. Detects orphaned components, unused variants, and inconsistent overrides. Provides LLM agents with structured component metadata to reason about design system health.","intents":["Understand the component dependency graph in a Figma design system","Identify all instances of a component across a file to assess impact of changes","Detect unused or orphaned components that can be removed","Find inconsistent component overrides that violate design system rules"],"best_for":["Design system maintainers auditing component usage and health","Teams planning component refactoring or deprecation","LLM agents that need to understand design system structure before suggesting changes"],"limitations":["Analysis is file-scoped — cannot detect cross-file component dependencies","Orphaned component detection is heuristic-based (may flag components used only in prototypes)","Does not analyze component usage in shared libraries or external files","Override analysis may be incomplete for deeply nested or complex component structures"],"requires":["Figma file with organized component library","Figma API token with read access","Component naming conventions (recommended for accurate analysis)"],"input_types":["Figma file ID","Component filter (optional, e.g., 'Button/*', 'Card/*')"],"output_types":["Component dependency graph (JSON)","Instance count per component","Override analysis report","Orphaned/unused component list"],"categories":["data-processing-analysis","planning-reasoning"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_5","uri":"capability://tool.use.integration.collaborative.design.feedback.and.annotation.via.mcp","name":"collaborative design feedback and annotation via mcp","description":"Enables LLM agents to add comments, annotations, and feedback to Figma designs through MCP tool calls. Implements structured comment creation with context (node ID, position, content) and supports threaded discussions. Allows agents to flag design issues, suggest improvements, or request clarifications without requiring manual Figma UI interaction.","intents":["Automatically add design review comments to Figma based on design system compliance checks","Flag accessibility issues (contrast, text size) in designs with actionable feedback","Request designer clarification on ambiguous design decisions","Document design decisions or rationale directly in Figma for team reference"],"best_for":["Design review automation where agents check designs against design system rules","Accessibility auditing workflows that flag issues directly in Figma","Teams that want to keep design feedback in context (Figma) rather than external tools"],"limitations":["Comments are one-way from agent to designers — no built-in conversation threading or resolution tracking","Figma comment API has limited formatting options (no rich text, images, or custom metadata)","High volume of automated comments may create notification fatigue for designers","No integration with external issue tracking or design review workflows"],"requires":["Figma API token with write access (comment creation requires edit permissions)","LLM with tool-calling capability","Design system rules or compliance criteria (for automated feedback)"],"input_types":["Node ID (target for comment)","Comment text (string)","Optional: comment category or severity level"],"output_types":["Comment creation status","Comment ID and metadata","Notification to relevant team members"],"categories":["tool-use-integration","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_6","uri":"capability://data.processing.analysis.figma.file.versioning.and.change.tracking","name":"figma file versioning and change tracking","description":"Tracks changes to Figma files over time by querying file version history and computing diffs between versions. Identifies what changed (nodes added/removed/modified), who made changes, and when. Enables LLM agents to understand design evolution and reason about change impact. Implements a change log that can be queried for specific time ranges or node types.","intents":["Retrieve the change history of a Figma file to understand design evolution","Identify what changed between two versions of a design","Track who made specific changes and when (audit trail)","Analyze design change patterns to identify frequently modified components"],"best_for":["Design teams that need audit trails for compliance or documentation","LLM agents analyzing design change patterns to suggest improvements","Teams investigating design regressions or unintended changes"],"limitations":["Version history is limited to Figma's retention policy (typically 30 days for free tier)","Diff computation is approximate — does not capture all property changes (e.g., constraint modifications)","No access to deleted files or permanently removed versions","Change tracking is file-scoped — cannot correlate changes across multiple files"],"requires":["Figma API token with read access to file history","Figma file with version history available (requires active collaboration or manual saves)"],"input_types":["Figma file ID","Optional: version ID range or time range filter"],"output_types":["Version list with metadata (timestamp, author, summary)","Diff report (nodes added/removed/modified)","Change log (structured list of changes)"],"categories":["data-processing-analysis","automation-workflow"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_7","uri":"capability://data.processing.analysis.responsive.design.validation.and.breakpoint.analysis","name":"responsive design validation and breakpoint analysis","description":"Analyzes Figma designs for responsive design patterns and validates layouts against specified breakpoints. Checks for proper use of constraints, auto-layout, and responsive sizing. Identifies potential responsive design issues (text overflow, layout collapse, unintended scaling). Provides LLM agents with structured feedback on design responsiveness and suggests improvements.","intents":["Validate that a Figma design uses proper responsive design patterns (constraints, auto-layout)","Check for potential responsive issues at different breakpoints","Identify components that may not scale well on mobile or tablet","Generate responsive design recommendations based on design analysis"],"best_for":["Design teams building responsive web applications","Design system teams ensuring components work across breakpoints","QA teams validating design responsiveness before development"],"limitations":["Validation is static — does not simulate actual rendering at different viewport sizes","Constraint analysis may be incomplete for complex nested structures","Does not account for content-driven responsiveness (e.g., variable text length)","Breakpoint definitions must be provided externally (no automatic detection)"],"requires":["Figma file with responsive design patterns (constraints, auto-layout)","Breakpoint specifications (e.g., mobile: 320px, tablet: 768px, desktop: 1024px)","Figma API token with read access"],"input_types":["Figma frame/component ID","Breakpoint definitions (array of viewport widths)","Optional: design system constraints or rules"],"output_types":["Responsive design validation report","Issue list with severity levels","Recommendations for improvement","Constraint analysis (which elements use constraints vs auto-layout)"],"categories":["data-processing-analysis","planning-reasoning"],"confidence":0.5,"matches":0,"success_rate":0},{"id":"npm-figma-mcp__cap_8","uri":"capability://safety.moderation.accessibility.compliance.checking.and.reporting","name":"accessibility compliance checking and reporting","description":"Analyzes Figma designs for accessibility issues including color contrast, text size, touch target size, and semantic structure. Implements WCAG compliance checks that flag designs violating accessibility standards. Generates accessibility reports with severity levels and remediation suggestions. Enables LLM agents to audit designs and suggest accessible alternatives.","intents":["Check color contrast ratios in designs against WCAG AA/AAA standards","Validate text sizes meet minimum readability requirements","Ensure interactive elements (buttons, links) have adequate touch targets (48x48px minimum)","Identify semantic structure issues (missing labels, unclear hierarchy)"],"best_for":["Design teams building accessible products","Compliance-focused organizations (government, healthcare, finance)","Design systems teams ensuring component accessibility"],"limitations":["Accessibility checks are static — do not account for runtime behavior or dynamic content","Color contrast analysis assumes solid colors (does not handle gradients or images well)","Cannot verify screen reader compatibility or keyboard navigation (requires runtime testing)","Semantic structure analysis is heuristic-based (may miss context-dependent accessibility issues)"],"requires":["Figma file with properly organized layers and text","Figma API token with read access","WCAG compliance level target (AA or AAA)"],"input_types":["Figma frame/component ID","WCAG compliance level (AA or AAA)","Optional: custom accessibility rules or thresholds"],"output_types":["Accessibility compliance report","Issue list with severity (error, warning, info)","Remediation suggestions","Compliance score or percentage"],"categories":["safety-moderation","data-processing-analysis"],"confidence":0.5,"matches":0,"success_rate":0}],"trust":{"score":32,"verified":false,"data_access_risk":"high","permissions":["Figma API token with read access to target files","Node.js 16+ runtime for MCP server","MCP client implementation (Claude Desktop, custom agent framework, etc.)","Figma file ID or team/project context","Figma file with properly organized frames/components (naming conventions help LLM understanding)","LLM with code generation capability (Claude 3+, GPT-4, etc.)","Target framework/language specified (React, Vue, HTML/CSS, etc.)","Design tokens or style guide context (optional but improves output quality)","Figma API token with write access to target files","File edit permissions in Figma (not just view access)"],"failure_modes":["Read-only traversal in initial implementation — no mutation of document structure during traversal","Latency depends on Figma file size; large files (1000+ layers) may require pagination or caching","Does not expose real-time collaboration state or version history","Limited to Figma REST API capabilities — cannot access prototype interactions or advanced constraints","Code quality depends on LLM reasoning — complex layouts or custom interactions may require manual refinement","No built-in handling of Figma prototypes, interactions, or animations (requires manual implementation)","Responsive design generation is heuristic-based; may not match designer intent for all breakpoints","Requires LLM context window large enough to hold full design metadata + code generation prompt","Figma API has rate limits (120 requests/minute for standard tier) — bulk operations may require queuing","No transactional guarantees — partial failures in multi-step operations require manual rollback","builder identity is not verified yet","no observed match outcomes yet"],"rank_breakdown":{"adoption":0.3271369525094445,"quality":0.28,"ecosystem":0.3,"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.902Z","last_scraped_at":"2026-05-03T14:04:47.472Z","last_commit":null},"community":{"stars":null,"forks":null,"weekly_downloads":2161,"model_downloads":null,"model_likes":null}},"distribution":{"claim_url":"https://unfragile.ai/submit?claim=figma-mcp","compare_url":"https://unfragile.ai/compare?artifact=figma-mcp"}},"signature":"JuArzOLl+etqP/3ozkgeTk4jBB/f7QodWBWgNfqc5ZiJS0Wx88GOiVs5HWCw/oF/u3m3E4nrzgmgYlOw+aj+BQ==","signedAt":"2026-06-20T14:08:09.674Z","signedBy":"unfragile.ai","version":1},"_links":{"self":"https://unfragile.ai/api/v1/passport/figma-mcp","artifact":"https://unfragile.ai/figma-mcp","verify":"https://unfragile.ai/api/v1/verify?slug=figma-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"}}