mcp.to.design is now free.No account needed.Install now →

Overview & Workflow

How mcp.to.design works end-to-end

mcp.to.design bridges your AI tool and Figma through the Model Context Protocol (MCP). You describe a design in natural language, the AI generates HTML/CSS, and the plugin renders it as native Figma elements — frames, text nodes, auto-layout, and more. The workflow is: install the Figma plugin from the Community, add one config block to your AI tool, open the plugin — it auto-connects — then start designing by chatting with your AI. No account, no API key, no remote server required.

Tips

  • Start with render_html to create a design, then use the editing tools to refine it.
  • Use meaningful CSS class names on every element — they become node names in Figma.
  • After rendering, call get_selected_node to retrieve IDs needed for subsequent edits.
  • See the Configuration section for tool-specific setup guides.