A month ago we released the Figma MCP powered imports, it was using the local Figma MCP in a clever way to more accurately bring Figma Components into Magic Patterns.
Since then, Figma released their Remote MCP server, which meant we no longer needed to rely on a locally installed Figma Desktop app and our clever hack of using our Chrome extension to talk to it.
After we got the new way to work in our app, and after early testing, the only disadvantage to remote mcp was timeouts on large component imports. But that seemed like an edge case for advanced users. So now was the time to think about the user interface.
A few questions we had in mind:
- How do we roll this out to our many production users?
- Should we still allow the old way of local MCP server?
- What language should we use to communicate this?
To solve this, I used Magic Patterns. I spent 5 minutes writing a prompt explaining what we want and provided a screenshot of the existing design.
"I have the following screen for our figma import and we added mcp import. Originally it was a local mcp server only import and required the figma desktop app and some setup. Now it only requires a dev or full figma account and it talks to the remote mcp server. The remote mcp server should be the default, but we should also be able to let the user choose the local mcp server that requires more setup. Help me sketch a ui that does that."
I then opened 4 different tabs of Magic Patterns and pasted in the same prompt and let it bake. Meanwhile, I went to my whiteboard and drew a design the old fashion way.
Option 1 - View in Magic Patterns
Option 2 - View in Magic Patterns
Option 3 - View in Magic Patterns
Option 4 - View in Magic Patterns
Option 5 - Whiteboard sketch
As you can probably guess, the first one was the best of the bunch. It gave me a lot of good ideas like reminding me users need to be re-authenticated with Figma to grant them a permission to talk to the remote mcp server.
It also made me thing of the old “progressive disclosure” principle of design and put the entire Local MCP behind an “Advanced” section.
Final design:
