# Figma Inspect

> Read-only inspection and analysis of Figma designs — view structure, extract design tokens, take screenshots, get full design context. Use when: user says inspect design, show tokens, what's in this Figma file, show me the design, analyze Figma, extract colors, or wants to understand a Figma file before implementing.

- **Type:** Skill
- **Install:** `agentstack add skill-ikusmart-claude-figma-skills-figma-inspect`
- **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-inspect

## Install

```sh
agentstack add skill-ikusmart-claude-figma-skills-figma-inspect
```

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

## About

# Inspect Figma Design

## Self-Documentation

When invoked WITHOUT a Figma URL or clear input:

1. Display the Quick Help block below
2. Ask the user for a Figma URL and what they want to inspect

When invoked WITH a Figma URL — skip help and proceed to Step 1.

## Quick Help

**What I do:** Read-only inspection of Figma designs. View structure, extract tokens, take screenshots, analyze design context — all without modifying anything. Perfect for understanding a design before implementing it.

**4 modes:**

| Mode | What you get | Best for |
|------|-------------|----------|
| **Overview** | Structure tree + screenshot | Quick look at what's in the file |
| **Tokens** | Colors, typography, spacing variables | Setting up design tokens in code |
| **Full Context** | Complete layout, styling, component data | Detailed analysis before implementing |
| **Screenshot** | High-res visual of any node | Visual reference or documentation |

**Example prompts:**
- `Inspect this design: https://figma.com/design/abc/App?node-id=1-5`
- `Show me the design tokens from: [URL]`
- `Take a screenshot of this Figma frame: [URL]`
- `What's the structure of this Figma page? [URL]`

**Prerequisites:**
- Figma MCP server configured (Official Remote or Desktop). Run `/figma-setup` if not.

---

## Step 1: Parse Figma URL

Extract `fileKey` and `nodeId` from the URL:
- `figma.com/design/:fileKey/:fileName?node-id=:nodeId` — convert `-` to `:` in nodeId
- `figma.com/design/:fileKey/branch/:branchKey/:fileName` — use branchKey as fileKey

## Step 2: Choose Mode

If the user's intent is clear, auto-select the mode. Otherwise ask:

- **Overview** — "I want to see what's in this file"
- **Tokens** — "I want design tokens / colors / typography"
- **Full Context** — "I want the complete design data"
- **Screenshot** — "I just need a visual"

## Step 3: Fetch Data

### Mode: Overview

1. Call `get_metadata(fileKey, nodeId)` — returns node structure in XML format
2. Call `get_screenshot(fileKey, nodeId)` — visual snapshot
3. Present: tree structure + screenshot + summary (frame count, component count, types)

### Mode: Tokens

1. Call `get_variable_defs(fileKey, nodeId)` — returns variable definitions
2. Present organized tables:
   - **Colors:** name → hex value
   - **Typography:** name → font, size, weight, line-height
   - **Spacing:** name → value
   - **Effects:** name → shadow/blur definition

### Mode: Full Context

1. Call `get_design_context(fileKey, nodeId)` — complete layout, styling, component data
2. Call `get_screenshot(fileKey, nodeId)` — visual reference
3. Present: code representation + screenshot + component list + style summary

### Mode: Screenshot

1. Call `get_screenshot(fileKey, nodeId)` — visual screenshot
2. Present the screenshot with basic info (node name, dimensions)

## Step 4: Suggest Next Steps

Based on what was inspected, suggest:

- `/figma-implement [URL]` — to turn this design into code
- `/figma-connect [URL]` — to map components to existing code
- `/figma-rules` — to generate design system rules from these tokens
- `/figma-optimize [URL]` — if the file is large and context-heavy

## 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-inspect
- 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%.