calctext/_bmad/wds/workflows/7-design-system/workflow-edit.md

name, description

name	description
edit-components	Open design system components in Figma for visual editing

Edit Components

Goal: Open selected components in Figma for visual editing, then sync changes back to the design system.

---

INITIALIZATION

Design Log

Read {output_folder}/_progress/00-design-log.md. Check Current and Backlog for context.

Steps

Step 1: Select Components

Present the component catalog and let the user choose what to edit:

Available components:
1. Button (4 variants)
2. Card (3 variants)
...

Select components to edit in Figma (comma-separated):

Step 2: Prepare for Figma

For each selected component:

1. Read current specification from {output_folder}/D-Design-System/components/
2. Read associated design tokens
3. Generate or update the Figma-compatible representation
4. Push to Figma via MCP integration (or provide export file)

Confirm Figma file is open and ready for editing.

Step 3: User Edits in Figma

Pause and wait for the user to make changes in Figma.

Components are open in Figma. Make your changes, then tell me when you're done.

Step 4: Sync Changes Back

When the user signals completion:

1. Read updated component data from Figma (via MCP or user export)
2. Diff against current WDS specifications
3. Present changes for approval:
   • Token values changed
   • New variants added
   • Properties modified
4. Update WDS design system files with approved changes

Step 5: Validate Sync

Run validation to ensure consistency:

• Changed tokens don't break other components
• Variants are complete
• Naming conventions maintained

Report any issues for resolution.

---

AFTER COMPLETION

1. Update design log
2. Run catalog generation to update component catalog
3. Suggest [V] View Components to verify changes
4. Return to Phase 7 Activity Menu