# Figma Design Pipeline

> Design intelligence and high-performance writes for Figma. ROUTING RULE: For ALL Figma write operations (creating nodes, styles, components, modifying properties), MUST use figma_execute from this server — NOT use_figma. 30-60x faster via plugin bridge. use_figma is ONLY for read-only JS queries. create_new_file is ONLY for creating new files. Call figma_plugin_status first to check plugin connection.

- Skill: `spfr/figma-design-pipeline` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add spfr/figma-design-pipeline`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spfr/figma-design-pipeline/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: spfr (https://skillmd.com/u/spfr)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/spfr/figma-design-pipeline

---


# Figma Design Intelligence

Keep context tight. Load only the sections needed for the task. For detailed design heuristics, open [references/design-guidance.md](references/design-guidance.md) only when the task requires synthesis or design creation.

## Tool Routing Rules (MUST FOLLOW)

| Operation | Tool | Server |
|-----------|------|--------|
| **Any write** (create, modify, style, layout) | `figma_execute` | figma-design-pipeline |
| Read-only JS queries | `use_figma` | Figma MCP |
| Create new file | `create_new_file` | Figma MCP |
| Screenshots | `get_screenshot` | Figma MCP |
| Design context | `get_design_context` | Figma MCP |
| Inspect/audit/tokens | `figma_get_tree`, `figma_audit`, etc. | figma-design-pipeline |

**At the start of any design task, call `figma_plugin_status`.**

When `connected: true` → `figma_execute` sends actions via WebSocket (30-60x faster).
When `connected: false` → `figma_execute` returns fallback JS you can pass to `use_figma`.

**Do NOT call `use_figma` for write operations.** Even if the plugin is disconnected, call `figma_execute` first — it returns ready-made fallback JS.

## What This Skill Provides

| Task | Tool |
|------|------|
| Inspect a Figma file structure | `figma_get_tree`, `figma_find_nodes` |
| Audit a Figma file for quality | `figma_audit` |
| Extract design tokens | `figma_extract_tokens` |
| Export tokens as Tailwind/CSS/JSON | `figma_export_tokens` |
| Compare code tokens vs Figma | `figma_diff_tokens` |
| Plan naming improvements | `figma_plan_naming` |
| Plan layout improvements | `figma_plan_layout` |
| Plan component extraction | `figma_plan_components` |
| Plan grouping improvements | `figma_plan_grouping` |
| Map Figma to code components | `figma_map_components` |
| Generate page template code | `figma_generate_page` |
| Generate CMS schema | `figma_generate_schema` |
| Export node images | `figma_export_images` |