How to install figma-create-new-file
npx skills add https://github.com/figma/mcp-server-guide --skill figma-create-new-fileFull instructions (SKILL.md)
Source of truth, from figma/mcp-server-guide.
name: figma-create-new-file
description: "MANDATORY prerequisite — you MUST invoke this skill BEFORE every create_new_file tool call. NEVER call create_new_file directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling use_figma. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)"
disable-model-invocation: false
create_new_file — Create a New Figma File
MANDATORY: load this skill before every create_new_file tool call. It encodes the plan-resolution decision tree, the editor-type contract, and the post-creation handoff to use_figma.
Use the create_new_file MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before use_figma when you need a fresh file to work with.
Skill Arguments
This skill accepts optional arguments: /figma-create-new-file [editorType] [fileName]
- editorType:
design(default),figjam, orslides - fileName: Name for the new file (defaults to "Untitled")
Examples:
/figma-create-new-file— creates a design file named "Untitled"/figma-create-new-file figjam My Whiteboard— creates a FigJam file named "My Whiteboard"/figma-create-new-file design My New Design— creates a design file named "My New Design"/figma-create-new-file slides Q3 Review— creates a Slides presentation named "Q3 Review"
Parse the arguments from the skill invocation. If editorType is not provided, default to "design". If fileName is not provided, default to "Untitled".
Workflow
Step 1: Resolve the planKey
The create_new_file tool requires a planKey parameter. Follow this decision tree:
-
User already provided a planKey (e.g. from a previous
whoamicall or in their prompt) → use it directly, skip to Step 2. -
No planKey available → call the
whoamitool. The response contains aplansarray. Each plan has akey,name,seat, andtier.- Single plan: use its
keyfield automatically. - Multiple plans: ask the user which team or organization they want to create the file in, then use the corresponding plan's
key.
- Single plan: use its
Step 2: Call create_new_file
Call the create_new_file tool with:
| Parameter | Required | Description |
|---|---|---|
planKey | Yes | The plan key from Step 1 |
fileName | Yes | Name for the new file |
editorType | Yes | "design", "figjam", or "slides" |
Example:
{
"planKey": "team:123456",
"fileName": "My New Design",
"editorType": "design"
}
Step 3: Use the result
The tool returns:
file_key— the key of the newly created filefile_url— a direct URL to open the file in Figma
Use the file_key for subsequent tool calls like use_figma.
Important Notes
- The file is created in the user's drafts folder for the selected plan.
- Supported editor types are
"design","figjam", and"slides". - If
use_figmais your next step, load thefigma-useskill before calling it.
Editor-specific notes
Slides — newly created files have an empty grid
A slides file produced by this tool starts with zero rows and zero slides — figma.getSlideGrid() returns [], not a default first slide. The page's only child is the SLIDE_GRID node itself, which is empty until you create content. The first call to figma.createSlide() implicitly creates row 0 and inserts the new slide there.
If your follow-up use_figma script assumes at least one slide exists (e.g. to read theme tokens off it), guard for the empty case or call createSlide() first. See figma-use-slides → slide-grid for full details.
Related skills
More from figma/mcp-server-guide and the wider catalog.
implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
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.
figma-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`.
figma-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.
figma-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, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. 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.
figma-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.