# Bmad Figma Design Analyzer

> Inspects Figma designs, extracts structured visual/interaction specifications, and outputs implementation-ready Markdown files for BMAD UX Agents.

- Skill: `karthick1827/bmad-figma-design-analyzer` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add karthick1827/bmad-figma-design-analyzer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/karthick1827/bmad-figma-design-analyzer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: karthick1827 (https://skillmd.com/u/karthick1827)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/karthick1827/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`)

```markdown
# 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
```text
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

| Variant Name | State | Background | Border | Text Color | Source Reference |
|---|---|---|---|---|---|
| Primary | Default | `#2563EB` | None | `#FFFFFF` | Node `234:568` |
| Primary | Hover | `#1D4ED8` | None | `#FFFFFF` | Node `234:569` |
| Primary | Disabled | `#E2E8F0` | None | `#94A3B8` | Node `234:570` |
| Primary | Focus | Not specified | Not specified | Not specified | Not specified |

---

## Responsive Specifications

| Element / Container | Desktop (>=1280px) | Tablet (768px - 1279px) | Mobile (<768px) |
|---|---|---|---|
| Navigation | Expanded Sidebar | Collapsed Icons | Bottom Bar / Drawer |
| Main Card Grid | 4 Columns | 2 Columns | 1 Column |

---

## Asset & Icon Inventory

### Visual Assets
| Asset ID | Type | Node ID | Original Dimensions | Usage | Recommended Action |
|---|---|---|---|---|---|
| AST-001 | Vector SVG | `101:202` | 24x24px | Search Icon | Export SVG / Map to Lucide Icon `Search` |

---

## 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`)
```