> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uspec.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Set up your AI agent, connect Figma, and run your first spec. Covers both rendering paths: Figma-native and Component Markdown

This page covers everything you need to go from zero to your first generated spec.

<Info>
  uSpec supports two rendering paths. This page sets up the **Figma-native** path (annotations rendered into Figma). The **Component Markdown** path (single `.md` spec via the uSpec Extract plugin) has its own walkthrough on the [Component Markdown page](/specs/component-md).
</Info>

<CardGroup cols={2}>
  <Card title="Setup instructions" icon="download" href="#setup-instructions">
    Install your AI agent, connect Figma, and configure your template library.
  </Card>

  <Card title="Create your first spec" icon="rocket" href="#create-your-first-spec">
    Prompt format, available skills, and tips for better output.
  </Card>
</CardGroup>

***

## Setup instructions

uSpec connects an AI coding agent to Figma through an MCP (Model Context Protocol) server. Setup depends on which rendering path you plan to use.

**Figma-native path (this walkthrough).** Annotations are rendered back into your Figma file. You need three pieces:

1. **AI agent host**: the coding environment that runs uSpec skills (Cursor, Claude Code, or Codex)
2. **Figma MCP**: the bridge that connects your agent to Figma files (either Figma Console MCP or native Figma MCP)
3. **Template library**: the Figma file containing documentation templates

**Component Markdown path.** A single `.md` spec is written to disk. You need two pieces:

