figma-console-mcp 1.22.0 → 1.22.1

package/README.md

@@ -8,7 +8,7 @@
 
 > **Your design system as an API.** Model Context Protocol server that bridges design and development—giving AI assistants complete access to Figma for **extraction**, **creation**, and **debugging**.
 
-> **🆕 High-Fidelity Design-to-Code:** Deep component trees (depth 4), resolved design tokens, interaction state machines with CSS mappings, and codebase-aware component scanning. AI gets everything a senior engineer needs — tokens, sizing, states, annotations, and a cross-reference of what already exists in your codebase. [See what's new →](docs/figma-mcp-vs-figma-console-mcp.md)
+> **🆕 Comprehensive Accessibility Scanning (v1.22.0):** Full-spectrum WCAG coverage across design and code — 13 design-side lint rules, component accessibility scorecards with color-blind simulation, code-side scanning via axe-core (104 rules), and design-to-code accessibility parity checking. No rule database to maintain. [See what's new →](docs/figma-mcp-vs-figma-console-mcp.md)
 
 ## What is this?
 
@@ -21,6 +21,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 - **🔧 Variable management** - Create, update, rename, and delete design tokens
 - **⚡ Real-time monitoring** - Watch logs as plugins execute
 - **📌 FigJam boards** - Create stickies, flowcharts, tables, and code blocks on collaborative boards
+- **♿ Accessibility scanning** - 13 WCAG design checks, component scorecards, axe-core code scanning, design-to-code parity
 - **☁️ Cloud Write Relay** - Web AI clients (Claude.ai, v0, Replit) can design in Figma via cloud pairing
 - **🔄 Four ways to connect** - Remote SSE, Cloud Mode, NPX, or Local Git
 

package/figma-desktop-bridge/code.js

@@ -4430,7 +4430,47 @@ figma.ui.onmessage = async (msg) => {
       var variants = isComponentSet ? componentSet.children : [componentSet];
       var variantCount = variants.length;
 
-      // 1. State coverage analysis
+      // ---- Classify component as interactive vs presentational ----
+      var interactiveNames = /^(button|link|input|checkbox|radio|switch|toggle|tab|select|slider|dropdown|menu-item|search|combobox|listbox)/i;
+      var presentationalNames = /^(alert|badge|card|avatar|divider|skeleton|tooltip|tag|chip|banner|callout|notification|toast|icon|image|separator|progress|spinner|loader|breadcrumb|label|heading|paragraph|caption|stat|meter|indicator)/i;
+
+      // Parse variant axes from variant names (e.g., "type=success, style=fill" → {type: [...], style: [...]})
+      var variantAxes = {};
+      var hasStateAxis = false;
+      for (var vai = 0; vai < variants.length; vai++) {
+        var vParts = variants[vai].name.split(',');
+        for (var vpi = 0; vpi < vParts.length; vpi++) {
+          var kv = vParts[vpi].trim().split('=');
+          if (kv.length === 2) {
+            var axisName = kv[0].trim().toLowerCase();
+            var axisValue = kv[1].trim().toLowerCase();
+            if (!variantAxes[axisName]) variantAxes[axisName] = [];
+            if (variantAxes[axisName].indexOf(axisValue) === -1) {
+              variantAxes[axisName].push(axisValue);
+            }
+            // Check if this axis contains interaction state values
+            if (axisName === 'state' && /(hover|focus|pressed|disabled|active)/i.test(axisValue)) {
+              hasStateAxis = true;
+            }
+          }
+        }
+      }
+
+      var componentName = componentSet.name || '';
+      var isInteractive = interactiveNames.test(componentName) || hasStateAxis;
+      var isPresentational = !isInteractive && (presentationalNames.test(componentName) || !hasStateAxis);
+      // If ambiguous, check if any variant mentions interaction states
+      if (!isInteractive && !isPresentational) {
+        for (var ami = 0; ami < variants.length; ami++) {
+          if (/(hover|focus|pressed|disabled)/i.test(variants[ami].name)) {
+            isInteractive = true;
+            break;
+          }
+        }
+        if (!isInteractive) isPresentational = true;
+      }
+
+      // 1. Coverage analysis — adapts to component classification
       var stateKeywords = {
         'default': /(default|rest|idle|normal|base)/i,
         'hover': /(hover|hovered)/i,
@@ -4440,35 +4480,69 @@ figma.ui.onmessage = async (msg) => {
         'active': /(active|pressed|selected)/i,
         'loading': /(loading|spinner)/i
       };
+
+      var coveredCount = 0;
+      var totalStates = 0;
+      var missingStates = [];
       var statesCovered = {};
       var statesFound = {};
-      for (var sk in stateKeywords) {
-        statesCovered[sk] = false;
-        statesFound[sk] = null;
-      }
-      for (var vi = 0; vi < variants.length; vi++) {
-        var vName = variants[vi].name;
-        for (var sk2 in stateKeywords) {
-          if (stateKeywords[sk2].test(vName)) {
-            statesCovered[sk2] = true;
-            if (!statesFound[sk2]) statesFound[sk2] = vName;
+      var coverageLabel = '';
+      var variantAxisCoverage = null;
+
+      if (isInteractive) {
+        // Interactive components: check for interaction states
+        coverageLabel = 'interactive-states';
+        for (var sk in stateKeywords) {
+          statesCovered[sk] = false;
+          statesFound[sk] = null;
+        }
+        for (var vi = 0; vi < variants.length; vi++) {
+          var vName = variants[vi].name;
+          for (var sk2 in stateKeywords) {
+            if (stateKeywords[sk2].test(vName)) {
+              statesCovered[sk2] = true;
+              if (!statesFound[sk2]) statesFound[sk2] = vName;
+            }
           }
         }
-      }
-      // If only one variant and no state keywords match, assume it's default
-      if (variantCount === 1 && !statesCovered['default']) {
-        statesCovered['default'] = true;
-        statesFound['default'] = variants[0].name;
-      }
-      var coveredCount = 0;
-      var totalStates = 0;
-      var missingStates = [];
-      for (var sk3 in statesCovered) {
-        totalStates++;
-        if (statesCovered[sk3]) {
-          coveredCount++;
-        } else {
-          missingStates.push(sk3);
+        if (variantCount === 1 && !statesCovered['default']) {
+          statesCovered['default'] = true;
+          statesFound['default'] = variants[0].name;
+        }
+        for (var sk3 in statesCovered) {
+          totalStates++;
+          if (statesCovered[sk3]) {
+            coveredCount++;
+          } else {
+            missingStates.push(sk3);
+          }
+        }
+      } else {
+        // Presentational components: check variant axis completeness
+        coverageLabel = 'variant-axes';
+        // Calculate expected combinations vs actual
+        var axisNames = [];
+        var axisCounts = [];
+        var expectedCombinations = 1;
+        for (var axName in variantAxes) {
+          axisNames.push(axName);
+          axisCounts.push(variantAxes[axName].length);
+          expectedCombinations *= variantAxes[axName].length;
+        }
+        // Score: actual variants / expected combinations (capped at 100%)
+        var axisCoverageRatio = expectedCombinations > 0 ? Math.min(1, variantCount / expectedCombinations) : 1;
+        coveredCount = variantCount;
+        totalStates = expectedCombinations;
+        variantAxisCoverage = {
+          axes: variantAxes,
+          axisCount: axisNames.length,
+          expectedCombinations: expectedCombinations,
+          actualVariants: variantCount,
+          completeness: Math.round(axisCoverageRatio * 100) + '%'
+        };
+        // For presentational, no "missing states" — instead note if combinations are incomplete
+        if (variantCount < expectedCombinations) {
+          missingStates.push(variantCount + '/' + expectedCombinations + ' axis combinations present');
         }
       }
 
@@ -4552,6 +4626,9 @@ figma.ui.onmessage = async (msg) => {
       }
 
       // 4. Target size analysis
+      // WCAG 2.5.8 applies to interactive targets — presentational components
+      // (badges, avatars, progress bars) are not tap targets by definition.
+      // Skip target size checking for presentational components to avoid false positives.
       var targetSizeAnalysis = { minWidth: Infinity, minHeight: Infinity, variants: [], issues: [] };
       var minTarget = msg.targetSize || 24; // Default WCAG 2.5.8 minimum
       for (var tvi = 0; tvi < variants.length; tvi++) {
@@ -4562,7 +4639,8 @@ figma.ui.onmessage = async (msg) => {
             targetSizeAnalysis.variants.push({ name: variants[tvi].name, width: tw, height: th });
             if (tw < targetSizeAnalysis.minWidth) targetSizeAnalysis.minWidth = tw;
             if (th < targetSizeAnalysis.minHeight) targetSizeAnalysis.minHeight = th;
-            if (tw < minTarget || th < minTarget) {
+            // Only flag target size issues for interactive components
+            if (isInteractive && (tw < minTarget || th < minTarget)) {
               targetSizeAnalysis.issues.push({
                 variant: variants[tvi].name,
                 width: tw,
@@ -4658,14 +4736,15 @@ figma.ui.onmessage = async (msg) => {
 
       // ---- Compute overall score ----
       var scores = {};
-      // State coverage: percentage of states found
-      scores.stateCoverage = Math.round((coveredCount / totalStates) * 100);
+      // Coverage: percentage of states (interactive) or axis combinations (presentational)
+      scores.variantCoverage = totalStates > 0 ? Math.round((coveredCount / totalStates) * 100) : 100;
       // Focus indicator: 0 (missing), 50 (exists but no indicator), 100 (good indicator)
-      scores.focusIndicator = !focusAnalysis.hasVariant ? 0 : (!focusAnalysis.hasVisibleIndicator ? 50 : 100);
+      // For presentational: N/A → score 100 (don't penalize)
+      scores.focusIndicator = isPresentational ? 100 : (!focusAnalysis.hasVariant ? 0 : (!focusAnalysis.hasVisibleIndicator ? 50 : 100));
       // Color differentiation: 100 if no issues, decremented per issue
       scores.colorDifferentiation = colorDifferentiation.checked === 0 ? 100 : Math.max(0, Math.round(((colorDifferentiation.checked - colorDifferentiation.issues.length) / colorDifferentiation.checked) * 100));
-      // Target size: 100 if all pass, 0 if any fail
-      scores.targetSize = targetSizeAnalysis.issues.length === 0 ? 100 : Math.max(0, Math.round(((targetSizeAnalysis.variants.length - targetSizeAnalysis.issues.length) / Math.max(1, targetSizeAnalysis.variants.length)) * 100));
+      // Target size: N/A for presentational (not tap targets), scored for interactive
+      scores.targetSize = isPresentational ? 100 : (targetSizeAnalysis.issues.length === 0 ? 100 : Math.max(0, Math.round(((targetSizeAnalysis.variants.length - targetSizeAnalysis.issues.length) / Math.max(1, targetSizeAnalysis.variants.length)) * 100)));
       // Annotations: 0 (nothing), 50 (description only), 100 (has a11y notes)
       scores.annotations = annotations.hasA11yNotes ? 100 : (annotations.hasDescription ? 50 : 0);
       // Color blind: percentage of simulations with no issues
@@ -4675,48 +4754,76 @@ figma.ui.onmessage = async (msg) => {
       }
       scores.colorBlindSafety = colorBlindAnalysis.simulations.length > 0 ? Math.round((cbPassCount / colorBlindAnalysis.simulations.length) * 100) : 100;
 
-      // Overall weighted score
-      var overall = Math.round(
-        scores.stateCoverage * 0.20 +
-        scores.focusIndicator * 0.20 +
-        scores.colorDifferentiation * 0.15 +
-        scores.targetSize * 0.15 +
-        scores.annotations * 0.10 +
-        scores.colorBlindSafety * 0.20
-      );
+      // Overall weighted score — weights differ by component classification
+      var overall;
+      if (isInteractive) {
+        // Interactive: focus and states matter most
+        overall = Math.round(
+          scores.variantCoverage * 0.20 +
+          scores.focusIndicator * 0.20 +
+          scores.colorDifferentiation * 0.15 +
+          scores.targetSize * 0.15 +
+          scores.annotations * 0.10 +
+          scores.colorBlindSafety * 0.20
+        );
+      } else {
+        // Presentational: variant completeness and color safety matter most, focus is N/A
+        overall = Math.round(
+          scores.variantCoverage * 0.25 +
+          scores.colorDifferentiation * 0.25 +
+          scores.annotations * 0.15 +
+          scores.colorBlindSafety * 0.25 +
+          scores.targetSize * 0.10
+        );
+      }
 
       // ---- Build response ----
+      var coverageSection;
+      if (isInteractive) {
+        coverageSection = {
+          mode: 'interactive-states',
+          found: statesFound,
+          missing: missingStates,
+          coverage: coveredCount + '/' + totalStates
+        };
+      } else {
+        coverageSection = {
+          mode: 'variant-axes',
+          axes: variantAxisCoverage,
+          coverage: coveredCount + '/' + totalStates
+        };
+      }
+
       var auditResult = {
         component: {
           id: componentSet.id,
           name: componentSet.name,
           type: componentSet.type,
-          variantCount: variantCount
+          variantCount: variantCount,
+          classification: isInteractive ? 'interactive' : 'presentational'
         },
         overallScore: overall,
         scores: scores,
-        stateCoverage: {
-          found: statesFound,
-          missing: missingStates,
-          coverage: coveredCount + '/' + totalStates
-        },
-        focusIndicator: focusAnalysis,
+        variantCoverage: coverageSection,
+        focusIndicator: isInteractive ? focusAnalysis : { notApplicable: true, details: 'Focus indicators are not expected for presentational components' },
         colorDifferentiation: colorDifferentiation,
-        targetSize: {
+        targetSize: isInteractive ? {
           minimum: minTarget + 'x' + minTarget,
           smallest: targetSizeAnalysis.minWidth + 'x' + targetSizeAnalysis.minHeight,
           issues: targetSizeAnalysis.issues
-        },
+        } : { notApplicable: true, details: 'Target size checks apply to interactive components (WCAG 2.5.8 is about tap targets)', smallest: targetSizeAnalysis.minWidth + 'x' + targetSizeAnalysis.minHeight },
         annotations: annotations,
         colorBlindSimulation: colorBlindAnalysis,
         recommendations: []
       };
 
-      // Generate recommendations
-      if (!focusAnalysis.hasVariant) {
-        auditResult.recommendations.push({ priority: 'high', area: 'focus', message: 'Add a focus/focused variant with a visible focus ring (WCAG 2.4.7)' });
-      } else if (!focusAnalysis.hasVisibleIndicator) {
-        auditResult.recommendations.push({ priority: 'medium', area: 'focus', message: 'Focus variant exists but lacks visible indicator — add a border or shadow' });
+      // Generate recommendations — classification-aware
+      if (isInteractive) {
+        if (!focusAnalysis.hasVariant) {
+          auditResult.recommendations.push({ priority: 'high', area: 'focus', message: 'Add a focus/focused variant with a visible focus ring (WCAG 2.4.7)' });
+        } else if (!focusAnalysis.hasVisibleIndicator) {
+          auditResult.recommendations.push({ priority: 'medium', area: 'focus', message: 'Focus variant exists but lacks visible indicator — add a border or shadow' });
+        }
       }
       if (colorDifferentiation.issues.length > 0) {
         auditResult.recommendations.push({ priority: 'high', area: 'color', message: 'Add non-color indicators (icons, borders, text) to ' + colorDifferentiation.issues.length + ' state variant(s) (WCAG 1.4.1)' });
@@ -4728,16 +4835,23 @@ figma.ui.onmessage = async (msg) => {
         auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: 'Add a component description with usage guidelines' });
       }
       if (!annotations.hasA11yNotes) {
-        auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: 'Add accessibility notes (ARIA role, keyboard interactions, screen reader behavior)' });
+        var a11yHint = isInteractive
+          ? 'Add accessibility notes (ARIA role, keyboard interactions, screen reader behavior)'
+          : 'Add accessibility notes (ARIA role, live region behavior, semantic usage)';
+        auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: a11yHint });
       }
       if (colorBlindAnalysis.issues.length > 0) {
         auditResult.recommendations.push({ priority: 'medium', area: 'color-blind', message: colorBlindAnalysis.issues.join('; ') });
       }
-      for (var msi = 0; msi < missingStates.length; msi++) {
-        var ms = missingStates[msi];
-        if (ms === 'focus' || ms === 'disabled') {
-          auditResult.recommendations.push({ priority: 'medium', area: 'states', message: 'Consider adding a "' + ms + '" variant for complete interactive state coverage' });
+      if (isInteractive) {
+        for (var msi = 0; msi < missingStates.length; msi++) {
+          var ms = missingStates[msi];
+          if (ms === 'focus' || ms === 'disabled') {
+            auditResult.recommendations.push({ priority: 'medium', area: 'states', message: 'Consider adding a "' + ms + '" variant for complete interactive state coverage' });
+          }
         }
+      } else if (variantAxisCoverage && variantCount < variantAxisCoverage.expectedCombinations) {
+        auditResult.recommendations.push({ priority: 'low', area: 'coverage', message: variantCount + ' of ' + variantAxisCoverage.expectedCombinations + ' axis combinations present — consider adding missing variants for completeness' });
       }
 
       console.log('🌉 [Desktop Bridge] Component audit complete: score ' + overall + '/100 for "' + componentSet.name + '"');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "figma-console-mcp",
-	"version": "1.22.0",
+	"version": "1.22.1",
 	"description": "MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode",
 	"type": "module",
 	"main": "dist/local.js",