initial commit

_bmad/wds/workflows/6-asset-generation/data/figma-spec-preparation.md

@@ -0,0 +1,128 @@
+# Figma Specification Preparation
+
+Reference for analyzing code and creating specifications with OBJECT IDs for Figma export.
+
+---
+
+## 1. Analyze Code
+
+Extract component information from code to create specifications:
+
+**Component Structure:**
+- Identify component name and file location
+- Map parent/child relationships
+- Note component hierarchy
+
+**Props & States:**
+- Extract available props
+- Identify state variations (hover, active, disabled, focus, etc.)
+- Note conditional rendering logic
+
+**Visual Properties:**
+- Extract CSS classes used
+- Note inline styles
+- Identify design tokens/CSS variables referenced
+- Document colors, spacing, typography
+
+**Content:**
+- Extract text content
+- Note language variations (if i18n present)
+- Identify dynamic vs. static content
+
+**Behavior:**
+- Document event handlers
+- Note interactive elements
+- Identify navigation/routing
+
+---
+
+## 2. Generate OBJECT IDs
+
+Create OBJECT IDs following project naming conventions. Determine the pattern by analyzing existing IDs in specifications:
+
+**Pattern A - Page-based:**
+- Format: `{page}-{section}-{element}`
+- Example: `start-hero-cta`, `start-message-headline`
+- Use when: Exporting full pages or page sections
+
+**Pattern B - Component-based:**
+- Format: `{component}-{variant}-{state}`
+- Example: `btn-cta-primary-hover`, `input-text-disabled`
+- Use when: Exporting design system components
+
+**Pattern C - Hierarchical:**
+- Format: `{parent}-{child}-{grandchild}`
+- Example: `header-nav-menu-item`, `footer-social-icon-twitter`
+- Use when: Exporting component blocks with nested elements
+
+**For each component without OBJECT ID:**
+1. Identify component type and context
+2. Apply naming pattern
+3. Ensure uniqueness
+4. Add state suffix if applicable
+
+---
+
+## 3. Create Specification Document
+
+Generate a specification document with the generated OBJECT IDs.
+
+**Determine location:**
+- Design system component: `docs/D-Design-System/03-Atomic-Components/{category}/`
+- Page component: `docs/C-UX-Scenarios/{scenario}/{page}/`
+- Shared component: `docs/D-Design-System/04-Molecules/` or `05-Organisms/`
+
+**Specification structure:**
+
+```markdown
+# {Component/Page Name}
+
+**OBJECT ID**: `{primary-object-id}`
+
+## Purpose
+{Brief description from code analysis}
+
+## Structure
+- **HTML Tag**: `<{tag}>`
+- **CSS Class**: `.{class-name}`
+- **Component File**: `{file-path}`
+- **OBJECT ID**: `{object-id}`
+
+## Visual Style
+- **Typography**: {font-family}, {size}, {weight}, {color}
+- **Colors**: Background, Border, Text
+- **Spacing**: Padding, Margin
+- **Layout**: {display}, {positioning}
+
+## States
+### {State Name}
+- **OBJECT ID**: `{component-id-state}`
+- **Visual Changes**: {description}
+- **Trigger**: {user action or condition}
+
+## Behavior
+{Interactive behavior description}
+
+## Content
+- **EN**: "{english-content}"
+- **SE**: "{swedish-content}" (if applicable)
+```
+
+---
+
+## 4. Review with User
+
+Present the generated specification for approval:
+
+**Present:**
+- Location of specification document
+- Generated OBJECT IDs with descriptions
+- Naming pattern used
+- Component coverage count
+
+**User options:**
+1. **Approve and proceed** - Use these OBJECT IDs for export
+2. **Modify IDs** - Adjust naming before proceeding
+3. **Review document** - See full specification first
+
+Once approved, proceed to HTML generation with finalized OBJECT IDs.