figma/mcp-server-guide

figma-create-new-file

Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file.

ソースを見る
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

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 plan and product

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 key.
  • Multiple plans: show the available plans, ask the user to select one and then use that plan's key.

Infer the product (Design, FigJam, or Slides) from the task. If unclear, ask the user to specify.

Step 2: Call createnewfile

  • Call the create_new_file tool with the planKey and product from Step 1.
  • Use a concise name for the new file if the user doesn't provide one.
  • Use the file_key from the create_new_file tool response for subsequent tool calls like use_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.

同じリポジトリから

関連する Skills

すべての Skills
figma
公式

figma-design-to-code

MANDATORY prerequisite — you MUST invoke this skill BEFORE calling the getdesigncontext 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 this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

導入数
1
GitHub Stars
2006
更新日
9月18日
figma
公式

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.

導入数
1
GitHub Stars
1971
更新日
9月8日
figma
公式

figma-shaders

MANDATORY prerequisite — load this skill before calling createshader or updateshader. Use when the user asks to create, author, change, fix, or iterate on a shader effect, shader fill, custom effect, custom fill, or procedural shader in Figma.

導入数
1
GitHub Stars
1971
更新日
9月8日
figma
公式

figma-swiftui

SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside .swift files / an .xcodeproj. Routes to a direction-specific reference doc; loads alongside figma-use for the code → design path.

導入数
1
GitHub Stars
1971
更新日
9月8日