--- title: Figma remote MCP connector slug: agent-platform/docs/figma-remote-mcp-connector createdAt: 2026-11-02T00:00:00.000Z --- The Figma remote Model Context Protocol (MCP) connector in Mark (Optimizely Agent Platform) brings your Figma designs into your Mark workflows. Use it to turn approved designs into Optimizely Web Experimentation test variations and Optimizely Content Management System (SaaS) pages. Designers and marketers move from design to launch without waiting for a development sprint. :::hint{type="info"} **Note** Mark (Optimizely Agent Platform) offers two Figma connectors, **Figma** and **Figma MCP**. The **Figma** connector is managed by Optimizely and built on the Figma REST API. Only Figma REST API rate limits apply to it. For details, see [Figma connector tools](docId:7Z3a0J9f7d9o3HeWDIS9Y). The **Figma MCP** connector, described in this article, uses Figma's official MCP server. Figma manages the server, which includes functionality that the REST API does not provide. Figma has stated that usage-based pricing may apply to its MCP server. See the [Figma MCP server documentation](https://developers.figma.com/docs/figma-mcp-server/) for current details. ::: First, a Mark [administrator](docId\:pe0pbUJveWrG8ewvZWDRE) must [connect the Figma remote MCP to Mark](docId\:qgLFQ6SrXrTFeV73tTWcg). After the administrator adds the MCP server, individual Mark [users](docId\:L0Ntt9JQmG6fQIJK_Y7C7) and [agent builders](docId\:HOJ_6dibwNf8Qz7WMIDie) log in to Figma to access their designs from Mark. Administrators add the Figma remote MCP only once. ## Use cases Use the Figma remote MCP connector to include Figma designs in broader Mark workflows. Before you start any use case, complete the following: - Confirm that the Figma account connected to Mark has access to the Figma file. - Copy the link to the specific Figma frame you want to use. Most read tools require a link that contains `node-id` in the URL. - Open pages that require sign-in in your own browser. The Visual Editor automated browser cannot log in. ### Turn a Figma design into a test variation Run an approved Figma design as a Web Experimentation variation without a development ticket. For example, a designer hands over a hero frame, and you launch it as a test variation within hours instead of a sprint. Figma remains the reference for the design. Keep the following in mind: - Figma generates starter code in React and Tailwind. Convert it to HTML and CSS. - Large layout rebuilds sometimes require custom code. - Desktop and mobile layouts require separate frames. ### Create design variants from the live control page Generate two or three on-brand variations that match the page that is live. Stakeholders review realistic test arms before anyone builds them. Keep the following in mind: - Generated images use paid Figma AI credits. - Approved variants still require the steps in [Turn a Figma design into a test variation](docId\:qgLFQ6SrXrTFeV73tTWcg). ### Create server-side CMS content variations from Figma Test a Figma variant through Content Management System (CMS) content with no page flicker. Server-side tests run faster, protect search engine optimization (SEO), and let editors maintain variations in the CMS. This approach works best for copy and image tests. Keep the following in mind: - Variations work only on pages and experiences, not on standalone blocks. - Publish the default version before you publish the variation. ### Build a Visual Builder page from a Figma landing page Build a campaign landing page designed in Figma from existing CMS components. The result is a draft page that matches the design and is ready for editor review. No developer is needed when the components already exist. Keep the following in mind: - Sections with no matching CMS component require you to first complete [Create CMS content types and display templates from Figma components](docId\:qgLFQ6SrXrTFeV73tTWcg). - Confirm which content types and blueprints your CMS has before you start. ### Create CMS content types and display templates from Figma components Turn a component that the design team adds in Figma, such as a pricing card with light and dark themes, into an editable CMS block that matches it. Figma, code, and the CMS stay in sync, and editors get the same options that designers use. Keep the following in mind: - A developer must still build the code component. - Link the component back to Figma after the developer builds it. ## Connect the Figma remote MCP to Mark :::hint{type="info"} **Note** The first person to connect a third-party service to Mark should be an administrator of that service. Administrator access installs the complete set of tools, so Mark adds every available tool. If a non-administrator connects the service first, Mark installs only the tools that account can access. ::: Mark administrators connect and grant access to Figma from Mark. After granting access, administrators select which tools to enable in Mark and optionally customize their display names. ### Add Figma connection As a Mark administrator, complete the following steps: 1. Go to **Connectors** in Mark. 2. (Optional) Enter *Figma MCP* in the search bar to filter the connectors list. 3. Click **Connect** on the **Figma MCP** tile. ![Screenshot of Connectors where Figma MCP is entered in the search field and the Figma MCP card shows a Connect option](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6jEm4Jxmmiy2lVTgJlWLe_connect-figma-tool.png) 4. Log in to your Figma account. 5. Click **Agree & Allow Access**. ![Screenshot of the Figma consent window where Agree & Allow Access grants Optimizely access to your Figma account](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/s5Jz1kKhTUs0yTfFRg1Ju_figma-allow-access.png) A confirmation message displays and you can close the pop-up window. ### Configure Mark tools After [adding the Figma connection](docId\:qgLFQ6SrXrTFeV73tTWcg), Mark prompts you to select which tools to enable and optionally customize their display names. As a Mark administrator, complete the following steps: 1. Deselect any tools you do not want to add to Mark. 2. (Optional) Update any tool's display name. 3. Click **Finish**. ![Screenshot of Connect Remote MCP Provider where 42 of 42 Figma tools are selected and listed with their original names, display names, and descriptions, and Cancel and Finish are available](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/yABDfyBlRoyguFlZ_0tC2_add-figma-tools.png) The Figma MCP tile displays **Connect** on the **Connectors** tab for Mark users to authenticate with their personal accounts. To update the available tools or names, see [Update tools](docId\:qgLFQ6SrXrTFeV73tTWcg). ## Authenticate with Figma Each Mark user and agent builder logs in to Figma individually to access their Figma data from Mark. User-level authentication ensures you access only the data your Figma account is authorized to view. :::hint{type="info"} **Note** Before you begin, confirm that a Mark administrator has connected the Figma remote MCP to Mark. Until an administrator connects it, the Figma MCP tile displays **Contact admin** instead of **Connect** and you cannot select it. ::: To authenticate, complete the following steps in Mark: 1. Go to **Connectors**. 2. (Optional) Enter *Figma MCP* in the search bar to filter the connectors list. 3. Click **Connect** on the **Figma MCP** tile. 4. Log in to Figma. After you log in to Figma, the Figma connector tools your administrator added become available in Mark [chat](docId\:dtNBEttEGVvkhNkwNypLM), [agents](docId\:w7MSVijPnuFqu4nXDo_bq), and [workflows](docId:2HD0fUsIsfdek516VtN9l). ## Figma remote MCP tools The Figma connector tools are available in Mark after an administrator [connects the Figma remote MCP to ](docId\:qgLFQ6SrXrTFeV73tTWcg) and you [log in to Figma](docId\:qgLFQ6SrXrTFeV73tTWcg). The available tools depend on which tools your administrator enabled. For a full list of available tools and actions, see the [Figma MCP server documentation](https://developers.figma.com/docs/figma-mcp-server/) in Figma. ## Update tools To rename, add, or remove tools, a Mark administrator must delete the Figma tools registry and re-add it. To do so, complete the following steps: 1. Follow the steps in [Delete a tool registry](docId\:SXjD3qqg-0gS2g4KajfyO). 2. [Add the Figma connection](docId\:qgLFQ6SrXrTFeV73tTWcg). 3. [Configure tools](docId\:qgLFQ6SrXrTFeV73tTWcg). :::hint{type="info"} **Note** If you use Opti ID, administrators can turn off generative AI in the Opti ID Admin Center. See [Turn generative AI off across Optimizely applications](docId\:X5U0kKD2azV5cIdNqwGNj). :::