Search everything...

Stats

Actions

Available In

Help us improve

Share bugs, ideas, or general feedback.

skills-for-figma - Claude Code Plugin | ClaudePluginHub

Plugin

skills-for-figma

Name: skills-for-figma
Author: southleft

By southleft

18 skills for the native Figma MCP: export/import design tokens, manage variables, analyze and document component sets, lint for WCAG and design-system compliance, audit accessibility, and author Slides and FigJam content.

npx claudepluginhub southleft/skills-for-figma --plugin skills-for-figma

Popularity

Stars

Above avg

Med: 0·Avg: 268

Installs

Med: 0·Avg: 1

What's Inside

Skills18

analyze-component-set-figma

/analyze-component-set-figma

Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma variants', 'what changes between the hover and default state', 'map Figma variants to component props', 'extract the state machine for this component'. Resolves bound variables to token names. NOT covered by the native MCP's get_design_context/get_metadata, which don't give you a variant-axis→CSS-state machine.

annotations-figma

/annotations-figma

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached directly to a node. Triggers: 'add an annotation', 'annotate this node/component', 'read the annotations on…', 'what specs are pinned to this element', 'list annotation categories', 'document the focus behavior on this button in Figma'. Annotations are distinct from comments (they pin to design properties) and from the description field. Requires the Figma Desktop app (Plugin API).

arrange-component-set-figma

/arrange-component-set-figma

Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.

audit-accessibility-figma

/audit-accessibility-figma

Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use when the user wants to vet ONE component before shipping it: triggers 'audit this component', 'accessibility score for this button', 'is this component set accessible', 'check the states on this component', 'does my button have a focus state', 'color blind check', 'rate this component for a11y', 'component accessibility scorecard'. Works on ANY Figma plan. For a broad sweep over a whole page/frame use lint-design-figma; for CODE-side (HTML) checks use scan-code-accessibility-figma.

build-slides-figma

/build-slides-figma

Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder slides', 'set the slide background', 'add a transition between slides', 'add text/shape to slide 3', 'read what's on this slide', 'skip this slide in the presentation'. Figma Slides files only (figma.editorType === 'slides'). Requires the Figma Desktop app (Plugin API).

Stats

Version1.0.0

LanguageJavaScript

Stars1

MaintenanceGood

LicenseMIT

Last CommitJun 1, 2026

AddedJun 2, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge.

Available In

skills-for-figma1

Help us improve

Share bugs, ideas, or general feedback.

README

Skills for Figma

A collection of open-source agent skills for the native Figma MCP server. Each skill teaches an agent (Claude, Codex, Gemini, Copilot) to perform a focused design-systems task in Figma — exporting and importing design tokens, analyzing component sets, linting for WCAG and design-system compliance, auditing accessibility, building Slides and FigJam content, and more.

Every skill runs through the Figma MCP's use_figma tool (Plugin API execution) and requires no plan-gated APIs — token reads use the Plugin API, so they work on any Figma plan.

These skills are a Figma-MCP-focused subset of southleft/figma-console-mcp-skills, repackaged here with community-friendly names. The full collection (including REST-API-based version history, changelog, blame, and comments skills) lives in that repository.

Requirements

An agent host with the Figma MCP server connected (e.g. Claude Code, Claude Desktop, Codex, Gemini).
The official figma-use skill, which teaches the use_figma Plugin API conventions. Every skill here loads it first.

Install

npx — any agent (Claude Code, Codex, Cursor, Gemini CLI, …)

npx skills add southleft/skills-for-figma          # install all skills
npx skills add southleft/skills-for-figma --list   # preview without installing
npx skills add southleft/skills-for-figma --skill export-tokens-figma   # just one

Claude Code plugin (one command)

/plugin marketplace add southleft/skills-for-figma
/plugin install skills-for-figma@skills-for-figma

Manual (any host)

