alvinindra/figma-mcp-rust/read-design-strategy

Claude Code and agent skill by alvinindra/figma-mcp-rust

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

Token-efficient reading of Figma files with the figma-mcp-rust tools. Use before inspecting any Figma design through this server, when choosing get_design_context detail levels, deduplicating repeated component instances, or drilling into nodes without dumping entire trees.

Install

npx vskill@latest install alvinindra/figma-mcp-rust/read-design-strategy

SKILL.md

To effectively read a Figma design with figma-mcp-rust:

  1. Start with get_metadata to understand file name, pages, and current page
  2. Use get_pages to list all pages without loading their full trees
  3. Use get_design_context (depth=2, detail=compact) for a token-efficient summary of the current selection or page
  • detail=minimal: id/name/type/bounds only (~5% tokens)
  • detail=compact: + fills/strokes/opacity (~30% tokens)
  • detail=full: everything, default (100% tokens)
  • dedupe_components=true: INSTANCE nodes are collapsed to compact stubs (mainComponentId + componentProperties overrides);

unique component structures are collected once in a top-level componentDefs map. Use this whenever the screen contains repeated component instances (e.g. card lists, table rows, nav items). Typical savings: 5-10x fewer tokens vs full serialization of repeated instances.

  1. For screens with many repeated components, the recommended reading flow is:

a. get_design_context(depth=2, detail=minimal, dedupe_components=true) to see the instance layout and component IDs b. Inspect componentDefs in the response: one definition per unique component, not one per instance c. Read componentProperties on each instance stub for variant selections, text overrides, and boolean toggles d. Drill into specific instances with get_node only when an instance has unique overrides you need to inspect

  1. Use search_nodes to find nodes by name or type without dumping the entire tree
  2. Drill into specific nodes with get_node or get_nodes_info (prefer batch over single calls)
  3. For text-heavy components, use scan_text_nodes to collect all copy at once
  4. Use scan_nodes_by_types to find all FRAME/COMPONENT/INSTANCE nodes in a subtree
  5. Call get_styles and get_variable_defs once per session to understand the design system
  6. Call get_fonts to understand typography usage across the page at a glance
  7. Use get_viewport to see what the user is currently looking at in the canvas
  8. Use get_reactions to inspect prototype interactions on a node
  9. Call get_screenshot last and only when visual confirmation is needed, because it is expensive
  10. Node IDs use colon format (4029:12345), never hyphens
  11. get_local_components returns componentSets and variantProperties for variant-aware inspection

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

Repository stars
69
Repository forks
27
7-day trend score
0

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/alvinindra/figma-mcp-rust/read-design-strategy/badge)](https://verified-skill.com/skills/alvinindra/figma-mcp-rust/read-design-strategy)

Something wrong with this skill or its page? Tell us.