Initial commit
This commit is contained in:
Zhongwei Li
345
skills/qa-test-planner/references/figma_validation.md
Normal file
345
skills/qa-test-planner/references/figma_validation.md
Normal file
@@ -0,0 +1,345 @@
|
||||
# Figma Design Validation with MCP
|
||||
|
||||
Guide for validating UI implementation against Figma designs using Figma MCP.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
**Required:**
|
||||
- Figma MCP server configured
|
||||
- Access to Figma design files
|
||||
- Figma URLs for components/pages
|
||||
|
||||
**Setup:**
|
||||
```bash
|
||||
# Install Figma MCP (follow official docs)
|
||||
# Configure API token
|
||||
# Verify access to design files
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Validation Workflow
|
||||
|
||||
### Step 1: Get Design Specifications
|
||||
|
||||
**Using Figma MCP:**
|
||||
```
|
||||
"Get the specifications for the primary button from Figma file at [URL]"
|
||||
|
||||
Response includes:
|
||||
- Dimensions (width, height)
|
||||
- Colors (background, text, border)
|
||||
- Typography (font, size, weight)
|
||||
- Spacing (padding, margin)
|
||||
- Border radius
|
||||
- States (default, hover, active, disabled)
|
||||
```
|
||||
|
||||
### Step 2: Inspect Implementation
|
||||
|
||||
**Browser DevTools:**
|
||||
1. Inspect element
|
||||
2. Check computed styles
|
||||
3. Verify dimensions
|
||||
4. Compare colors (use color picker)
|
||||
5. Check typography
|
||||
6. Test interactive states
|
||||
|
||||
### Step 3: Document Discrepancies
|
||||
|
||||
**Create test case or bug:**
|
||||
```
|
||||
TC-UI-001: Primary Button Visual Validation
|
||||
|
||||
Design (Figma):
|
||||
- Size: 120x40px
|
||||
- Background: #0066FF
|
||||
- Border-radius: 8px
|
||||
- Font: 16px Medium #FFFFFF
|
||||
|
||||
Implementation:
|
||||
- Size: 120x40px ✓
|
||||
- Background: #0052CC ✗ (wrong shade)
|
||||
- Border-radius: 8px ✓
|
||||
- Font: 16px Regular #FFFFFF ✗ (wrong weight)
|
||||
|
||||
Status: FAIL
|
||||
Bugs: BUG-234, BUG-235
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What to Validate
|
||||
|
||||
### Layout & Spacing
|
||||
- [ ] Component dimensions
|
||||
- [ ] Padding (all sides)
|
||||
- [ ] Margins
|
||||
- [ ] Grid alignment
|
||||
- [ ] Responsive breakpoints
|
||||
- [ ] Container max-width
|
||||
|
||||
**Example Query:**
|
||||
```
|
||||
"Extract spacing values for the card component from Figma"
|
||||
```
|
||||
|
||||
### Typography
|
||||
- [ ] Font family
|
||||
- [ ] Font size
|
||||
- [ ] Font weight
|
||||
- [ ] Line height
|
||||
- [ ] Letter spacing
|
||||
- [ ] Text color
|
||||
- [ ] Text alignment
|
||||
|
||||
**Example Query:**
|
||||
```
|
||||
"Get typography specifications for all heading levels from Figma design system"
|
||||
```
|
||||
|
||||
### Colors
|
||||
- [ ] Background colors
|
||||
- [ ] Text colors
|
||||
- [ ] Border colors
|
||||
- [ ] Shadow colors
|
||||
- [ ] Gradient values
|
||||
- [ ] Opacity values
|
||||
|
||||
**Example Query:**
|
||||
```
|
||||
"List all color tokens used in the navigation component"
|
||||
```
|
||||
|
||||
### Components
|
||||
- [ ] Icon sizes and colors
|
||||
- [ ] Button states
|
||||
- [ ] Input field styling
|
||||
- [ ] Checkbox/radio appearance
|
||||
- [ ] Dropdown styling
|
||||
- [ ] Card components
|
||||
|
||||
**Example Query:**
|
||||
```
|
||||
"Compare the implemented dropdown menu with Figma design at [URL]"
|
||||
```
|
||||
|
||||
### Interactive States
|
||||
- [ ] Default state
|
||||
- [ ] Hover state
|
||||
- [ ] Active/pressed state
|
||||
- [ ] Focus state
|
||||
- [ ] Disabled state
|
||||
- [ ] Loading state
|
||||
- [ ] Error state
|
||||
|
||||
---
|
||||
|
||||
## Common Discrepancies
|
||||
|
||||
### Typography Mismatches
|
||||
- Wrong font weight (e.g., Regular instead of Medium)
|
||||
- Incorrect font size
|
||||
- Missing line-height
|
||||
- Color hex codes off by a shade
|
||||
|
||||
### Spacing Issues
|
||||
- Padding not matching
|
||||
- Inconsistent margins
|
||||
- Grid misalignment
|
||||
- Component spacing varies
|
||||
|
||||
### Color Differences
|
||||
- Hex values off (#0066FF vs #0052CC)
|
||||
- Opacity not applied
|
||||
- Gradient angles wrong
|
||||
- Shadow colors incorrect
|
||||
|
||||
### Responsive Behavior
|
||||
- Breakpoints don't match
|
||||
- Mobile layout different
|
||||
- Tablet view inconsistent
|
||||
- Scaling not as designed
|
||||
|
||||
---
|
||||
|
||||
## Test Case Template
|
||||
|
||||
```markdown
|
||||
## TC-UI-XXX: [Component] Visual Validation
|
||||
|
||||
**Figma Design:** [URL to specific component]
|
||||
|
||||
### Desktop (1920x1080)
|
||||
|
||||
**Layout:**
|
||||
- [ ] Width: XXXpx
|
||||
- [ ] Height: XXXpx
|
||||
- [ ] Padding: XXpx XXpx XXpx XXpx
|
||||
- [ ] Margin: XXpx
|
||||
|
||||
**Typography:**
|
||||
- [ ] Font: [Family] [Weight]
|
||||
- [ ] Size: XXpx
|
||||
- [ ] Line-height: XXpx
|
||||
- [ ] Color: #XXXXXX
|
||||
|
||||
**Colors:**
|
||||
- [ ] Background: #XXXXXX
|
||||
- [ ] Border: Xpx solid #XXXXXX
|
||||
- [ ] Shadow: XXpx XXpx XXpx rgba(X,X,X,X)
|
||||
|
||||
**Interactive States:**
|
||||
- [ ] Hover: [changes]
|
||||
- [ ] Active: [changes]
|
||||
- [ ] Focus: [changes]
|
||||
- [ ] Disabled: [changes]
|
||||
|
||||
### Tablet (768px)
|
||||
- [ ] [Responsive changes]
|
||||
|
||||
### Mobile (375px)
|
||||
- [ ] [Responsive changes]
|
||||
|
||||
### Status
|
||||
- [ ] PASS - All match
|
||||
- [ ] FAIL - Discrepancies found
|
||||
- [ ] BLOCKED - Design incomplete
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Figma MCP Queries
|
||||
|
||||
### Component Specifications
|
||||
```
|
||||
"Get complete specifications for the [component name] from Figma at [URL]"
|
||||
"Extract all button variants from the design system"
|
||||
"List typography styles defined in Figma"
|
||||
```
|
||||
|
||||
### Color System
|
||||
```
|
||||
"Show me all color tokens in the Figma design system"
|
||||
"What colors are used in the navigation bar design?"
|
||||
"Get the exact hex values for primary, secondary, and accent colors"
|
||||
```
|
||||
|
||||
### Spacing & Layout
|
||||
```
|
||||
"What are the padding values for the card component?"
|
||||
"Extract grid specifications from the page layout"
|
||||
"Get spacing tokens (8px, 16px, 24px, etc.)"
|
||||
```
|
||||
|
||||
### Responsive Breakpoints
|
||||
```
|
||||
"What are the defined breakpoints in this Figma design?"
|
||||
"Show mobile vs desktop layout differences for [component]"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bug Report for UI Discrepancies
|
||||
|
||||
```markdown
|
||||
# BUG-XXX: [Component] doesn't match Figma design
|
||||
|
||||
**Severity:** Medium (UI)
|
||||
**Type:** Visual
|
||||
|
||||
## Design vs Implementation
|
||||
|
||||
**Figma Design:** [URL]
|
||||
|
||||
**Expected (from Figma):**
|
||||
- Button background: #0066FF
|
||||
- Font weight: 600 (Semi-bold)
|
||||
- Padding: 12px 24px
|
||||
|
||||
**Actual (in implementation):**
|
||||
- Button background: #0052CC ❌
|
||||
- Font weight: 400 (Regular) ❌
|
||||
- Padding: 12px 24px ✓
|
||||
|
||||
## Screenshots
|
||||
|
||||
- Figma design: [attach]
|
||||
- Current implementation: [attach]
|
||||
- Side-by-side comparison: [attach]
|
||||
|
||||
## Impact
|
||||
|
||||
Users see inconsistent branding. Button appears less prominent than designed.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Automation Ideas
|
||||
|
||||
### Visual Regression Testing
|
||||
- Capture screenshots
|
||||
- Compare against Figma exports
|
||||
- Highlight pixel differences
|
||||
- Tools: Percy, Chromatic, BackstopJS
|
||||
|
||||
### Design Token Validation
|
||||
- Extract Figma design tokens
|
||||
- Compare with CSS variables
|
||||
- Flag mismatches
|
||||
- Automate with scripts
|
||||
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
|
||||
**DO:**
|
||||
- ✅ Always reference specific Figma URLs
|
||||
- ✅ Test all component states
|
||||
- ✅ Check responsive breakpoints
|
||||
- ✅ Document exact values (not "close enough")
|
||||
- ✅ Screenshot both design and implementation
|
||||
- ✅ Test in multiple browsers
|
||||
|
||||
**DON'T:**
|
||||
- ❌ Assume "it looks right"
|
||||
- ❌ Skip hover/active states
|
||||
- ❌ Ignore small color differences
|
||||
- ❌ Test only on one screen size
|
||||
- ❌ Forget to check typography
|
||||
- ❌ Miss spacing issues
|
||||
|
||||
---
|
||||
|
||||
## Checklist for UI Test Cases
|
||||
|
||||
Per component:
|
||||
- [ ] Figma URL documented
|
||||
- [ ] Desktop layout validated
|
||||
- [ ] Mobile/tablet responsive checked
|
||||
- [ ] All interactive states tested
|
||||
- [ ] Colors match exactly (use color picker)
|
||||
- [ ] Typography specifications correct
|
||||
- [ ] Spacing (padding/margins) accurate
|
||||
- [ ] Icons match design
|
||||
- [ ] Shadows/borders match
|
||||
- [ ] Animations match timing/easing
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
| Element | What to Check | Tool |
|
||||
|---------|---------------|------|
|
||||
| Colors | Hex values exact | Browser color picker |
|
||||
| Spacing | Padding/margin px | DevTools computed styles |
|
||||
| Typography | Font, size, weight | DevTools font panel |
|
||||
| Layout | Width, height, position | DevTools box model |
|
||||
| States | Hover, active, focus | Manual interaction |
|
||||
| Responsive | Breakpoint behavior | DevTools device mode |
|
||||
|
||||
---
|
||||
|
||||
**Remember:** Pixel-perfect implementation builds user trust and brand consistency.
|
||||
Reference in New Issue
Block a user