git clone https://github.com/southleft/skills-for-figma.git
cd skills-for-figma
cp -R skills/* ~/.claude/skills/

For other hosts, drop the folders from skills/ into that tool's skills directory (e.g. .codex/skills/, .gemini/skills/). Once installed, an agent auto-selects a skill from your request, or you can invoke one explicitly with /skill-name.

Skills

Tokens & variables

export-tokens-figma — Export Figma variables to DTCG, CSS custom properties, Tailwind, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio, with multi-mode and alias resolution.
import-tokens-figma — Create and update Figma variables from DTCG token files, with multi-mode values, alias resolution, and non-destructive in-place matching.
setup-design-tokens-figma — Bootstrap a complete token system (a collection, its modes, and all variables with per-mode values) in one atomic operation.
manage-variables-figma — Create, update, rename, and delete variables, collections, and modes, including batch create/update.
library-variables-figma — Discover variables available from subscribed team libraries and import them into the current file by key.

Components

analyze-component-set-figma — Analyze a component set as a variant state machine, mapping variant properties to CSS pseudo-classes and reporting per-variant visual differences.
arrange-component-set-figma — Arrange a component set's variants into a labeled grid on the canvas.
component-properties-figma — Define a component's property API and instantiate the component with property values applied.
deep-component-figma — Walk a component to unlimited depth and return its full node tree with resolved token bindings, main-component references, and reactions.
generate-component-doc-figma — Generate Markdown documentation for a Figma component, covering anatomy, tokens, states, accessibility, and design-to-code parity.
design-system-inventory-figma — Extract a unified inventory of a file's variables, components, and styles with resolved visual specifications.

Quality & accessibility

lint-design-figma — Lint a node tree against WCAG 2.2 and design-system rules, flagging contrast failures, hardcoded colors and styles, and detached components.
audit-accessibility-figma — Produce a per-component accessibility scorecard covering interaction-state coverage, focus indicators, target size, and color-blind simulation.
scan-code-accessibility-figma — Run axe-core against HTML in a JSDOM environment and map violations back to the originating Figma design.
check-design-parity-figma — Compare a Figma design node against a code specification and report drift as scored discrepancies by severity.

View full README on GitHub

Similar Plugins

ecc

213.3k·2.4K·

Harness-native ECC plugin for engineering teams - 64 agents, 262 skills, 84 legacy command shims, reusable hooks, rules, MCP conventions, and operator workflows for Claude Code plus adjacent agent harnesses

today

v2.0.0

affaan-m

fullstack-dev-skills

9.3k·409·

Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.

v0.4.15

Jeffallan

reverse-engineering

35.6k·239·

Binary reverse engineering, malware analysis, firmware security, and software protection research for authorized security research, CTF competitions, and defensive security

2mo

v1.0.0

wshobson

nature-skills

18.6k·67·

A growing collection of Claude-compatible academic workflow bundles for producing work at Nature-journal standard. Covers scientific figures (nature-figure), manuscript prose polishing (nature-polishing), manuscript drafting and methods writing (nature-writing), reviewer-style pre-submission assessment (nature-reviewer), citation retrieval and export (nature-citation), data availability statements and FAIR metadata (nature-data), paper-to-PPTX presentation conversion (nature-paper2ppt), literature search via MCP (nature-academic-search), paper reading and annotation (nature-reader), and peer-review response drafting (nature-response). Future releases planned: statistical reporting, cover letters, and review articles. Rules are derived from primary sources, including published Nature papers, journal author guidelines, and structured writing curricula.

v1.0.0

Yuan1z0825

nextjs-expert

2.9k·60·

Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns

5mo

v1.0.0

davepoon

dotnet-skills

32·49·

Comprehensive .NET development skills for modern C#, ASP.NET, MAUI, Blazor, Aspire, EF Core, Native AOT, testing, security, performance optimization, CI/CD, and cloud-native applications

3mo

v2.0.0

wshaddix

Help us improve

Find plugins for your project

Help us improve

skills-for-figma

Popularity

What's Inside

Help us improve

Health & Quality

Confidence

README

Skills for Figma

Requirements

Install

npx — any agent (Claude Code, Codex, Cursor, Gemini CLI, …)

Claude Code plugin (one command)

Manual (any host)

Skills

Tokens & variables

Components

Quality & accessibility

Similar Plugins

ecc

fullstack-dev-skills

reverse-engineering

nature-skills

nextjs-expert

dotnet-skills

More by southleft

figma-console-mcp-skills

Skills for Figma

Requirements

Install

npx — any agent (Claude Code, Codex, Cursor, Gemini CLI, …)

Claude Code plugin (one command)

Manual (any host)

Skills

Tokens & variables

Components

Quality & accessibility