Connecting to figma MCP

[0Banana00]

I'm looking for a tutorial on how to connect Continue to figma's MCP, and I can't find exactly what to write in the config for this connection.

I would appreciate your help.

[bdougie]

Hey @0Banana00! 👋

We have MCP cookbooks and documentation that can help you connect
Continue with MCPs! Check out our guide here:
https://docs.continue.dev/guides/posthog-github-continuous-ai

Good news: As of PR
#7956, Continue now
supports JSON configuration files for MCP servers! You can configure your
MCP connection in two ways:

Option 1: JSON Configuration (New!)

Create a JSON file in .continue/mcpServers/ folder:

{
  "url": "https://your-mcp-endpoint.com/sse",
  "type": ["http", "sse"],
  "headers": {
    "Authorization": "${FIGMA_API_KEY}"
  }
}

Important: Store your API key securely! Use environment variables (as
shown above) or Continue Hub secrets - never hardcode keys directly in
your config files.

Option 2: Command Line

  npx -y mcp-remote@latest <MCP_SSE_URL> --header Authorization:${{
  secrets.YOUR_AUTH_HEADER }}

The JSON config approach is particularly nice because:

• It automatically handles environment variable templating for secure key
  storage
• Supports both single config objects and Claude-like format
• Auto-selects the right transport (stdio/websocket/HTTP/SSE)

For Figma MCP specifically, you'd need:

• The Figma MCP SSE endpoint URL
• Your Figma API personal access token (stored securely in environment
  variables or Continue Hub secrets)
• A JSON config file in .continue/mcpServers/figma.json

The cookbook shows examples with PostHog and GitHub MCPs that follow the
same pattern. Just swap out the endpoint URL and use your Figma
authentication token (remember to keep it secure!).

Hope this helps! Let me know if you need more specific guidance once you
have the Figma MCP endpoint details.

[0Banana00]

Thanks for the detailed answer.
I tried to set up a json file according to your instructions,
but I still haven't been able to get Continue to actually use the link I'm trying to put in it that points to a specific figma design.
I may be missing something important.
Does FIGMA_API_KEY refer to the temporary token I generate on the figma website?
Can you demonstrate a simple way to safely set a value in it?
And how should I ask Continue to access figma so that it understands that it needs to use these settings?
Thanks again.

[bdougie]

I don't think you specified whether you were using the Hub (hosted) or local config. For storing your Figma API token (or any MCP secrets), you would do

Option 1: Local Environment Variables
Store secrets in your local environment:

macOS/Linux:

# Add to ~/.zshrc or ~/.bashrc
export FIGMA_PERSONAL_ACCESS_TOKEN="your-token-here"

Windows:

Set as user environment variable

[System.Environment]::SetEnvironmentVariable("FIGMA_PERSONAL_ACCESS_TOKEN", "your-token-here", "User")

Then reference in your .continue/mcpServers/figma.json:

{
  "headers": {
    "Authorization": "Bearer ${FIGMA_PERSONAL_ACCESS_TOKEN}"
  }
}

Option 2: Continue Hub Secrets (Cloud)
If you're using Continue Hub:

1. Go to your Continue Hub dashboard
2. Navigate to Settings → Secrets
3. Add your secret with a name like FIGMA_API_KEY
4. Reference it in your config:

   {
     "headers": {
       "Authorization": "Bearer ${{ secrets.FIGMA_API_KEY }}"
     }
   }
   ```

Pro tip: Hub secrets are great for team sharing - everyone on your
workspace can use the same MCP connection without exposing the actual
 token.
 
 https://docs.continue.dev/hub/secrets/secret-types#user-secrets

 Both methods keep your tokens out of your codebase and config files.
 Choose local for personal use, or Hub for team collaboration!

[0Banana00]

Thanks again for the detailed answer.
I'm sure I'm missing something important,
because I updated the settings according to what you wrote,
and still when I try to point the Continue plugin to a design link I have in figma, so that the agent can use the link to get the design settings and integrate them into my code,
I got this answer:
Sorry, I'm not able to access external URLs or use MCP to get design details from Figma. I can help you update the HTML and CSS if you provide me with the specific design specifications or the required changes.

Maybe I need to point it to the link in a specific way?

Thank you very much.