# Figma Plugin Create

> Create a new Figma plugin project from template with proper structure, types, and build config. Generates manifest.json, package.json, tsconfig.json, esbuild config, and source templates. Use when: creating a new Figma plugin, running /figma-new command, scaffolding plugin project, or when user says create figma plugin or new plugin.

- **Type:** Skill
- **Install:** `agentstack add skill-ikusmart-claude-figma-skills-figma-plugin-create`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ikusmart](https://agentstack.voostack.com/s/ikusmart)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ikusmart](https://github.com/ikusmart)
- **Source:** https://github.com/ikusmart/claude.figma.skills/tree/main/.claude/skills/figma-plugin-create

## Install

```sh
agentstack add skill-ikusmart-claude-figma-skills-figma-plugin-create
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Create Figma Plugin Project

## Self-Documentation

When invoked WITHOUT clear input:

1. Display the Quick Help block below
2. Ask the user for the plugin name and details

When invoked WITH a plugin name or clear intent — skip help and proceed to Step 1.

## Quick Help

**What I do:** Scaffold a complete Figma plugin project with TypeScript, esbuild, and Figma API types. Ready to build and test in minutes.

**What gets created:**

```
{plugin-name}/
├── src/
│   ├── main.ts          # Plugin sandbox (Figma API access, no DOM)
│   └── ui.ts            # UI iframe (DOM access, no Figma API)
├── dist/                # Build output (gitignored)
├── manifest.json        # Figma plugin config
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript config
├── ui.html              # UI shell template
├── esbuild.config.js    # Build configuration
└── .gitignore
```

**Example prompts:**

- `Create a new Figma plugin called "Color Palette Generator"`
- `New Figma plugin for FigJam`
- `Scaffold a Figma Dev Mode plugin`

**Prerequisites:** Node.js 22+, pnpm. Run `/figma-setup` if not installed.

---

## Step 1: Gather Project Info

Ask the user these questions (one at a time):

1. **Plugin name** — human-readable name for the plugin (e.g., "Color Palette Generator")
2. **Plugin ID** — (optional) Figma-assigned ID. If not provided, leave as placeholder `"000000000000000000"`
3. **Editor type** — which Figma editors to support:
   - `figma` (default)
   - `figjam`
   - `dev` (Dev Mode)
   - Multiple selections allowed
4. **Include UI?** — whether the plugin needs a user interface (iframe)
   - Yes (default) — generates `ui.html` + `ui.ts`
   - No — plugin runs without UI

## Step 2: Create Project Structure

Use the plugin name in kebab-case as the directory name.
Create the project at `{current_working_directory}/{plugin-name}/`.

Read each template from `assets/templates/` and customize with the user's input:

```
{plugin-name}/
├── src/
│   ├── main.ts          # Plugin sandbox code
│   └── ui.ts            # UI iframe code (if UI enabled)
├── dist/                # Build output (gitignored)
├── manifest.json        # Figma plugin manifest
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── ui.html              # UI shell template (if UI enabled)
├── esbuild.config.js    # Build configuration
├── .gitignore
└── README.md
```

## Step 3: Customize Templates

### manifest.json

- Replace `{{PLUGIN_NAME}}` with the plugin name
- Replace `{{PLUGIN_ID}}` with the ID (or placeholder)
- Replace `{{EDITOR_TYPE}}` with the editor type JSON array (e.g., `["figma"]` or `["figma", "figjam"]`)
- If no UI: remove the `"ui"` field

### package.json

- Replace `{{PLUGIN_NAME_KEBAB}}` with kebab-case name
- Replace `{{PLUGIN_NAME}}` with display name

### main.ts

- If UI enabled: include `figma.showUI(__html__)` and message handler
- If no UI: include a simple plugin that runs and closes

### esbuild.config.js

- If UI enabled: include both main and ui entry points
- If no UI: include only main entry point

## Step 4: Install Dependencies

```bash
cd {plugin-name}
pnpm install
```

If pnpm is not available, fall back to `npm install`.

## Step 5: Build and Verify

```bash
pnpm build
```

Verify that:

- `dist/code.js` exists
- `dist/ui.html` exists (if UI enabled)
- No TypeScript errors
- No build errors

## Step 6: Report Success

Tell the user:

- Project created at `{path}`
- To test: Open Figma → Plugins → Development → Import plugin from manifest → select `{path}/manifest.json`
- To develop: `pnpm watch` for auto-rebuild on save
- To build: `pnpm build` for production build
- Run `/figma-build` to validate the plugin
- Run `/figma-mastery` to learn about the Plugin API architecture

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ikusmart](https://github.com/ikusmart)
- **Source:** [ikusmart/claude.figma.skills](https://github.com/ikusmart/claude.figma.skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ikusmart-claude-figma-skills-figma-plugin-create
- Seller: https://agentstack.voostack.com/s/ikusmart
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.