Edit Figma Design

Edit Figma Design

Overview

This skill creates or updates Figma designs directly from a natural-language description. It combines Figma library search with direct file authoring, and uses Warp's broader agent capabilities only when they are needed to make the design more product-aware or codebase-aware.

When to use this skill

Use this skill when the user wants you to:

• design a new screen, flow, component, or mockup in Figma from a written description
• refine or extend an existing Figma file from text feedback
• create a first-pass wireframe or higher-fidelity design directly in Figma
• align a Figma design to an existing design system or product vocabulary

Do not use this skill when:

• the user wants production code from a design — use implement-design
• the user wants to capture a running page or app into Figma — use figma-generate-design
• the user only wants to inspect or pull existing Figma context — use pull-figma-content

Prerequisites

• Figma MCP server must be connected and accessible.
  • Verify that search_design_system, create_new_file, and use_figma are available.
• Gather the minimum information needed to proceed:
  • what should be designed
  • whether to use an existing Figma file or create a new one
  • whether the result should align to an existing design system or codebase
• Ask clarifying questions only when the user has not already given enough detail to start. Keep them short and batch them into one message when possible.

Required Workflow

Follow these steps in order. Do not skip steps.

Step 1: Confirm this is a Figma-authoring request

If the user is actually asking for implementation, stop and consult implement-design.

If the user wants a screenshot-to-Figma or webpage capture flow, stop and consult figma-generate-design. That skill is for capture-based workflows; this skill is for text-to-design authoring.

Step 2: Resolve the destination file first

Both search_design_system and use_figma need a fileKey, so determine the destination before searching or editing.

If the user provided an existing Figma URL or file key:

• Extract and use that fileKey.
• Reuse the provided URL when you respond.

If the user wants a new file:

1. Decide on a clear file name from the request.
2. If the user already provided a planKey, use it.
3. Otherwise call the Figma MCP whoami tool to inspect the authenticated Figma user and available plans. This is not the shell whoami command.
4. If there is exactly one plan, use its key.
5. If there are multiple plans, ask the user which team or organization to use.
6. Call create_new_file(editorType="design", fileName=..., planKey=...).
7. Save the returned fileKey and URL. Share the URL once the first usable draft is ready.

Step 3: Gather the right context, but only when it is needed

Decide how much non-Figma context is actually necessary.

Stay inside Figma MCP only when the user wants an exploratory concept, wireframe, or mockup and does not ask for codebase alignment.

Use Warp agent context selectively when the user wants the design to match an existing product or design system:

• read project rules from AGENTS.md and/or WARP.md if they exist
• use semantic codebase search, grep, and file reads to find relevant components, product vocabulary, layout patterns, and design-token sources
• use other MCP sources or web search only when the prompt directly depends on them, such as product requirements in another system or explicit inspiration requests
• do not edit code, run REPL commands, or use computer use as part of this skill's normal workflow

Step 4: Search the design system before authoring

Call search_design_system with the resolved fileKey before creating new components or styles.

Search for the most reusable assets first:

• components and component sets
• variables and token-like values
• styles for color, typography, spacing, or effects

Start with the user's domain terms and any names discovered from project rules or codebase search.

If needed, narrow follow-up searches with returned library keys rather than immediately broadening the search.

Prefer reusing and importing matches over recreating them from scratch.

Step 5: Prepare use_figma safely

Before the first use_figma call, plan the edit sequence and follow the tool's required Plugin API constraints.

Keep the authoring plan incremental:

1. create page and frame structure
2. establish layout and major sections
3. reuse or import design-system assets
4. apply variables, styles, and typography
5. add content and polish
6. make targeted revisions based on what the file now contains

Step 6: Edit the design in small use_figma steps

Use multiple small use_figma calls instead of one giant script.

Good step boundaries:

• create a page and top-level frames
• lay out a header, sidebar, hero, or content region
• import or place one family of reusable components
• bind colors, text styles, or spacing variables
• update copy, states, or alignment for a specific section

After each step, inspect the result and only continue once the previous step succeeded.

When creating anything component-like, prefer imported library assets discovered in Step 4.