Figma and Claude Code: Revolutionizing Collaborative Design

From Figma to Claude Code and Back

Gui Seiz, designer, and Alex Kern, engineer at Figma, demonstrated how it is possible to extract a live interface from production, staging, or localhost in Figma. This interface can then be transformed into editable design frames, allowing for collaborative exploration of variations. The modifications made can be sent back into the code, creating a continuous loop between design and code through Claude Code and MCPs.

Key Takeaways:

• The design handoff is dead — replaced by continuous synchronization. Instead of creating complete design packages with every documented state, AI enables a bidirectional flow between Figma and code. It is possible to extract production code into Figma to see what actually exists, make modifications in Figma, and then send those changes directly back into the code. Gone are the days of "final-final-v3" versions.

• Direct manipulation remains superior to precision requests. While AI can generate designs from prompts, dragging elements in Figma remains the standard for fine-tuning. As Gui notes, “No one wants to ask for the exact hex code or shade of yellow”—it’s just easier to use the color picker.

• Use Figma’s MCP to keep design files in sync with production. The biggest issue in design-code workflows is the lag—production gets ahead of Figma, or Figma contains dreams that were never realized. With MCP, you can programmatically extract any state of production into Figma, ensuring that designers are always working from what actually exists.

• Transform your engineering wiki into executable skills. Every team has that onboarding page: “Here’s what you need to do before pushing a PR.” Alex built a /ship skill that automatically runs pre-checks, pushes to Git, monitors CI, and even fixes minor linting issues—up to five times with a one-hour delay. Take every SOP and turn it into a skill.

• Structure your code for AI assistance. Alex spends 20% to 30% of his time optimizing code structure so that AI can do more with less. It’s not about writing better code for humans; it’s about making your code more readable for AI agents so that each query yields better results.

From Journalist to iOS Developer: How LinkedIn’s Editor Builds with Claude Code

Daniel Roth, editor-in-chief and vice president of content development at LinkedIn, shares how he builds and ships iOS applications to the App Store without writing any code. He describes the workflow he uses with Claude Code—including a dual-agent system where one AI writes the code and another reviews it—along with how he plans features, manages development with branches, and transforms ideas into functional applications.

Key Takeaways:

• Create dueling AI agents to build better code. Daniel uses “Bob the Builder” to generate code and “Ray the Reviewer” to critique it on security and architecture issues. This two-agent system creates checks and balances similar to engineering teams, with Bob focusing on implementation and Ray ensuring quality. The friction between the plans copied between the agents also helps Daniel better understand the generated code.

• Use AI to avoid dropping responsibilities at work. Daniel’s most valuable AI workflow isn’t for coding—it’s for managing his responsibilities as a leader of 400 people. He ends each day by asking Copilot, “What have I dropped?” The AI scans his emails, Teams messages, and documents to identify unanswered messages and pending tasks. This 30-minute evening routine helps him sort out details before leaving work.

• Build custom applications that first solve your own problems. Daniel created “Commutely” to solve his specific problem of whether he should run for the New York subway. As he explains, “It was a perfect product-market fit because I was the entire product.”

• Track features with AI-powered prioritization. Daniel maintains a Claude chat that tracks all feature ideas with estimated build time and potential impact. His prompt asks Claude to “track ideas and provide advice: estimated build time, estimated hours of exchanges, potential impact score on a scale of 1 to 3 for customer satisfaction and growth impact.” This creates a prioritized backlog that he can draw from whenever he has time to build.

• Document everything in Markdown files. Daniel records all conversations with the AI in Markdown files, explaining, “Every time I work with Claude, I say: ‘Write it in a file. Save everything.’” This solves two problems: Claude’s limited context window and his own memory limitations when returning to projects after breaks. This documentation habit creates a knowledge repository he can refer back to later.