Skip to main content

Connect Optimal to Figma's AI Design Agent

Connect Optimal's MCP to Figma and use Optimal study insights to inform and iterate on Figma prototypes with Figma AI agents.

With Optimal's MCP, you can connect Optimal directly to the Figma AI design agent to inform and iterate on Figma prototypes.

For example, imagine you’ve run a prototype test in Optimal. You can ask a Figma agent to review the findings from your study, identify usability issues and suggest improvements. The agent can then help you update your Figma file based on what participants said and did.

This creates a more iterative, research-informed design process, helping you connect participant feedback with design decisions without manually transferring findings between tools.

Getting set up

A Figma admin needs to complete the initial MCP setup before team members can use the integration.

Step 1: Open connector settings

  1. Ensure that you are in Design mode in Figma

  2. Open Agents in the left-side panel.

  3. Select + (Add context) in the bottom-left corner.

  4. Navigate to Connectors.

  5. Select Created by you.

Step 2: Create the Optimal connector

  1. Select + Create connector.

  2. Add a connector name, such as Optimal MCP.

  3. Optional: Upload the Optimal logo in the Icon section to make the connector easier to recognize by your team. Download the icon.

  4. Optional: Add a description to help your team understand what the connector does and when to use it. Example: Connect to Optimal research studies to retrieve participant feedback and insights, and use these findings to inform updates and iterated on Figma designs.

  5. Click Next and add the Optimal MCP URL:

    https://app.optimalworkshop.com/mcp
  6. Select Create to save the connector.

Step 3: Publish the connector

  1. Click the ... menu next to your new connector and select Publish > Connect.

  2. Confirm the connection and authorize read-only access to Optimal.

  3. Optional: Configure access permissions for read-only data, choosing from Approved, Ask to edit, or Block, as appropriate for your team.

  4. Select the ... menu again and select Publish to finalize and make the connector available.

Screen recording of setup below

Using the Optimal MCP with the Figma Agent

Once an admin has configured and published the connector, you can connect it in Figma and use your Optimal research findings to inform prototype updates.

Before you begin, make sure you have:

  • An Optimal account with permission to access the relevant workspace and studies. Optimal MCP uses authenticated access and respects the permissions associated with your Optimal account. Users can only access research they already have permission to view.
    ​

  • Figma file editing permissions for any files you want the agent to update.

The Figma agent is available on all Figma plans. Users with Full seats and edit access can chat with the agent and ask it to make edits, while users with View, Dev, or Collab seats can chat with the agent without making edits to the file.

Step 1: Connect to Optimal in Figma

  1. Ensure that you are in Design mode in Figma

  2. Open Agents in the left panel.

  3. Select + (Add context) in the bottom left.

  4. Navigate to Connectors.

  5. Find the Optimal Connector and click Connect.

Step 2: Add your prompt

  1. In the Figma agent ask for changes box (bottom left), add your prompt.

  2. Reference the Optimal connector in your prompt. Type @ to find and select it.

  3. Identify the study you want to use by pasting its Optimal study link or referring to it by name.

  4. Describe the changes you want the agent to make based on the research findings.

  5. Optional, but recommended: Add the following to your prompt to keep your original design untouched: “Add these updated prototype screens to a new page in this file, side-by-side with the original artboard.”

Example prompt:
"Connect to Optimal Workshop MCP, look at study "Mobile banking app (marketing team)", read the feedback and update the prototype based on the participants' feedback. Add these updated prototype screens to a new page in this file, side-by-side with the original artboard."
​

A recording of the Figma agent in progress

Example of the agent in progress

Step 3: Review the updates

  1. Follow the agent's progress in the chat.

  2. When the agent finishes, review its notes of the changes and the research findings used to inform them.

  3. If you have added the prompt, “Add these updated prototype screens to a new page in this file, side-by-side with the original artboard.”, go to the newly added revisions page to see the updated file.

  4. Select the citations in the agent chat box, where available, to navigate to the relevant artboards.

  5. Review the updated screens and test your prototype flow before sharing or using the changes.

Example: Before & After

Tips and Important Considerations

  • Continuously iterate as you gather additional feedback. Ask the Figma agent to review feedback from new participants and make further improvements to your prototype based on what they say. For example, if you've already updated your prototype based on feedback from 5 participants, you can ask the Figma agent to look at feedback from 10 more and make further improvements based on what they say. This way, you can keep refining your design as you learn more.
    ​

  • Keep a copy of your original file: We recommend adding the following to your prompt to ensure your original file remains unchanged.

    Recommended copy to add to your prompt. "Add these updated prototype screens to a new page in this file, side-by-side with the original artboard."

    Alternatively, if you want to keep an unchanged version for reference, you can duplicate your file before starting with the agent.
    ​

  • Review all updates. If you have editing permissions in Figma, the agent edits your Figma file directly, without a separate approval step.

  • Check prototype interactions. The agent can't update interactions or transitions, so changes to screens may affect how your prototype works. Test the full prototype flow after the agent has finished.
    ​

  • Use specific prompts. Name the study, identify the feedback you want the agent to consider, and describe the outcome you're aiming for.
    ​

  • Revert changes if needed. If the agent has updated the original file, use Figma's version history to restore an earlier version of your file.

Troubleshooting and FAQs

I can’t connect Figma to Optimal. What should I check?

Confirm that the initial MCP configuration has been completed, authentication is successful and the connection is available in your Figma environment. If the issue persists, ask your Figma admin to review the configuration and permissions.

The agent can’t find my study. Why?

Check that you’re using the correct study title and that your Optimal account has permission to access it.

Does connecting MCP give users access to all Optimal research?

No. Optimal MCP respects the authenticated user's existing permissions. Users can only access research data they are authorized to view.

Did this answer your question?