1. **AI agent host** (same as above)
2. **uSpec Extract Figma plugin**: replaces the MCP + template library requirement. Clone the uSpec repo and build the plugin locally from `figma-plugin/`, then import the manifest in Figma Desktop. The [Component Markdown install guide](/specs/component-md#what-you-need) walks through every step.

For the Component Markdown path, follow the [agent host setup below](#1-set-up-your-agent-host), then jump to the [Component Markdown install and usage guide](/specs/component-md).

<Note>
  You only need to complete this setup once. After that, you can generate specs anytime by opening the project in your agent host.
</Note>

### 1. Set up your agent host

<Tabs>
  <Tab title="Cursor">
    Cursor is an AI code editor. All uSpec skills run inside Cursor's chat.

    <Steps>
      <Step title="Download Cursor">
        Go to [cursor.com](https://cursor.com) and download the app for your platform.
      </Step>

      <Step title="Open your project in Cursor">
        uSpec installs into your existing project — you do not need to clone the uSpec repo. Open any folder where you want to use uSpec.
      </Step>

      <Step title="Install uSpec">
        In the project's terminal, run:

        ```bash theme={null}
        npx uspec-skills init
        ```

        Choose **Cursor** when prompted. The CLI installs all skills into `.cursor/skills/` and references into `./references/`, then writes `uspecs.config.json`.
      </Step>

      <Step title="Select the right model">
        uSpec skills are token-intensive and require a model with high context capacity. In Cursor's chat, select **OpenAI GPT 5.4 High** or **Opus 4.6 High** or above. OpenAI 5.4 High is more economical to use.

        <Warning>
          Lower-capacity models may truncate instructions mid-skill, producing incomplete or broken specs. **OpenAI GPT 5.4 High** or **Opus 4.6 High** is the minimum recommended model.
        </Warning>
      </Step>
    </Steps>

    <Check>
      Verify skills are available by typing `@create-voice` or `@create-component-md` in Cursor's chat. Either should autocomplete to the skill file.
    </Check>
  </Tab>

  <Tab title="Claude Code">
    Claude Code is Anthropic's terminal-based coding agent.

    <Steps>
      <Step title="Install Claude Code">
        Follow the [Claude Code installation guide](https://code.claude.com/docs/en/overview) to install the CLI.
      </Step>

      <Step title="Open your project">
        uSpec installs into your existing project. `cd` into any folder where you want to use uSpec.
      </Step>

      <Step title="Install uSpec">
        ```bash theme={null}
        npx uspec-skills init
        ```

        Choose **Claude Code CLI** when prompted. The CLI installs all skills into `.claude/skills/` and references into `./references/`, then writes `uspecs.config.json`.
      </Step>

      <Step title="Select the right model">
        Use **OpenAI GPT 5.4 High** or **Opus 4.6 High** or above. uSpec skills are token-intensive and require high context capacity. OpenAI 5.4 High is more economical to use.
      </Step>
    </Steps>

    <Check>
      Run `claude` in the project directory. Claude Code should discover the `firstrun` skill from `.claude/skills/firstrun/`.
    </Check>
  </Tab>

  <Tab title="Codex">
    Codex is OpenAI's coding agent.

    <Steps>
      <Step title="Install Codex">
        Follow the [Codex setup guide](https://developers.openai.com/codex/) to install the CLI.
      </Step>

      <Step title="Open your project">
        uSpec installs into your existing project. `cd` into any folder where you want to use uSpec.
      </Step>

      <Step title="Install uSpec">
        ```bash theme={null}
        npx uspec-skills init
        ```

        Choose **Codex CLI** when prompted. The CLI installs all skills into `.agents/skills/` and references into `./references/`, then writes `uspecs.config.json`.
      </Step>

      <Step title="Select the right model">
        Use **OpenAI GPT 5.4 High** or **Opus 4.6 High** or above. uSpec skills are token-intensive and may produce incomplete output with lower-capacity models. OpenAI 5.4 High is more economical to use.
      </Step>
    </Steps>

    <Check>
      Codex should discover the `firstrun` skill from `.agents/skills/firstrun/`. Type `$firstrun` to get started, or use `/skills` to browse what's available.
    </Check>
  </Tab>
</Tabs>

<Tip>
  **Using more than one agent host?** Run `npx uspec-skills install --platform <name>` for each additional host in the same project. The CLI installs into the host's directory without touching the others, so you can have `.cursor/skills/`, `.claude/skills/`, and `.agents/skills/` side by side.

  ```bash theme={null}
  npx uspec-skills install --platform claude-code
  npx uspec-skills install --platform codex
  ```
</Tip>

***

### 2. Set up Figma MCP

uSpec supports two Figma MCP providers. Choose one based on your setup:

<Note>
  MCP providers update their setup instructions frequently. The configuration examples below are a starting point — always check the provider's documentation for the latest installation steps and options:

  * **Figma Console MCP**: [docs.figma-console-mcp.southleft.com](https://docs.figma-console-mcp.southleft.com/)
  * **Native Figma MCP**: [github.com/figma/figma-mcp](https://github.com/figma/figma-mcp)
</Note>

<Tabs>
  <Tab title="Figma Console MCP">
    The [Figma Console MCP](https://github.com/southleft/figma-console-mcp) (by Southleft) connects your agent to Figma Desktop via a Desktop Bridge plugin, giving it access to component data, variables, styles, and screenshots.

    #### Get a Figma personal access token

    <Steps>
      <Step title="Go to the Figma API settings">
        Open [figma.com/developers/api#access-tokens](https://www.figma.com/developers/api#access-tokens)
      </Step>

      <Step title="Create a token">
        Click **"Get personal access token"**, enter a description like `Figma Console MCP`, and copy the token. It starts with `figd_`.
      </Step>
    </Steps>

    <Warning>
      Copy the token immediately. You won't be able to see it again after closing the dialog.
    </Warning>

    #### Configure the MCP in your agent

    <Tabs>
      <Tab title="Cursor">
        Add the Figma Console MCP to your Cursor MCP configuration:

        ```json theme={null}
        {
          "mcpServers": {
            "figma-console": {
              "command": "npx",
              "args": ["-y", "figma-console-mcp@latest"],
              "env": {
                "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
              }
            }
          }
        }
        ```

        Add this to your Cursor MCP settings (global or project-level `.cursor/mcp.json`).
      </Tab>

      <Tab title="Claude Code">
        The repo includes a `.mcp.json` at the project root. Open it and replace the placeholder token:

        ```json theme={null}
        {
          "mcpServers": {
            "figma-console": {
              "command": "npx",
              "args": ["-y", "figma-console-mcp@latest"],
              "env": {
                "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
              }
            }
          }
        }
        ```

        Claude Code reads `.mcp.json` from the project root automatically.
      </Tab>

      <Tab title="Codex">
        The repo includes a `.codex/config.toml`. Open it and replace the placeholder token:

        ```toml theme={null}
        [mcp_servers.figma-console]
        command = "npx"
        args = ["-y", "figma-console-mcp@latest"]

        [mcp_servers.figma-console.env]
        FIGMA_ACCESS_TOKEN = "figd_YOUR_TOKEN_HERE"
        ```

        Codex reads MCP configuration from `.codex/config.toml`.
      </Tab>
    </Tabs>

    <Tip>
      This uses the NPX setup, which gives you all 59+ tools including design creation and variable management. Setup instructions may change between releases — for the latest configuration options, alternative installation methods, and troubleshooting, see the [Figma Console MCP documentation](https://docs.figma-console-mcp.southleft.com/).
    </Tip>

    #### Connect to Figma Desktop

    The **Desktop Bridge plugin** provides real-time access to your Figma file data. It comes bundled with the Figma Console MCP.

    <Steps>
      <Step title="Install the Desktop Bridge plugin">
        The Desktop Bridge plugin is included in the `figma-console-mcp` npm package. After running `npx figma-console-mcp@latest`, find the plugin at `node_modules/figma-console-mcp/figma-desktop-bridge/manifest.json`. In Figma Desktop, go to **Plugins → Development → Import plugin from manifest...** and select this file.
      </Step>

      <Step title="Run the plugin">
        Open the Desktop Bridge plugin in your Figma file. It auto-connects via WebSocket. No special launch flags needed.
      </Step>

      <Step title="Verify the connection">
        In your agent, type: *"Check Figma status"*

        The agent should confirm an active connection.
      </Step>
    </Steps>

    <Check>
      When the connection is active, your agent can read Figma file data, take screenshots, and access variables and styles.
    </Check>
  </Tab>

  <Tab title="Figma MCP (Native)">
    The official [Figma MCP](https://github.com/figma/figma-mcp) connects your agent directly to Figma with read and write access. No Desktop Bridge plugin required.

    #### Configure the MCP in your agent

    <Tabs>
      <Tab title="Cursor">
        Add the native Figma MCP to your Cursor MCP configuration:

        ```json theme={null}
        {
          "mcpServers": {
            "figma": {
              "command": "npx",
              "args": ["-y", "@anthropic-ai/figma-mcp@latest"],
              "env": {
                "FIGMA_API_KEY": "figd_YOUR_TOKEN_HERE"
              }
            }
          }
        }
        ```

        Add this to your Cursor MCP settings (global or project-level `.cursor/mcp.json`).
      </Tab>

      <Tab title="Claude Code">
        Add the native Figma MCP to `.mcp.json` at the project root:

        ```json theme={null}
        {
          "mcpServers": {
            "figma": {
              "command": "npx",
              "args": ["-y", "@anthropic-ai/figma-mcp@latest"],
              "env": {
                "FIGMA_API_KEY": "figd_YOUR_TOKEN_HERE"
              }
            }
          }
        }
        ```

        Claude Code reads `.mcp.json` from the project root automatically.
      </Tab>

      <Tab title="Codex">
        Add the native Figma MCP to `.codex/config.toml`:

        ```toml theme={null}
        [mcp_servers.figma]
        command = "npx"
        args = ["-y", "@anthropic-ai/figma-mcp@latest"]

        [mcp_servers.figma.env]
        FIGMA_API_KEY = "figd_YOUR_TOKEN_HERE"
        ```

        Codex reads MCP configuration from `.codex/config.toml`.
      </Tab>
    </Tabs>

    <Tip>
      The native Figma MCP supports `use_figma` for running Plugin API JavaScript, `get_screenshot` for visual capture, and `search_design_system` for finding components and variables. Setup instructions may change between releases — for the latest configuration options and full tool list, see the [Figma MCP documentation](https://github.com/figma/figma-mcp).
    </Tip>

    #### Verify the connection

    <Steps>
      <Step title="Get a Figma personal access token">
        Open [figma.com/developers/api#access-tokens](https://www.figma.com/developers/api#access-tokens) and create a token with read/write scopes.
      </Step>

      <Step title="Test the connection">
        In your agent, ask it to run a simple Figma command (e.g., *"List pages in my Figma file"* with a file link). The agent uses `use_figma` to verify connectivity.
      </Step>
    </Steps>

    <Check>
      When the native MCP is connected, your agent can read file structure, execute Plugin API scripts, take screenshots, and search your design system.
    </Check>
  </Tab>
</Tabs>

<Warning>
  **Test your MCP connection before proceeding.** Run a simple command in your agent to confirm Figma access is working. If the MCP isn't connected, `firstrun` will fail when it tries to read your template library.

  <Tabs>
    <Tab title="Console MCP">
      Open the Desktop Bridge plugin in Figma, then ask your agent: *"Check Figma status"*. You should see an active connection. If it doesn't connect, see the [Figma Console MCP documentation](https://docs.figma-console-mcp.southleft.com/) for setup verification.
    </Tab>

    <Tab title="Native Figma MCP">
      Ask your agent: *"List pages in my file"* with a Figma link. The agent should return the page names. If it fails, verify your `FIGMA_API_KEY` and see the [Figma MCP documentation](https://github.com/figma/figma-mcp) for setup verification.
    </Tab>
  </Tabs>
</Warning>

***

### 3. Run firstrun

The `firstrun` skill configures your Figma template library. Platform selection and skill installation are handled by `npx uspec-skills init` (Step 1) — `firstrun` only handles the Figma side.

<Note>
  You only need to run `firstrun` once per project. It reads your platform and MCP choice from `uspecs.config.json` and uses them to extract template keys from your Figma library.
</Note>

#### Get the template file

uSpec renders documentation using Figma component templates. You need to add the templates to your Figma organization before running `firstrun`.

<Note>
  Uber designers can skip this — the internal template library is already configured. When `firstrun` asks for a library link, type "skip".
</Note>

<Steps>
  <Step title="Open the Community file">
    Go to the [uSpec Template](https://www.figma.com/community/file/1603925462078533207/uspec-template) on Figma Community.
  </Step>

  <Step title="Duplicate to your drafts">
    Click **Open in Figma** to add a copy to your drafts.
  </Step>

  <Step title="Publish as a library">
    Move the file to your team or organization project, then publish it as a library:

    1. Open the file in Figma
    2. Go to the **Assets** panel
    3. Click the book icon and select **Publish library**
    4. Confirm the publish

    This makes the templates available for uSpec to import.
  </Step>
</Steps>

<Tip>
  If you're working solo or testing, you can skip publishing and use the file directly. The `firstrun` skill will still work as long as you have the file open.
</Tip>

#### Run the firstrun skill

<Steps>
  <Step title="Confirm your Figma MCP is connected">
    If using **Figma Console MCP**: Open the **Desktop Bridge** plugin in Figma Desktop for your template library file. If using **Figma MCP (Native)**: Ensure the MCP server is running and your access token is configured.
  </Step>

  <Step title="Run firstrun">
    <Tabs>
      <Tab title="Cursor">
        In Cursor's chat, type:

        ```
        @firstrun
        ```
      </Tab>

      <Tab title="Claude Code">
        Invoke the skill directly or let Claude auto-discover it:

        ```
        /firstrun
        ```
      </Tab>

      <Tab title="Codex">
        Invoke the skill with `$` or let Codex match it from the description:

        ```
        $firstrun
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Answer the library prompt">
    The agent asks one question:

    **Library link** — Paste the link to your Figma template library (Uber designers can type "skip").

    Your Figma MCP and platform were already configured by `npx uspec-skills init`, so the agent reads them from `uspecs.config.json` instead of asking again.
  </Step>

  <Step title="Wait for confirmation">
    The agent extracts component keys from your templates and merges them into `uspecs.config.json` automatically.
  </Step>
</Steps>

<Check>
  When you see "Setup complete! You are now ready to use uSpec", your environment and template library are configured.
</Check>

***

## Create your first spec

Before running a skill, confirm your setup is complete for the path you want to use.

**Figma-native path:**

1. Your agent host is open in the project where you ran `npx uspec-skills init` and skills are available
2. Your Figma MCP is connected (Desktop Bridge plugin for Console MCP, or native MCP server running)
3. You've run `firstrun`. The template library is configured (`uspecs.config.json` has your template keys and MCP provider)

**Component Markdown path:**

1. Your agent host is open in the project where you ran `npx uspec-skills init` and skills are available
2. The **uSpec Extract** Figma plugin is built locally from `figma-plugin/` and imported into Figma Desktop (see the [Component Markdown install guide](/specs/component-md#what-you-need))
3. You have a `_base.json` file produced by running the plugin on a component

### Example prompt: Figma-native path

Reference a skill, paste a Figma link, and describe anything the agent can't infer from the design: states, variants, behavior, or interaction details.

<Frame>
  <img src="https://mintcdn.com/personal-49ab26fb/nHZK0nwAJ_L22G1A/images/example-skill.png?fit=max&auto=format&n=nHZK0nwAJ_L22G1A&q=85&s=edb0522a63cf15117562934a2110dd10" alt="Prompt format showing skill name, Figma component link, and additional context" width="1326" height="203" data-path="images/example-skill.png" />
</Frame>

<Tabs>
  <Tab title="Cursor">
    ```
    @create-voice https://www.figma.com/design/abc123/Components?node-id=100:200

    This is a primary action button with enabled, hovered, pressed, and disabled states.
    The button has a text label and an optional leading icon.
    ```
  </Tab>

  <Tab title="Claude Code">
    ```
    /create-voice https://www.figma.com/design/abc123/Components?node-id=100:200

    This is a primary action button with enabled, hovered, pressed, and disabled states.
    The button has a text label and an optional leading icon.
    ```

    You can also skip the `/` and describe what you need. Claude auto-discovers the skill from its description.
  </Tab>

  <Tab title="Codex">
    ```
    $create-voice https://www.figma.com/design/abc123/Components?node-id=100:200

    This is a primary action button with enabled, hovered, pressed, and disabled states.
    The button has a text label and an optional leading icon.
    ```

    Type `$` to mention a skill explicitly, or use `/skills` to browse what's available. Codex can also match skills implicitly from their description.
  </Tab>
</Tabs>

### Example prompt: Component Markdown path

Reference the skill and point it at the `_base.json` produced by the plugin. No Figma link is required.

<Tabs>
  <Tab title="Cursor">
    ```
    @create-component-md baseJsonPath=~/Downloads/text-field-_base.json
    ```
  </Tab>

  <Tab title="Claude Code">
    ```
    /create-component-md baseJsonPath=~/Downloads/text-field-_base.json
    ```
  </Tab>

  <Tab title="Codex">
    ```
    $create-component-md baseJsonPath=~/Downloads/text-field-_base.json
    ```
  </Tab>
</Tabs>

<Tip>
  See the [Component Markdown guide](/specs/component-md) for the full plugin install, usage, and cost walkthrough.
</Tip>

### Available skills

The skills split into two groups based on where the documentation is delivered.

**Component Markdown (output is a single `.md` file):**

| Skill                 | What it generates                                                                                                                                                             |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `create-component-md` | Single self-contained `.md` covering API, structure, color tokens, and screen-reader behavior. Ships with the uSpec Extract Figma plugin. [Full guide →](/specs/component-md) |

**Figma-native (output is rendered into the Figma file):**

| Skill              | What it generates                                               |
| ------------------ | --------------------------------------------------------------- |
| `create-anatomy`   | Numbered markers on a component with an attribute table         |
| `create-property`  | Variant axis and boolean toggle exhibits with instance previews |
| `create-voice`     | Screen reader specs for VoiceOver, TalkBack, and ARIA           |
| `create-color`     | Color token annotations for all elements and states             |
| `create-api`       | Property tables with values, defaults, and examples             |
| `create-structure` | Dimensional specs for spacing, padding, and sizing              |
| `create-motion`    | Animation timeline and easing spec from After Effects data      |

<Note>
  `create-component-md` has its own setup path. Instead of a Figma link, it takes a `_base.json` produced by the **uSpec Extract** Figma plugin. See the [Component Markdown guide](/specs/component-md) for the plugin install and usage walkthrough.
</Note>

### What happens when you run a skill

The pipeline differs depending on the path.

<Tabs>
  <Tab title="Figma-native">
    <Steps>
      <Step title="Template import">
        The agent imports the documentation template into your current Figma page.
      </Step>

      <Step title="Content population">
        Component name, guidelines, properties, and tables are filled in automatically.
      </Step>

      <Step title="Section cloning">
        Sections are cloned for each variant, state, or property in your component.
      </Step>

      <Step title="Validation">
        A screenshot is captured and verified. Issues are fixed automatically.
      </Step>
    </Steps>

    <Check>
      If a documentation frame appears in your Figma file, your setup is working correctly.
    </Check>
  </Tab>

  <Tab title="Component Markdown">
    <Steps>
      <Step title="Preflight">
        The orchestrator validates `_base.json` against the plugin schema and stages it into `.uspec-cache/{componentSlug}/`.
      </Step>

      <Step title="API dictionary">
        `extract-api` runs first and writes `api-dictionary.json`. The dictionary keeps the three downstream specialists aligned on property names and states.
      </Step>

      <Step title="Parallel fan-out">
        `extract-structure`, `extract-color`, and `extract-voice` run as three parallel subagents in a single batch.
      </Step>

      <Step title="Reconciliation">
        The orchestrator compares specialist outputs for typed disagreements and re-dispatches the owning specialist when needed.
      </Step>

      <Step title="Render">
        The renderer fills a single Markdown template with the reconciled data and writes `components/{componentSlug}.md` under your working directory.
      </Step>
    </Steps>

    <Check>
      If a new `.md` appears under `./components/` in your working directory, your setup is working correctly.
    </Check>
  </Tab>
</Tabs>

### Tips for better output

* **Be specific about states**: Mention all states (selected, disabled, expanded) in your prompt. The agent cannot infer states that aren't visible in the current Figma frame.
* **Describe the parts**: For complex components, describe the interactive elements (e.g., *"This is a tooltip. The bell icon triggers it, and the bubble appears on hover and focus."*)

***

## Best practices

### Do (both paths)

* **Start a new agent session for every prompt.** Each skill consumes significant context. A fresh session ensures the model has full capacity and avoids degraded output.
* **Run on a high-capacity model.** Figma-native skills work on OpenAI GPT 5.4 High or Opus 4.6 High. `create-component-md` uses parallel subagents and needs Opus 4.7 High or better.

### Do (Figma-native only)

* **Confirm the MCP connection before running a skill.** For Console MCP, run the Desktop Bridge plugin in Figma. For native MCP, ensure the server is running. Verify the connection in your agent before starting. If the agent can't reach Figma, the skill will fail.
* **Run one agent per Figma file at a time.** The MCP supports multiple connections, but all agents share one active page and file context. Finish one skill before starting the next.

### Don't (Figma-native only)

* **Interact with the Figma frame while a skill is running.** The agent writes to the frame in multiple steps. Clicking, selecting, or editing mid-generation can break node references and corrupt the output.
* **Run multiple agents on the same file simultaneously.** They override each other's page navigation and produce corrupted specs. If you need parallel generation, use separate Figma files.

### Don't (both paths)

* **Reuse a long chat session for multiple skills.** Accumulated history reduces available context and degrades output quality. Start fresh each time.

<Note>
  The Component Markdown path does not write to Figma, so the Figma-interaction caveats above do not apply. You can run multiple `create-component-md` skills in parallel against different components safely.
</Note>

***

## Setup issues

<AccordionGroup>
  <Accordion title="Skills not loading">
    Run `npx uspec-skills doctor` from your project root. It reports any missing skills, missing references, or broken links.

    <Tabs>
      <Tab title="Cursor">
        * Confirm the project folder is open in Cursor (not a parent directory)
        * Check that `.cursor/skills/` contains the skill folders. If empty, re-run `npx uspec-skills install --platform cursor`.
        * Restart Cursor after running `npx uspec-skills init` so it picks up the new skills.
      </Tab>

      <Tab title="Claude Code">
        * Confirm you're running `claude` from the project root where you ran `npx uspec-skills init`
        * Check that `.claude/skills/` contains the skill folders. If empty, re-run `npx uspec-skills install --platform claude-code`.
      </Tab>

      <Tab title="Codex">
        * Confirm you're in the project directory where you ran `npx uspec-skills init`
        * Check that `.agents/skills/` contains the skill folders. If empty, re-run `npx uspec-skills install --platform codex`.
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Figma MCP not connecting">
    **Figma Console MCP:**

    * Confirm Figma Desktop is running (not the web version)
    * Close and reopen the Desktop Bridge plugin in Figma
    * Make sure only one instance of Figma Desktop is running
    * Check that your Figma access token is configured correctly in your agent's MCP settings

    **Figma MCP (Native):**

    * Confirm the MCP server is running (check your terminal or agent MCP panel)
    * Verify your `FIGMA_API_KEY` is set correctly in your MCP configuration
    * Test with a simple command like *"List pages in my file"* with a Figma link
  </Accordion>
</AccordionGroup>

<Note>
  For issues with skills or Figma connection, see the [Troubleshooting guide](/help/troubleshooting).
</Note>