Agent skill
figma-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)
Install this agent skill to your Project
npx add-skill https://github.com/figma/mcp-server-guide/tree/main/skills/figma-create-new-file
SKILL.md
create_new_file — Create a New Figma File
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) orfigjam - 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"
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" or "figjam" |
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.
- Only
"design"and"figjam"editor types are supported. - If
use_figmais your next step, load thefigma-useskill before calling it.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
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, 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.
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-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.js files.
figma-create-design-system-rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. 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-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'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
Didn't find tool you were looking for?