skilld
All skills
bitwarden avatar

/using-figma

@44910a0 official
by bitwardenbitwarden/ai-plugins155 stars
20

Read and inspect Figma designs via the Dev Mode MCP server — selects the right tool, parses Figma URLs into fileKey and nodeId, and turns design context into useful input for critique, copy review, handoff prep, and Design System work.

Ask your Agent

Use this Skill: https://skilld.dev/gh/bitwarden/ai-plugins/using-figma

This session only. Nothing lands on disk.

referencessetup.md

≈650 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Figma Dev Mode MCP Server — Setup & Troubleshooting

The Figma MCP server is not bundled with this plugin. It is Figma's own product, and the user installs and authenticates it themselves. This reference is for the moments when something isn't working and a quick check helps unblock the work.

Two server types

Figma exposes the MCP server in two flavors:

  • Desktop server. Runs locally alongside the Figma desktop app. Requires a Dev or Full seat on a paid Figma plan. Some tools (marked "remote only" in the official docs) are unavailable on desktop.
  • Remote server. Hosted by Figma; works in environments that support remote MCP servers (Augment Code, Claude Code, Cursor, and others per Figma's compatibility list).

Confirm with the user which one they're using when troubleshooting — the tool surface differs.

Client compatibility

The client (Claude Code in this plugin's context) must support MCP servers, and the user must have configured the Figma server in their client's MCP settings. Configuration lives in the user's environment (not in this plugin) — refer them to Figma's setup guide if the tools are absent from the session.

Confirming the server is reachable

Before starting any Figma-dependent work, verify the MCP is present:

  • If a whoami-style tool is available in the session's MCP list, that confirms the connection and tells you which seat type the user has.
  • If no Figma tools appear in the session's MCP list at all, stop and ask the user to install and authenticate the server before proceeding.

Common failure modes

  • Write tools unavailable. The desktop server may not expose write tools that are available remotely. If a write call fails on desktop, fall back to a read-only approach or surface the limitation to the user.
  • Seat type insufficient. Some tools require a Dev or Full seat. If a tool returns an authorization error, suggest the user check their seat type via whoami and escalate to their Figma admin if needed.
  • File not in workspace. If the file is in a personal workspace the authenticated user can't access, no MCP tool will reach it. The user must either be granted access or share via a different channel.
  • Node ID format mismatch. URLs use -; the MCP expects :. Always convert. If a tool responds with "node not found", check the ID format first.

References

  • Official guide: help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server
  • Official tool reference: developers.figma.com/docs/figma-mcp-server/tools-and-prompts/

Source: SKILL.md on GitHub

Third-party checks

1 warning3mo3 checks · Risk SAFE
  • Gen Agent Trust Hub3mo

    This skill, authored by Bitwarden, provides a read-only integration with the official Figma Dev Mode MCP server. It follows security best practices by explicitly restricting capabilities to design inspection and orientation tasks. A low-risk surface for indirect prompt injection exists due to the processing of external design data, which is typical for such integrations.

  • Socket3mo

    No alerts

  • Snyk3mo

    Risk: MEDIUM · 1 issue

Provenance

Signed by skilld at 44910a0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 4 months ago

Capability

MCP servers
figma
All 12 allowed tools
Skillmcp__figma__get_design_contextmcp__figma__get_metadatamcp__figma__get_screenshotmcp__figma__get_variable_defsmcp__figma__get_librariesmcp__figma__search_design_systemmcp__figma__get_figjammcp__figma__whoamimcp__figma__get_code_connect_mapmcp__figma__get_code_connect_suggestionsmcp__figma__get_context_for_code_connect
Other metadata
when_to_use
Use when a task reads design context from Figma without generating production code or modifying Figma state. Triggers — Figma URL shared, "look at this design", "extract tokens from Figma", "what variables does this use", "what's in this Figma file", "compare these two Figma frames", "inspect this component". Not for framework-bound code generation (use `figma-to-angular` in the clients repo, external — not bundled), and not for Figma mutations (this skill's `allowed-tools` is read-only).

Topics

  • Design
  • MCP
  • figma
  • dev-mode
  • design-tokens
  • design-system
  • metadata
  • screenshots
  • code-connect

README badge

README badge for bitwarden/ai-plugins/using-figma

What it does

Reads and inspects Figma designs via the Dev Mode MCP server, parsing URLs and extracting design context, tokens, screenshots, and metadata for critique, copy review, and handoff prep. Use this skill when a task needs to pull information from a Figma file without modifying it or generating production code.

Generated from the current SKILL.md.

Frequently asked

Does this skill generate production code from Figma designs?
No. This skill reads and inspects Figma designs only. Production code generation belongs in repo-specific skills like `figma-to-angular`. This skill stops at extracted design context.
Can this skill modify or write to Figma files?
No. The skill's allowed tools are read-only. It can extract designs, tokens, and metadata but cannot create files, upload assets, or mutate Figma objects.
Do I need to install the Figma Dev Mode MCP server separately?
Yes. The Figma MCP server is not bundled with this skill. You must install and authenticate it yourself — either the desktop server (requires a Dev or Full seat on a paid Figma plan) or the remote server.
What should I do if a Figma URL doesn't have a node-id?
Ask which specific frame you mean before extracting context. Operating on the whole file returns too much context and is rarely what's needed.
Which tool should I use to extract design tokens like colors and spacing?
Use `get_variable_defs` to extract tokens efficiently. Avoid reaching for `get_design_context` reflexively — it returns unnecessary code and screenshots when you only need token definitions.

Generated from the current SKILL.md. These answers refresh after source changes.