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

# Figma

> Localize Figma designs and UI content using Figma's remote MCP server and Ollang.

# Ollang MCP + Figma

<Note>
  Figma operates the hosted MCP server separately from Ollang. The remote server is preferred for shared workflows; Figma's desktop/local server is available at `http://127.0.0.1:3845/mcp` but is not required here.
</Note>

Use [Figma's remote MCP server](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) with Ollang MCP to turn design context into localization work.

## Why Figma + Ollang?

By connecting Figma and Ollang, your AI assistant can:

* Scope a request to a Figma file or selected node
* Extract design context for UI localization
* Create Ollang document translation orders for locale content
* Keep translated UI strings aligned with a design handoff

## Setup

The remote Figma server is link-based. Pass a Figma file URL or a **Copy link to selection** node URL in your prompt to scope the request.

<Tabs>
  <Tab title="Claude Desktop">
    Add both remote servers through your MCP settings:

    ```json theme={null}
    {
      "mcpServers": {
        "ollang": {
          "url": "https://mcp.ollang.com/mcp"
        },
        "figma": {
          "url": "https://mcp.figma.com/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Claude Code">
    ```bash theme={null}
    claude mcp add --transport http ollang https://mcp.ollang.com/mcp
    claude mcp add --transport http figma https://mcp.figma.com/mcp
    ```

    Add `--scope user` to the Figma command to make it available in all projects.
  </Tab>

  <Tab title="Cursor">
    ```json .cursor/mcp.json theme={null}
    {
      "mcpServers": {
        "ollang": {
          "url": "https://mcp.ollang.com/mcp"
        },
        "figma": {
          "url": "https://mcp.figma.com/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Devin">
    Add both remote servers in **Settings > Integrations > MCP Servers**:

    ```json theme={null}
    {
      "mcpServers": [
        {
          "name": "ollang",
          "url": "https://mcp.ollang.com/mcp",
          "transport": "http"
        },
        {
          "name": "figma",
          "url": "https://mcp.figma.com/mcp",
          "transport": "http"
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Replit">
    ```json .replit-mcp.json theme={null}
    {
      "mcpServers": {
        "ollang": {
          "url": "https://mcp.ollang.com/mcp",
          "transport": "http"
        },
        "figma": {
          "url": "https://mcp.figma.com/mcp",
          "transport": "http"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Lovable">
    Add both remote servers via **Settings > Integrations > MCP Servers**:

    ```json lovable.json theme={null}
    {
      "mcp": {
        "servers": {
          "ollang": {
            "url": "https://mcp.ollang.com/mcp",
            "transport": "http"
          },
          "figma": {
            "url": "https://mcp.figma.com/mcp",
            "transport": "http"
          }
        }
      }
    }
    ```
  </Tab>
</Tabs>

## Figma MCP Capabilities

| Capability         | Description                                                |
| ------------------ | ---------------------------------------------------------- |
| Link-based context | Scope a request with a Figma file URL or selected-node URL |
| Remote server      | Connect to Figma at `https://mcp.figma.com/mcp`            |

## Example Workflows

### Localize a design handoff

```
Use this Figma file URL: https://www.figma.com/design/FILE_ID/example.
Identify the UI strings that need localization, upload them to Ollang,
and create French, German, and Japanese document translation orders.
```

### Translate a selected component

```
Use this Copy link to selection node URL from the settings screen:
https://www.figma.com/design/FILE_ID/example?node-id=NODE_ID.
Extract its user-facing strings and prepare an Ollang order for Spanish
and Portuguese while preserving placeholders.
```

### Check locale expansion

```
Review the selected checkout flow in Figma and identify labels likely to
expand in German. Create an Ollang custom instruction for concise UI copy
and use it for the related locale-file translation order.
```