# figma-design

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 542 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-design-toolkit/skills/figma-design/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/figma-design

## What it 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.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/figma-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/figma-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/figma-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/figma-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace figma-design
```

2. **Manually: put the files in place**
- File: `.github/skills/figma-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-design-toolkit/skills/figma-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/figma-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill figma-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-design-toolkit/skills/figma-design/SKILL.md

## When to use it
- 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
- 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

## Similar
- [figma-prototyping](https://affpapa.org/en/nevibecode/skills/figma-prototyping.md) — skill · 548 installs
- [figma-use](https://affpapa.org/en/nevibecode/skills/figma-use.md) — skill · 36 installs
- [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · 726 installs
- [figma-generate-library](https://affpapa.org/en/nevibecode/skills/openai-figma-generate-library.md) — skill · 2700 installs
- [baoyu-design](https://affpapa.org/en/nevibecode/skills/baoyu-design.md) — skill · 6300 installs
- [figma-create-new-file](https://affpapa.org/en/nevibecode/skills/figma-figma-create-new-file.md) — skill · 3500 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 38 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md