From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)

What It Covers

Figma engineers Gui Seiz and Alex Kern demonstrate bidirectional workflows between Figma and Claude Code using the Figma MCP server, showing how design and code can stay synchronized without manual handoffs, enabling designers and engineers to collaborate on live states rather than static artifacts.

Key Questions Answered

• •Figma MCP as sync bridge: Use the Figma MCP server connected to Claude Code or Codex to programmatically pull live app states directly into Figma frames. This eliminates the chronic divergence between production code and design files, letting designers manipulate real UI states with direct drag-and-drop precision rather than describing changes in words.
• •Code-to-Figma state extraction: When a codebase contains UI states that have no corresponding design file representation, engineers can prompt Claude Code to identify and export all variants simultaneously. For example, sending five sign-up flow states into a single Figma document, laid out side by side, gives design collaborators an accurate working canvas without any manual screenshotting or recreation.
• •Custom slash-skills to automate engineering toil: Alex Kern writes personal Claude Code skills, including a slash-ship command that runs preflight checks, executes Bazel builds, pushes to Git, monitors BuildKite CI, auto-fixes minor lint issues across up to five retry attempts with a one-hour timeout, and alerts on credential exposure — all without the engineer watching the terminal.
• •Convert internal Wiki SOPs into team-wide skills: Every engineering onboarding document, pre-PR checklist, or best-practice guide buried in Confluence or GitHub can be converted into a Claude Code skill and committed to the shared repository. This transforms institutional knowledge from passive documentation into automated, consistently enforced workflow steps accessible to the entire team by default.
• •Parallel Claude Code instances for throughput: Running two to five simultaneous Claude Code sessions on separate workstreams — one reconciling design-to-code changes, others writing specs, answering codebase questions, or handling exploratory tasks — multiplies effective engineering output without context-switching. This approach treats the AI as concurrent workers rather than a single sequential assistant.