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

> Use Figma's remote MCP server in Piebald.

# Figma

<Tip>
  Requires Piebald v0.3.0 or later. We don't yet support images being returned
  from MCP tools, so tools like `get_screenshot` won't be useful yet (planned
  for v0.4.0).
</Tip>

<Warning>
  This is a workaround while we wait for Figma to officially approve Piebald for
  use with their MCP server.
</Warning>

To use Figma's [official MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) inside Piebald, you'll need to create a Figma app and enable the `mcp:connect` OAuth scope. Unfortunately, Figma's developer UI doesn't display that scope, so you'll need to use a workaround and add it manually by **replaying the app update request from your browser's DevTools**.

<Danger>
  Make sure to save the Client Secret when Figma shows it; it's necessary for Figma MCP
  server OAuth and is only shown once.
</Danger>

1. Go to [https://www.figma.com/developers/apps](https://www.figma.com/developers/apps).

2. Click **Create a new app**.

   <img className="shadow-md rounded-xl" width="500" alt="Figma Create a new app button" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_create_new_app.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=be055be726569f3dc6afeabaff467221" data-path="imgs/figma_mcp_create_new_app.png" />

3. Enter a name for the app.

4. Select an owner.

5. Click **Create app**.

6. Copy the Client ID, and save the Client Secret.

   <img className="shadow-md rounded-xl" width="500" alt="Figma app Client ID and Client Secret" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_client_credentials.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=e7b6b8ebb66100c56911e210cf009e88" data-path="imgs/figma_mcp_client_credentials.png" />

7. Click **Done**.

8. In the configuration dialog that should automatically open, go to **OAuth credentials** in the left-hand sidebar.

9. Under **Redirect URLs**, click **Add a redirect URL**.

10. Enter `https://piebald.ai/desktop/redirect` and click **Add**.

    <img className="shadow-md rounded-xl" width="500" alt="Figma OAuth redirect URL entry" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_redirect_url.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=e4c62dbaaa33ff73b18e78eb77b6dd1c" data-path="imgs/figma_mcp_redirect_url.png" />

11. Go to **OAuth scopes** in the left-hand sidebar.

12. Open your browser's DevTools, and go to the **Network** tab.

13. Enable any random scope, such as **Users** → `current_user:read`.

    <img className="shadow-md rounded-xl" width="500" alt="Figma OAuth scopes with browser DevTools Network tab open" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_oauth_scopes_network.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=937571eb29a3303480c6dc72048c44bb" data-path="imgs/figma_mcp_oauth_scopes_network.png" />

14. In the Network tab, find the update request. The URL should look like `https://www.figma.com/api/oauth/apps/<client-id>`.

15. Copy the request as cURL.

    <Tip>
      You don't need to use `curl`. You can send the request with any HTTP
      client, which is especially more convenient on Windows. Whatever client
      you use, make sure to include all of the headers from the copied request.
    </Tip>

16. Change the scope in the request body to `mcp:connect`.

17. Send the request. For cURL, execute the modified command.

    <img className="shadow-md rounded-xl" width="500" alt="Figma OAuth app update request copied from DevTools" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_update_request.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=34d1620ed6b7b0ae7b9824bfbda4659c" data-path="imgs/figma_mcp_update_request.png" />

    <Info>
      Some values in the cURL command were truncated for brevity in the
      screenshot above; the actual command will be much larger.
    </Info>

18. In Piebald, go to **Settings → MCP Servers** and click **Add → Add Server**.

19. Enter a name for the MCP server, such as `figma`.

20. For **Transport Type**, select **HTTP**.

21. Enter `https://mcp.figma.com/mcp` as the Server URL.

22. Expand **Advanced OAuth Settings**, then paste the Client ID and Client Secret from your Figma app.

    <img className="shadow-md rounded-xl" width="500" alt="Piebald advanced OAuth settings for a Figma MCP server" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_advanced_oauth_settings.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=34be043d84889944d190c32a3f5e88ac" data-path="imgs/figma_mcp_advanced_oauth_settings.png" />

23. Click **Create & Authenticate** at the bottom of the dialog.

    <img className="shadow-md rounded-xl" width="500" alt="Piebald create and authenticate button for a Figma MCP server" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_server_create_dialog.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=27a909acf8cd501040ed8ac976590f66" data-path="imgs/figma_mcp_server_create_dialog.png" />

24. Complete the Figma authorization flow in your browser.

25. Return to Piebald, and check that the MCP server is green.

    <img className="shadow-md rounded-xl" width="500" alt="Piebald MCP servers list with the Figma server connected" src="https://mintcdn.com/piebald/r6uFaS3nO9uaG3fK/imgs/figma_mcp_servers_list.png?fit=max&auto=format&n=r6uFaS3nO9uaG3fK&q=85&s=0c945ecb41845cd33e0c8e463e369433" data-path="imgs/figma_mcp_servers_list.png" />

You should now be able to use the Figma MCP server!