Skip to content

Skills · solution-architect

figma-diagrams

Work with Figma and FigJam files via the Figma REST API — read existing file structure, list frames/pages, post comments, and produce FigJam-importable diagram specs. Use when the user mentions a Figma URL, asks to inspect/audit a Figma file, wants to comment on a design programmatically, or wants their architecture diagram in Figma.

Pack solution-architectTier standardJob Design the systemv0.1.3

npx skilldrop-cli install figma-diagrams
Other ways to install

With the sibling skills it hands off to:

npx skilldrop-cli install figma-diagrams --with-related

The whole pack it belongs to:

npx skilldrop-cli install --pack solution-architect

By hand, from a clone of the repo:

cp -R packs/solution-architect/skills/figma-diagrams ~/.claude/skills/

In Claude Code, with the solution-architect plugin installed, invoke it as:

/solution-architect:figma-diagrams

Try it

A realistic prompt from the skill's acceptance evals:

List the pages and frames in this Figma file and post a comment on the checkout frame.

What a good result looks like

How it's checked

Measured against plain Claude Code (2026-10-23): it met 69% of its checks, against 61% without it, and a blind judge preferred the agent without it. How skills are checked

16 assertions across 3 acceptance evals, and 8 trigger queries. Every skill's checks

What the output must do
  • The token is read from the FIGMA_TOKEN environment variable and never logged or passed on the command line
  • Output is filtered to pages, frames, and groups (about three levels) and summarized rather than dumping raw JSON
  • Before posting any comment, the exact comment text and target frame are shown for confirmation
  • The skill states clearly when FIGMA_TOKEN is missing rather than failing opaquely
  • Lists the pages and their frames as they appear in signage-file.json, without inventing frames
  • Points out that Level 2 has no frame on the Final page, only an old version on the Archive page
  • Points out that the 'Floor Plan – Level 1 – Final' frame contains text saying it is a draft not approved by the museum
  • Points out that only 11 sign types are present and Type 07 is missing, contradicting the agency's email
  • Does not claim to have posted comments or called the Figma API, and does not stop to ask for a token before doing the work
  • The draft comments are one line each and each is tied to a specific frame
  • Delivers something the user can get onto the FigJam board without an API token, rather than stopping to ask for a token or access
  • Contains the five steps in the stated order
  • Does not claim to have created or posted anything in Figma or FigJam
  • Gives short, non-technical steps for getting it onto the board
  • Does not invent extra steps, owners or timings beyond those in the message
  • Keeps the whole reply short
When it should and shouldn't activate

Should activate:

  • List the frames in our Figma file
  • Read this Figma file structure via the API
  • Post a comment on this Figma frame
  • Convert this FigJam connector graph into a diagram spec

Should leave to another skill:

  • Draw an architecture diagram in Mermaid from this description
  • Reverse-engineer our architecture from the repo
  • Build a PowerPoint deck from this content
  • Audit this UI for accessibility issues

Related skills

architecture-diagrams

Source

SKILL.md · the whole folder on GitHub.