obsidian/wiki/claude-code/figma-mcp-trigger-tools.md
2026-05-15 10:29:55 +01:00

2.5 KiB

title aliases tags sources created updated
Figma MCP — Trigger Specific Tools
figma-mcp-explicit-tools
figma-tool-nudge
figma
mcp
prompt-engineering
tools
design-to-code
raw/Trigger specific tools when needed.md
2026-05-15 2026-05-15

Figma MCP — Trigger Specific Tools

The Figma MCP exposes multiple tools, each providing a different kind of structured context. As the tool count grows, AI assistants don't always pick the right one automatically — explicit prompt nudges fix this.

Key Tools

Tool What it returns When to trigger it
get_design_context React + Tailwind structured representation of the selection Starting point for code generation; translate to any framework after
get_variable_defs Variables and styles (color, spacing, typography tokens) When you need token names/values in generated code

The Problem

AI assistants often default to get_design_context even when you need variables. Users reported requesting variable values but getting raw code instead.

The Fix — Explicit Prompt

Instead of:

"Generate code for this frame"

Say:

"Get the variable names and values used in this frame"

Being explicit about what you want is enough to steer the model toward the correct tool.

Key Takeaways

  • AI tool selection is not deterministic — add intent to your prompts when output feels wrong or incomplete.
  • get_design_context = structure/layout → code generation starting point.
  • get_variable_defs = design tokens → use when you need exact color/spacing/type values in generated code.
  • Prompt pattern: name the artifact you want ("variable names and values", "design context", "screenshot") not just the end goal ("generate code").
  • If output is still off after nudging, check wiki/claude-code/figma-mcp-avoid-large-frames — large selections degrade tool output quality.

Sources

  • raw/Trigger specific tools when needed.md (source: developers.figma.com/docs/figma-mcp-server/trigger-specific-tools/)