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.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

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.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
figma
Oficjalne

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.

instalacje
1
GitHub Stars
2 tys.
Aktualizacja
18 wrz
figma
Oficjalne

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.

instalacje
1
GitHub Stars
2 tys.
Aktualizacja
8 wrz
figma
Oficjalne

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.

instalacje
1
GitHub Stars
2 tys.
Aktualizacja
8 wrz
figma
Oficjalne

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.

instalacje
1
GitHub Stars
2 tys.
Aktualizacja
8 wrz