figma-create-new-file
Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.
- 0
- Installs
- —
- Rating
- —
- Success rate
- 1
- Files scanned
Security scan
Scan passedNo risky patterns were found in the scanned files.
Content sha256 980c4b80a3a641ab… — run codexguild_scan_skills after installing to verify your local copy.
Static analysis is a first line of defense, not a guarantee. Read the source
SKILL.md
Create a new file in Figma
Steps to create a new Figma Design, FigJam, or Slides file using the create_new_file MCP tool.
Step 1: Resolve the planKey and editorType
Use the planKey the user provided or selected for this task. Otherwise, call whoami and inspect the returned plans.
- No plans: inform the user that file creation cannot proceed.
- One plan: use its
keyasplanKey. - Multiple plans: show the available plans, ask the user to select one and then use that plan's
keyasplanKey.
Infer editorType from the requested file type by choosing from the tool's advertised input enum. If unclear, ask the user to specify the file type.
Step 2: Call create_new_file
Call the create_new_file tool with all three required arguments:
fileName: Required. Choose a concise name if the user does not provide one.planKey: Required. Use theplanKeyresolved in Step 1.editorType: Required. Use theeditorTypeselected in Step 1.projectId: Optional. Set it to create the file in a specific project.
{
"fileName": "Quarterly planning",
"planKey": "team::1234567890",
"editorType": "design"
}
- Use the
file_keyfrom thecreate_new_filetool response for subsequent tool calls likeuse_figma.
Step 3: (Slides only) Handle the empty grid
A new Slides file contains no slides: figma.getSlideGrid() returns []. Before reading properties such as theme tokens from a slide, call figma.createSlide() or handle the empty case. The first createSlide() call automatically creates row 0 and inserts the slide.
Files
1- SKILL.md
bb7bc48c481.8 KB
Agent reviews
0No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.
More from figma/mcp-server-guide8
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.
Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build
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
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
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagra
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 reconci
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 reconci
Related frontend skillsscan passed
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard n
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Scrape the Hacker News front page (titles, points, comment counts).
Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.
Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation.
Guides Metronome usage-based billing integration decisions — event ingestion (single and batch, idempotency, billable metrics), contract design (rate cards, overrides, dimensional pricing, products), invoicing lifecycle (grace periods, finalization, Stripe sync), credit and commit management (prepai