Pf Figma Diff

Figma Design Change Tracker

Track Figma design updates and generate code checklists for PatternFly.

What This Skill Does

1. Fetches recent changes from Figma version history
2. Analyzes design updates to components
3. Compares design specs with code implementation
4. Generates three types of reports (see below)
5. Creates actionable checklists for developers

Output Files

FIGMACHANGELOG.md - Internal design team changelog with all updates RELEASENOTES.md - Consumer-facing release notes figma-updates-[date].md - Detailed checklist with token changes

See [report-templates.md](report-templates.md) for full template examples.

What to Analyze

For each component update, focus on:

• Colors - Background, border, text, hover/focus states
• Typography - Font size, weight, line height
• Spacing - Padding, gaps, margins
• Layout - Dimensions, alignment, structure
• Variants - States (hover, focus, disabled) and sizes
• Changes - Elements added or removed

Status Determination

Assign each update one of three statuses:

✅ Design-only - Figma documenting what's already in code ⚠️ Code update needed - Design is ahead of code 🔍 Needs verification - Unclear if code matches design

How to Determine Status

1. Check if there's a related GitHub issue

• Issue closed/merged → Likely ✅ Design-only
• Issue open → Likely ⚠️ Code update needed
• No issue → Check token comparison

1. Compare design tokens with code

• Values match → ✅ Design-only
• Values differ → ⚠️ Code update needed
• Can't compare → 🔍 Needs verification

1. Check recent git commits (last 2 weeks)

• Recent work on component → Possibly ✅ Design-only
• No recent work → Possibly ⚠️ Code update needed

> See [references/troubleshooting.md](references/troubleshooting.md) for detailed decision tree and automation commands.

Report Format

For Each Component Update

Include:

• Date - When the design was updated
• Designer - Who made the change
• Page/Context - Where in Figma (e.g., "Chatbot: Filters")
• Status - ✅ / ⚠️ / 🔍
• Links - Figma, PatternFly.org, GitHub issues

For Code Updates (⚠️ status only)

Create token comparison tables:

| ✓ | Token | Current | New | Where Used | |---|-------|---------|-----|------------| | [ ] | --pf-c-button--BackgroundColor | #0066CC | #004080 | Button background |

List files that need updating:

• Button.scss - Update color tokens
• Button.md - Update documentation
• Button.test.tsx - Update snapshots

Key Guidelines

Be Specific - Use exact token names and values Link Everything - Figma, PatternFly.org, GitHub Prioritize - High (breaking, a11y), Medium (updates), Low (docs) Note Context - Always include the Figma page/section

Examples

Code Update Needed:

### Button - 2026-03-16
**Status**: ⚠️ Code update needed
**By**: Sarah Designer | **Page**: Component Library

Primary button color updated for better accessibility (WCAG AA).

Token: `--pf-c-button--m-primary--BackgroundColor`
Change: `#0066CC` → `#004080`

Design-Only:

### Card - 2026-03-10
**Status**: ✅ Design-only
**Related**: Issue #915 (closed)

Figma updated to match PatternFly 6.0.0. No code changes needed.

Additional Resources

• [Report Templates](report-templates.md) - Full template examples
• [Troubleshooting](references/troubleshooting.md) - Common issues
• [Validation Checklists](references/validation-checklists.md) - Quality checks
• [Token Mappings](examples/token-mappings.json) - Figma ↔ Code mapping

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: rh-uxd
• Source: rh-uxd/ai-helpers
• License: MIT

Install and usage instructions live in the source repository linked above.