Skip to main content
affpapa.org
RU EN
skill CX Codex

figma-design — Claude Code skill: Figma plugins and design systems

A Figma skill covering components, auto layout, variables, prototyping and plugin development. Useful when the agent writes plugin code or builds a design system.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code
Open on GitHub

What figma-design does

The skill walks through the Figma Plugin API: node hierarchy, components and instances, auto layout, constraints, variables and styles, prototype reactions. Examples are TypeScript — create a component, set layoutMode, bind a variable to a fill, apply a text style.

Plugin development gets its own section: batch operations across nodes, export to PNG, JPG and SVG, plugin data stored on nodes, comments and version history. The reference comes from Figma Plugin API docs pulled through Context7 (/figma/plugin-typings).

Variables only exist in Figma Design, so a FigJam file will not have them — worth checking before you plan a token system. Plugin work needs a build setup and @figma/plugin-typings; the skill does not install those for you.

What it helps with

  • build a component with variants and instances
  • set up auto layout with padding and stretch children
  • create variables for light and dark modes
  • write a plugin that processes many nodes at once
  • export assets as PNG, JPG or SVG

Example prompts for the agent

  • create a button component with primary and secondary variants
  • set up auto layout on the card frame: padding 24, spacing 16
  • write a plugin that renames every frame on the page

How to install figma-design

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code

2Manually: put the files in place

~/.claude/skills/figma-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about figma-design

How do I install figma-design in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code. The skill file lands at ~/.claude/skills/figma-design/SKILL.md.

What does figma-design do?

It gives the agent a Figma Plugin API reference: components, auto layout, constraints, variables, styles, prototyping and plugin development.

Which platforms can use this skill?

Besides Claude, there are install paths for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Similar skills

Everything for Design →
figma-prototyping dylantarre A skill that walks your agent through building Figma prototypes with Disney's 12 animation principles, Smart Animate and component variants. CX Codex +1 548installs figma-use official Figma This skill sets out how to use the Figma Plugin API through use_figma. It helps when an agent needs to change a Figma file or inspect its structure programmatically. CX Codex GP ChatGPT 36installs pp-figma Giuliano Giacaglia Extracts compact Figma frame payloads for AI codegen, audits comments, and detects stale components. Ideal for design token diffs and design system CI checks. CX Codex +1 726installs figma-generate-library official openai A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system. CX Codex +1 2,700installs baoyu-design JimLiu Generates UI mockups, interactive prototypes, slide decks, and design systems as self-contained HTML. Useful whenever an agent needs to produce interface layouts. CX Codex +1 6,300installs figma-create-new-file figma A skill that tells the agent how to create a Figma Design, FigJam or Slides file with the MCP create_new_file tool, including which plan and editor type to use. CX Codex +1 3,500installs

From the same set31

alembic A skill that walks your agent through Alembic migrations on SQLAlchemy projects, from alembic init to production rollout and rollback. CX Codex +1 644installs wireframing A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design. CX Codex +1 566installs expressjs-development A skill that feeds your coding agent Express.js patterns: routing, middleware, request and response handling, error handling. CX Codex +1 555installs mobile-design A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens. CX Codex +1 545installs spring-boot-development A skill that gives your coding agent a Spring Boot reference: auto-configuration, dependency injection, REST controllers, Spring Data and Spring Security. CX Codex +1 534installs rest-api-design-patterns A reference skill for designing REST APIs: resource modeling, versioning, pagination, HATEOAS and HTTP method semantics. CX Codex +1 525installs asyncio-concurrency-patterns A skill on Python concurrency: event loops, coroutines, tasks, semaphores and locks. Useful when you are writing an async service or client. CX Codex +1 489installs rust-systems-programming A skill on systems Rust: ownership, borrowing, threads, async, unsafe and performance. Useful when you write low-level code or port C/C++. CX Codex +1 485installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor