figma-use-figjam
use_figma — Figma Plugin API Skill for FigJam
This skill contains FigJam-specific context for the use_figma MCP tool. The figma-use skill provides foundational context for plugin API execution via MCP as well as the full Figma plugin API for more advanced use-cases that are not described here.
Always pass skillNames: "figma-use-figjam" when calling use_figma for FigJam operations. This is a logging parameter used to track skill usage — it does not affect execution.
Inspecting FigJam Files
get_figjam is the inspection tool for FigJam files. It returns the full node tree as XML, including IDs of pages, sections, stickies, connectors, and other nodes you need to reference in subsequent use_figma calls.
- Use
get_figjamupfront before writing anyuse_figmacode that needs to reference existing nodes (page IDs, section IDs, etc.). Don't try to discover IDs by running an inspection script —console.logoutput fromuse_figmais not returned to the agent (see figma-use Critical Rule #4). Only thereturnvalue comes back. get_metadatadoes NOT work on FigJam files — it is design-mode only and will fail immediately with "unsupported for FigJam files".get_screenshotrequires a validnodeId— passing an empty nodeId returns "invalid nodeId" error. Get IDs fromget_figjamfirst.- If you forgot to
returnan ID from a previoususe_figmacall and need it now, callget_figjamrather than re-running an inspection script.
Loading Reference Docs Efficiently
Load only the references your task needs — but when you do need to load multiple, issue all reads in a single parallel tool-call batch, not sequentially across turns. For a typical board-creation task, that means a single message containing reads for plan-board-content plus the 3-4 specific node-type references you'll use.
More from figma/dev-mode-mcp-server-guide
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.
11figma-code-connect
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
10figma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.
9figma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
9figma-create-new-file
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)
8figma-generate-library
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
8