figma-changes

分类: 开发与编程 | 上传者: patternfly | 下载: 0 | 版本: v1.0（最新）

识别 Figma 设计变更并生成代码更新清单。当用户要求“检查Figma更新”、“跟踪设计变更”、“Figma中发生了什么变化”、“从Figma创建变更日志”或“基于Figma哪些代码需要更新”时使用。

更新日志: Source: GitHub https://github.com/patternfly/ai-helpers

目录结构

当前层级: tree/main/plugins/pf-figma/skills/figma-changes/

📁 examples/
- 📄 .figma-sync-cache.json 4.5 KB
- 📄 sample-output.md 6.8 KB
- 📄 token-mappings.json 4.4 KB
📁 references/
- 📄 figma-api-guide.md 4.5 KB
- 📄 template-changelog.md 870 B
- 📄 template-detailed-report.md 1.0 KB
- 📄 template-release-notes.md 725 B
- 📄 troubleshooting.md 8.8 KB
- 📄 validation-checklists.md 7.2 KB
📁 scripts/
- 📄 compare-tokens.js 7.4 KB
- 📄 compare-tokens.sh 3.5 KB
- 📄 extract-figma-file-key.sh 508 B
- 📄 figma-sync.sh 9.3 KB
📄 README.md 7.0 KB
📄 report-templates.md 3.7 KB
📄 SKILL.md 3.9 KB

SKILL.md

---
name: figma-changes
description: Identify Figma design changes and generate code update checklists. Use when the user asks to "check Figma updates", "track design changes", "what changed in Figma", "create changelog from Figma", or "what code needs updating based on Figma".
version: 3.1.0
---

# 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

**FIGMA_CHANGELOG.md** - Internal design team changelog with all updates
**RELEASE_NOTES.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

2. Compare design tokens with code
   - Values match → ✅ Design-only
   - Values differ → ⚠️ Code update needed
   - Can't compare → 🔍 Needs verification

3. 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

登录后下载/点赞/收藏 ❤ 7 | ★ 0

figma-changes

目录结构

SKILL.md

举报内容

提示