Figma Plugin Template

Extending Claude

Beyond the defaults

This template comes with three MCP servers pre-configured — Figma, Context7, and Sequential Thinking. But you can add more to give Claude additional abilities.

This page covers optional servers you can install when you need them. Each one is independent — pick only what's useful for your workflow.

GitHub

Let Claude manage pull requests, issues, and repositories directly. Useful if you're collaborating with others or tracking work on GitHub.

What it does:

  • Create and review pull requests
  • Open, close, and comment on issues
  • Search repositories and read code
  • Manage branches and workflows

Setup

  1. Create a GitHub Personal Access Token with repo scope
  2. Add to .claude/settings.local.json (keeps your token out of git):
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "github-mcp"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your-token-here"
      }
    }
  }
}
  1. Restart Claude Code

Try it

"Create an issue titled 'Add dark mode support' in this repo"


Playwright

Give Claude a web browser. It can navigate pages, click buttons, fill forms, and take screenshots. Useful for testing your plugin's documentation site or automating web tasks.

What it does:

  • Open web pages and interact with elements
  • Take screenshots and read page content
  • Fill forms and click buttons
  • Run automated browser tests

Setup

Add to .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

No API key needed. Restart Claude Code after adding.

Try it

"Open localhost:6006 and take a screenshot of the Storybook homepage"


Exa

Semantic web search — smarter than keyword search. Claude can find relevant articles, documentation, and examples based on meaning, not just matching words.

What it does:

  • Search the web using natural language queries
  • Find similar pages to a given URL
  • Get full page contents for research
  • Better results than keyword search for technical topics

Setup

  1. Get an API key from Exa
  2. Add to .claude/settings.local.json:
{
  "mcpServers": {
    "exa": {
      "command": "npx",
      "args": ["-y", "exa-mcp-server"],
      "env": {
        "EXA_API_KEY": "your-api-key-here"
      }
    }
  }
}
  1. Restart Claude Code

Try it

"Search for examples of Figma plugins that use the Variables API"


Memory

Persistent memory across sessions. Claude can save and recall information using a knowledge graph, so it remembers decisions, preferences, and context between conversations.

What it does:

  • Remember project decisions and technical choices
  • Recall user preferences across sessions
  • Build a knowledge graph of relationships between concepts
  • Persist context that would otherwise be lost when a session ends

Setup

Add to .claude/settings.json:

{
  "mcpServers": {
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    }
  }
}

No API key needed. Memory is stored locally in a memory.jsonl file. Restart Claude Code after adding.

Try it

"Remember that we decided to use a blue color scheme for this plugin"


Adding servers to your config

Each server example above shows the JSON to add. A few tips:

  • Servers with API keys should go in .claude/settings.local.json — this file is gitignored, so your keys stay private
  • Servers without API keys can go in .claude/settings.json — shared with anyone who clones the repo
  • You can mix both — shared servers in settings.json, private keys in settings.local.json
  • Restart Claude Code after changing either file for the new servers to take effect

Browse more servers at the MCP Server Registry or the official servers repository.

On this page