Intercom Prototypes in Code Using Figma and Claude
The design team at Intercom is now prototyping directly in code by using a multi-tool workflow. A team member detailed a process that connects Figma's Code Connect feature with the Claude AI model. This combination allows designers to accelerate the shipping process by bridging the gap between design mockups and functional code.
- The workflow leverages Figma's Model Context Protocol (MCP), an open standard that allows AI tools like Claude Code to access and understand design files. This connection is established through Figma's Code Connect feature, which maps design components to their actual code counterparts in a repository, rather than just auto-generating new code. - This process represents a shift in creative collaboration, positioning AI as a co-creator that can handle mechanical tasks like generating boilerplate code, allowing designers and developers to focus on creative intent and problem-solving. This model of human-AI partnership often reframes the creative professional's role into one of a curator or director of the AI's output. - The use of a command-line interface (CLI) to interact with Claude is part of a broader trend in AI-assisted development. Tools like Anthropic's Claude Code, Google's Gemini CLI, and open-source projects like Aider are bringing agentic AI capabilities directly into the terminal, moving beyond simple code completion to handle complex, multi-file tasks. - This multi-tool approach, chaining Figma (design), Claude (code generation), and GitHub (version control), is indicative of emerging node-based AI workflows. Creatives and builders are increasingly connecting specialized AI models for different tasks—like text, image, and code generation—into a single, cohesive pipeline to achieve more complex results. - The question of authorship is central to these new workflows; when a design is translated by an AI, creativity becomes a distributed activity between the human's intent and the model's generative capabilities. This raises new questions about agency and ownership, especially when the AI produces novel or unexpected outputs that diverge from the initial human input. - Anthropic's Claude models are well-suited for these tasks due to their large context windows, which can exceed 200,000 tokens. This allows the AI to hold extensive information—such as an entire component library or design specification—in memory to generate more accurate and context-aware code. - To function, this specific workflow requires an Organization or Enterprise plan for Figma, as the necessary Code Connect feature is only available on these tiers. The connection between the design and code is maintained over time, requiring updates to the mappings when components are refactored.
