skills.rest
patternfly
patternflyOFFICIAL
Explore all skills by this author →
Website𝕏@patternflyGitHub

figma-changes

Identify Figma design changes and generate code update checklists.

10|26|Updated Jul 8, 2025
Search Tags:#figma#reporting#design-sync#design-changes#code-checklist#token-comparison
One-click install
npx skills add https://github.com/patternfly/ai-helpers --skill figma-changes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-changes
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/figma/skills/figma-changes
Command: npx skills add https://github.com/patternfly/ai-helpers --skill figma-changes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, bash, curl, jq, gh, and includes scripts (resource) and references (resource) components.

What problem does it solve?

The Skill helps teams quickly translate Figma design updates into actionable developer work by producing structured reports and checklists.

Core Features & Use Cases

  • Fetches Figma version history and identifies component changes.
  • Compares design specs with code tokens and generates executive and developer-facing reports.
  • Outputs artifacts such as FIGMA_CHANGELOG.md, RELEASE_NOTES.md, and detailed checklists for code updates.

Quick Start

Provide a Figma file URL and a time window to start tracking changes and generating update checklists.

Frequently Asked Questions about figma-changes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I track Figma design changes and generate a code update checklist?▼

To track Figma design changes and generate a code update checklist, provide a Figma file URL and a time window. The tool reads Figma version history via the API and outputs structured developer reports like FIGMA_CHANGELOG.md.

How do I compare Figma design specs with my code tokens?▼

You can compare Figma design specs with code tokens by analyzing token differences via the API. The tool identifies component changes and produces detailed checklists with optional token-mapping for PatternFly projects.

Do I need bash and jq to compare Figma design tokens with my code?▼

Yes, you need bash and jq installed. Comparing Figma design tokens requires a bash environment with node, curl, jq, and gh dependencies to fetch version history and generate developer-facing reports.

Can I generate GitHub issues from Figma version history automatically?▼

Yes, the tool correlates Figma version history with GitHub issues. It uses the gh CLI dependency to map identified design changes to developer work, outputting structured checklists and release notes.

What is the best way to report PatternFly component updates from Figma to developers?▼

The best way to report PatternFly component updates is to generate executive and developer-facing reports. The tool analyzes Figma API version history and outputs artifacts like RELEASE_NOTES.md and detailed code update checklists.

Does this tool work with Figma files outside of PatternFly projects?▼

While it reads standard Figma file version history via the API, the token comparison and reporting features are specifically tailored for PatternFly projects to produce accurate developer-ready checklists.

Related Skills

Explore More Design & Creative Skills→
guichefferguicheffer
3

figma-image-downloader

Download PNG screenshots of all FRAME nodes from Figma files.

Community
Intermediate
wadvancedwadvanced
11

improve-issue

Enrich GitHub issues into implementation-ready specifications for Elixir/Phoenix/Ash codebases.

Official
Advanced
elsolalelsolal
1

figma-implement-design

Translate Figma designs into UI components and code with design tokens.

Community
Advanced
mrgreenishmrgreenish

figma-to-code-design-system

Sync Figma design tokens into DTCG tokens.json and regenerate CSS, Tailwind, or SCSS outputs.

Community
Advanced