4.5 KiB

Raw Blame History

Figma

Category: Design Tool
Purpose: Visual design refinement and design system documentation
Website: https://figma.com

What It Is

Figma is a collaborative design tool used in WDS for visual design refinement when prototypes need polish. It's where designers refine components extracted from HTML prototypes and define design tokens.

Why WDS Recommends It

Visual Design Refinement:

Polish components extracted from prototypes
Define design tokens (colors, spacing, typography)
Create component variants and states
Document design decisions

Collaboration:

Real-time collaboration with team
Share designs with stakeholders
Comment and feedback system
Version history

WDS Integration:

MCP server integration for component injection
Bidirectional sync with design system
Page structure mirrors WDS specifications
Component traceability via Object IDs

Setup Instructions

1. Account Creation

Go to https://figma.com
Sign up for free account
Install desktop app (recommended) or use web version

2. WDS Project Setup

Create Figma file structure:

[Project Name] Design Refinement
├── 01-Customer-Onboarding/
│   ├── 1.1-Start-Page
│   ├── 1.2-Sign-In
│   └── 1.3-Sign-Up
├── 02-Product-Catalog/
│   ├── 2.1-Product-List
│   └── 2.2-Product-Detail
└── Components/
    ├── Buttons
    ├── Inputs
    └── Cards

3. Design Tokens Setup

Create Figma variables:

Colors:

Collection: Colors
├── primary/50
├── primary/600
├── primary/700
├── neutral/50
└── neutral/900

Spacing:

Collection: Spacing
├── xs = 4px
├── sm = 8px
├── md = 16px
└── lg = 24px

Typography:

Styles: Typography
├── Heading/1
├── Heading/2
├── Body/Regular
└── Body/Bold

WDS Best Practices

DO ✅

1. Match WDS Structure

Page names: [Scenario-Number]-[Scenario-Name] / [Page-Number]-[Page-Name]
Example: 01-Customer-Onboarding / 1.2-Sign-In
Mirrors docs/C-Scenarios/ structure

2. Preserve Object IDs

Include Object IDs in layer names
Example: Layer name "btn-login-submit"
Maintains traceability to code

3. Use Design Tokens

Always use variables for colors
Use variables for spacing
Apply text styles consistently
Don't hardcode values

4. Document Decisions

Add descriptions to components
Document when to use each variant
Note accessibility requirements
Include usage examples

DON'T ❌

1. Don't Diverge from Specs

If design changes, update specification
Keep Figma and specs in sync
Notify team of design evolution

2. Don't Skip Component Documentation

Always add WDS component ID
Document variants and states
Include usage guidelines

3. Don't Hardcode Values

Use variables, not hex colors
Use spacing variables
Apply text styles

WDS-Specific Workflows

Receiving Components from Freya

Freya injects components via MCP server
Components appear in designated page
Layer names include Object IDs
Basic styling applied

Refining Components

Apply design tokens (colors, spacing, typography)
Create component variants (primary, secondary, etc.)
Define states (default, hover, active, disabled)
Add visual polish (shadows, borders, effects)
Document in component description

Sending Back to WDS

Notify Freya when refinement complete
Freya reads components via MCP server
Design tokens extracted automatically
Design system updated
Prototype re-rendered with refined design

Keyboard Shortcuts

Essential for WDS:

Action	Shortcut
Frame	F
Component	Ctrl/Cmd+Alt+K
Text	T
Rectangle	R
Duplicate	Ctrl/Cmd+D
Group	Ctrl/Cmd+G
Auto Layout	Shift+A
Copy Properties	Ctrl/Cmd+Alt+C
Paste Properties	Ctrl/Cmd+Alt+V

Troubleshooting

Issue: Components not syncing with WDS

Solution:

Check Object IDs in layer names
Verify Figma file ID in project config
Ensure MCP server configured
Check Figma API access token

Resources

Help Center: https://help.figma.com
Community: https://forum.figma.com
API Documentation: https://www.figma.com/developers/api

Related WDS Documentation:

Figma MCP - Automated integration
Figma Designer Guide: workflows/5-design-system/figma-integration/figma-designer-guide.md

← Back to Tools

4.5 KiB Raw Blame History