Bmad Figma Design Analyzer

Skill: BMAD Figma Design Analyzer

Overview

This skill guides the analysis of Figma designs, extracting visual, spatial, structural, and behavioral properties into structured, deterministic, and traceable Markdown specifications.

The Figma design is the primary visual source of truth. The core imperative is to extract facts before interpreting, maintain strict traceability, and never invent or assume missing properties.

Operating Directives & Execution Guidelines

1. Facts First: Extract observed parameters directly from the Figma canvas before attempting interpretation or technical recommendations.
2. Strict Categorization: Every documented property must be explicitly labeled:
   • Extracted: Observed directly from Figma properties/variables/styles.
   • Derived: Calculated logically from Figma data (e.g., container width minus padding).
   • Recommended: Technical or framework suggestions made by the agent.
   • Unknown: Unspecified or unobservable properties (render strictly as Not specified).
3. No Fabrication: Never invent missing colors, spacing, font sizes, hover/focus states, component variants, responsive breakpoints, or API logic.
4. Traceability: Preserve Figma Node IDs, Frame references, Component Set references, and Variant details for all extracted elements where available.
5. Conflict Protocol: Document visual inconsistencies or conflicts between project standards and Figma directly rather than silently normalizing or overwriting them.

Phase-by-Phase Execution Methodology

┌────────────────────────────────────────────────────────┐
│ Phase 1: Context & File Structure Discovery           │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 2: Screen Inventory & Id Assignment (SCR-xxx)    │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 3: Global Tokens & System Extraction            │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 4: Screen-by-Screen & Component Decomposition    │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 5: Responsive, State & Interaction Analysis      │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 6: Conflict & Ambiguity Logging                  │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│ Phase 7: Validation & Completeness Scoring             │
└────────────────────────────────────────────────────────┘

Phase 1: Context & File Discovery

• Determine the scope (File, Page, Frame, Component Set, MCP Context).
• Extract overall file metadata, variables, color/text styles, and frame structures.

Phase 2: Screen Inventory Creation

• Identify every user-facing frame.
• Assign a stable Screen ID (SCR-001, SCR-002, etc.).
• Record viewports, canvas dimensions, and primary roles.

Phase 3: Global System Extraction

Extract system-wide properties:

• Colors: Hex/RGBA codes, design token names, usage roles.
• Typography: Font family, font size, font weight, line height, letter spacing.
• Spacing Scale: Padding, margins, auto layout gaps.
• Borders & Radii: Stroke widths, individual corner radii, stroke styles.
• Shadows/Effects: Offset (X, Y), blur radius, spread, opacity.

Phase 4: Detailed Component Analysis

Document reusable components with ID CMP-001, CMP-002, etc.:

• Inspect component sets, variants, and component instances.
• Map internal structural hierarchy (Component Anatomy).
• Extract variant dimensions, layout models (Flex/Grid/Auto Layout), and constraints.

Phase 5: Responsive & Interaction Behavior

• Map differences across Desktop, Tablet, and Mobile viewports.
• Document visibility shifts (show/hide states per viewport).
• Extract prototype connections (trigger actions, transition types, overlays, state changes).

Phase 6: Inconsistencies & Ambiguities

• Inconsistencies: Log mismatched measurements for identical UI elements as INC-xxx.
• Open Questions: Log missing behavior/states as OQ-xxx.
• Assumptions: Explicitly tag any necessary logical deductions as ASSUM-xxx with confidence levels (High, Medium, Low).

Standard Output Output Schemas

Produce outputs adhering to the templates below.

1. Master Design Specification (figma-design-spec.md)

# Figma Design Specification

## Document Information
- **Project**: <Project Name>
- **Figma Source**: <URL Frame Reference or>
- **Generated By**: BMAD Figma Design Analyzer
- **Version**: 1.0
- **Generated Date**: <YYYY-MM-DD>
- **Design Scope**: <Scope Description>

## Source of Truth
The Figma design is the primary visual source of truth. Properties that cannot be determined are explicitly marked as `Not specified`.

