Skip to main content
Echo Specs runs entirely in Cursor and connects to Figma through the Figma Console MCP. You need three things to get started:
  1. Cursor: the AI code editor that runs Echo Specs agent skills
  2. Figma Console MCP: the bridge that connects Cursor to your Figma files
  3. Echo Specs Figma plugin: renders the structured JSON into documentation templates in Figma
You only need to complete this setup once. After that, you can generate specs anytime by opening the project in Cursor.

​
1. Install Cursor

Cursor is the AI code editor that powers Echo Specs. All agent skills run inside Cursor’s chat.
1

Download Cursor

Go to cursor.com and download the app for your platform.
2

Request access to the repository

The Echo Specs repository is private. Request access from ian.guisard if you don’t already have it.
3

Clone the Echo Specs repository

Once you have access, clone the repository to your local machine.
git clone https://github.com/iguisard/base-echo.git
4

Open the project in Cursor

Open the BaseEcho folder in Cursor. The agent skills in .cursor/skills/ load automatically. No extra configuration needed.
You can verify skills are available by typing @create-voice in Cursor’s chat. It should autocomplete to the skill file.

​
2. Set up Figma Console MCP

The Figma Console MCP connects Cursor to Figma Desktop, giving the agent access to your component data, variables, styles, and screenshots.

​
Get a Figma personal access token

1

Go to the Figma API settings

Open figma.com/developers/api#access-tokens
2

Create a token

Click “Get personal access token”, enter a description like Figma Console MCP, and copy the token. It starts with figd_.
Copy the token immediately. You won’t be able to see it again after closing the dialog.

​
Configure the MCP in Cursor

Add the Figma Console MCP to your Cursor MCP configuration: 
{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}
This uses the NPX setup, which gives you all 56+ tools including design creation and variable management. For alternative installation methods, troubleshooting, and the latest configuration options, see the Figma Console MCP documentation.

​
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 and is installed separately from the Echo Specs plugin.
1

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.
2

Run the plugin

Open the Desktop Bridge plugin in your Figma file. It auto-connects via WebSocket. No special launch flags needed.
3

Verify the connection

In Cursor’s chat, type: “Check Figma status”The agent should confirm an active connection.
When the connection is active, Cursor can read your Figma file data, take screenshots, and access variables and styles.

​
3. Install the Echo Specs Figma plugin

The Echo Specs plugin is a custom plugin that takes structured JSON from Cursor and renders documentation templates in your Figma file. This is separate from the Desktop Bridge plugin, which handles the MCP connection.
The Echo Specs plugin is automatically available on all design files at Uber. No installation required. If you prefer to build it yourself or are working outside of Uber, follow the steps below.
1

Build the plugin

From the Echo Specs repository, build the Figma plugin:
cd figma-plugin
npm install
npm run build
2

Import into Figma

In Figma Desktop, go to Menu → Plugins → Development → Import plugin from manifest…
3

Select the manifest

Navigate to the figma-plugin folder and select manifest.json.
The plugin appears under Plugins → Development → Echo Specs.

​
Verify your setup

Test the complete flow to confirm everything is connected:
1

Open Echo Specs in Cursor

Open the Echo Specs project folder in Cursor.
2

Share a Figma link

In Cursor’s chat, share a Figma link to any button component and type: “Create a voice spec for this button, it has enabled and disabled states”
3

Copy the JSON

The agent generates structured JSON. Copy it.
4

Run the plugin

Open the Echo Specs plugin in Figma, paste the JSON, and click Generate.
If a documentation frame appears in your Figma file, your setup is complete.

​
Setup issues

  • Ensure you have Node.js v18+ installed (node --version)
  • Delete node_modules and package-lock.json, then run npm install again
  • Check that TypeScript compiles without errors: npm run build
  • Make sure you imported via Development → Import plugin from manifest (not the community plugin search)
  • Verify you selected the correct manifest.json from the figma-plugin folder
  • Try restarting Figma Desktop
For issues with skills, Figma connection, or JSON errors, see the Troubleshooting guide.