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.

查看源码

使用方法

  1. 复制安装命令,在自己的智能体环境安装前先检查源码包。
  2. 从原始文档核对所需工具、凭据和支持的宿主。
  3. 说明输入材料与期望交付物,并对照来源检查输出。
npx skills add https://github.com/figma/mcp-server-guide --skill figma-create-new-file

开始前需了解

  • 安装不包含模型订阅、API 额度或访问文件的权限。
  • 仓库星数和安装量反映活跃情况,不等于独立质量或安全测试。
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

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

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 createnewfile

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 the planKey resolved in Step 1.
  • editorType: Required. Use the editorType selected in Step 1.
  • projectId: Optional. Set it to create the file in a specific project.
json
{
  "fileName": "Quarterly planning",
  "planKey": "team::1234567890",
  "editorType": "design"
}
  • 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 sk

安装量
2
GitHub Stars
2105
最近更新
10月20日
figma
官方

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.

安装量
4
GitHub Stars
2092
最近更新
10月19日
figma
官方

figma-code-workflows

Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.

安装量
4
GitHub Stars
2092
最近更新
10月19日
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,

安装量
5
GitHub Stars
2092
最近更新
10月19日