---

## Executive Summary & Application Structure
<High-level and layout overview product summary>

---

## Screen Inventory

| ID | Screen Name | Figma Frame | Viewport | Target Resolution | Purpose |
|---|---|---|---|---|---|
| SCR-001 | Dashboard | Dashboard_Desktop | Desktop | 1440x1024 | Main Overview |

---

## Global Design Tokens

### Color Tokens
| Token | Hex / Value | Figma Variable / Style | Extracted Purpose |
|---|---|---|---|
| `color-primary` | `#2563EB` | `Colors/Primary` | Primary action buttons, active navigation |

### Typography Scale
| Style Name | Font Family | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| Heading / H1 | Inter | 32px | 700 | 40px | -0.02em |

### Spacing Scale
| Token | Pixel Value | Identified Pattern / Usage |
|---|---|---|
| `spacing-4` | 16px | Default card internal padding, button spacing |

---

## Screen Specifications

### SCR-001 — Dashboard

#### Overview
- **Figma Frame**: `Dashboard_Desktop`
- **Figma Node ID**: `123:456`
- **Viewport**: Desktop (1440px x 1024px)
- **Background Color**: `#F8F9FB`

#### Layout Hierarchy & Structure
```text
Application Shell
├── Header (CMP-002)
├── Navigation Sidebar (CMP-003)
└── Main Content Container (Auto-Layout: Vertical, Gap: 32px, Padding: 24px)
    ├── Summary Section (Grid: 4 Columns, Gap: 24px)
    └── Activity Section

Component Specifications

CMP-001 — Primary Button

Overview

• Category: Action / Form Element
• Figma Component Set: Button
• Node ID: 234:567

Visual Anatomy

Button Container
├── Left Icon Slot (Optional, 20x20px)
├── Label (Typography: Button Text, Weight: 600)
└── Right Icon Slot (Optional, 20x20px)

Metrics & Spacing

• Height: 44px
• Horizontal Padding: 20px
• Border Radius: 8px
• Auto Layout: Horizontal, Alignment: Center, Gap: 8px

Variants & States

Responsive Specifications

Asset & Icon Inventory

Visual Assets

Discrepancies, Questions & Assumptions

Design Inconsistencies (INC)

• INC-001: Card components on SCR-001 use 12px radius, while SCR-003 cards use 8px radius.

Assumptions (ASSUM)

• ASSUM-001: Desktop sidebar collapses to overlay on tablet views based on mobile frame Auto Layout constraints. Confidence: High.

Open Questions (OQ)

• OQ-001: Interactive focus state for primary input fields is not specified in Figma design assets.

---

## Quality & Completeness Validation Checklist

Every generated specification must execute this validation checklist prior to output completion:

- [ ] **Structural Traceability**: Are all analyzed screens, frames, and components mapped with their respective Figma identifiers/Node IDs where available?
- [ ] **Fact Integrity**: Are unobserved behaviors or missing visual styles explicitly documented as `Not specified` rather than filled in using guesswork?
- [ ] **Categorization Compliance**: Are values strictly split across Extracted, Derived, Recommended, and Unknown?
- [ ] **Component Boundary Integrity**: Are complex elements decomposed into internal layout hierarchies and variants?
- [ ] **Completeness Summary Calculation**: Has a non-fabricated analysis summary been computed?

### Output Validation Block Template

```markdown
# Analysis Validation Summary

## Coverage Stats
- **Screens Analyzed**: X / X
- **Components Identified**: X / X
- **Assets Cataloged**: X / X
- **Viewport Layouts Evaluated**: X / X

## Extraction Confidence Profile
- **High Confidence (Directly Extracted)**: XX%
- **Medium Confidence (Derived Patterns)**: XX%
- **Low Confidence (Inferred / Marked Unspecified)**: XX%

## Unresolved Items
- Open Questions: X logged (`OQ-xxx`)
- Design Inconsistencies: X logged (`INC-xxx`)