julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
129 lines
3.3 KiB
Markdown
129 lines
3.3 KiB
Markdown
# 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.
|