{"slug": "how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents", "title": "How Shopify's Design Team Replaced Figma-First Work With AI Agents", "summary": "Shopify's product design studio, led by Marvin Schwaibold, has replaced its Figma-first workflow with AI coding agents Codex and Claude Code, using Figma only as a scratch pad for early ideas before designers build testable prototypes in the terminal. Schwaibold said designers are now \"more editors than ever,\" with the bottleneck shifting from generating options to judgment about which AI-generated output is good enough to ship. The studio operates inside Sidekick, Shopify's conversational AI layer for merchants, while a separate team runs a traditional Figma-to-web redesign of the admin interface.", "body_md": "# How Shopify's Design Team Replaced Figma-First Work With AI Agents\n\nShopify's product design studio now prototypes with Codex and Claude Code instead of Figma. Here's how that workflow actually works.\n\n## What is Shopify’s new AI-driven design workflow?\n\nShopify’s product design studio, led by Marvin Schwaibold, has shifted from a Figma-first process to one centered on AI coding agents like Codex and Claude Code. Designers still sketch early ideas in Figma, but treat it as a scratch pad rather than the final artifact. Instead of handing polished mockups to engineers, designers move quickly into terminal-based tools to generate working prototypes they can test on a phone or computer, iterating in code rather than static layouts.\n\n## TL;DR\n\n- Shopify’s design studio uses Figma only as a **scratch pad** for early ideas, then moves straight into AI coding tools to build testable prototypes.\n- Designers now spend significant time in **Codex and Claude Code** , working from the terminal to turn concepts into functioning demos.\n- The core process hasn’t changed (it’s still iterative and sequenced), but the **tooling shift** means output comes far faster than hand-crafted Figma files.\n- Designers describe their role as shifting toward **curation and editing** : AI handles execution, humans decide what’s good enough to ship.\n- The studio operates inside **Sidekick** , Shopify’s AI layer that lets merchants manage their stores conversationally instead of through traditional dashboards.\n- Shopify runs two parallel design efforts: a **traditional Figma-to-web redesign** of the admin interface, and an**AI-native team** building and refining Sidekick’s conversational UI.\n- Leadership frames this as a deliberate bet: Shopify’s founder reportedly pushed for design to lead a new era of the company, not just support engineering.\n\n## One coffee. One working app.\n\nYou bring the idea. Remy manages the project.\n\n## How does the Figma-to-code workflow actually work?\n\nSchwaibold describes a loop where Figma is used briefly to lay out an idea or explain a concept to an AI agent, and then the real work happens in prototyping tools. Rather than fully designing a screen pixel by pixel, a designer [breaks a problem into smaller subtasks](https://goremy.ai/blog/articles/use-ai-to-build-ui-components-without-figma-a-how-to) and feeds them to an agent one at a time, reviewing and refining the output as it comes back. This back-and-forth replaces much of the manual layout work that used to happen directly on the canvas.\n\nThe output isn’t a mockup. It’s runnable code that can be tested immediately on a real device, which shortens the gap between “idea” and “something you can actually click through.” Figma still gets used when a designer needs to communicate spacing, hierarchy, or visual intent to the AI agent, but it’s no longer the default starting point for most work.\n\n## What does a designer’s job look like when AI writes the code?\n\nAccording to Schwaibold, the human role is less about hand-crafting pixels and more about directing and filtering. He describes designers as “more editors than ever,” selecting which AI-generated outputs are good enough to move forward with and which get discarded. The bottleneck isn’t generating options anymore, it’s judgment: knowing what looks and feels right.\n\nHe’s explicit that AI tools can write functional code he couldn’t write by hand, but that code quality and aesthetic judgment are separate things. The agent executes; the designer decides whether the result meets the bar. That means breaking down complex problems into pieces an agent can handle, reviewing the results critically, and iterating until the output matches an intended look and feel, not just a working feature.\n\n## Why does a company like Shopify restructure design around AI tools?\n\nShopify is about two decades old, and its design organization has historically played a smaller role relative to engineering in a founder-led, engineering-heavy culture. Schwaibold says that changed over the past year, with leadership explicitly framing design as central to a new phase of the company. The product design studio he runs was formed to redesign the company’s most important surfaces: the admin interface, the mobile app (“the green app”), and dashboards, with a growing focus on Sidekick, Shopify’s AI layer for managing stores.\n\nThe practical reason AI tools matter here is speed and scale. Shopify has millions of merchants using its interfaces, and design decisions carry real financial weight. Being able to generate and test working prototypes quickly, rather than waiting on a full design-to-engineering handoff, lets a small design team touch more of the product without sacrificing the ability to iterate.\n\n## What is Sidekick, and how does it change the design problem?\n\nSidekick is Shopify’s AI infrastructure layer, built to let merchants manage their stores through conversation instead of navigating traditional admin screens and dashboards. Schwaibold’s studio operates largely inside this layer, which creates an unusual split inside Shopify’s broader design organization.\n\n- ✕a coding agent\n- ✕no-code\n- ✕vibe coding\n- ✕a faster Cursor\n\nThe one that tells the coding agents what to build.\n\nOne part of the team works in a conventional pipeline: polishing admin interfaces in Figma, then building them out for the web. The other part works on Sidekick itself, using AI-driven interfaces to automate and manipulate the underlying Shopify systems through chat. Schwaibold calls these two efforts “almost paradoxical” because one is about crafting beautiful, deliberate UI while the other is about reducing the need for UI entirely in favor of conversational control. He says the two reinforce each other: better UI generates better AI workflows, and improvements in Sidekick get pulled back into the mobile and admin experience.\n\n## Does using AI tools mean less craft in design?\n\nNot according to Schwaibold, who ran an independent design studio (Molly, based in Brooklyn) before joining Shopify, working with clients including Collins, Apple, and Google. That studio was known for detailed, hand-built interaction design, like custom bounce animations and ambient-lighting-inspired visual effects, built through close collaboration between designers and engineers rather than AI tooling.\n\nHe argues that AI raises the ceiling on what a single designer can execute, since it can write code a designer couldn’t write by hand, but it doesn’t inherently know what looks good. That judgment, he says, is still entirely the designer’s responsibility. The craft detail that defined his studio’s earlier work (custom animations, intentional micro-interactions) doesn’t disappear with AI tools; it just gets directed through a different production process, with the designer still deciding what level of polish is worth pursuing.\n\n## Is this approach realistic for smaller design teams?\n\nThe approach described here assumes a few things that may not generalize everywhere: a team comfortable working in a terminal, familiarity with breaking complex interface problems into agent-sized subtasks, and enough engineering support to integrate AI-generated prototypes into production systems. Shopify’s studio also benefits from being embedded in a company that’s actively building its own AI infrastructure (Sidekick), which gives designers tools and context most teams won’t have in-house.\n\nThat said, the core shift, using Figma for early concepts and AI coding tools for working prototypes, doesn’t require Shopify’s scale. Any team willing to learn basic prompting discipline and accept that AI output needs heavy editorial review can apply a version of this workflow.\n\n## Frequently Asked Questions\n\n### What AI tools does Shopify’s design team use?\n\nThe team uses Codex and Claude Code as its primary AI coding agents, working largely from the terminal to turn design concepts into functional prototypes, with Figma used earlier in the process for sketching and communication.\n\n### Has Shopify fully replaced Figma with AI tools?\n\nNo. Figma is still used, but as an early-stage scratch pad for laying out ideas or explaining concepts to an AI agent, rather than as the primary tool for producing final designs.\n\n### What is Sidekick at Shopify?\n\nSidekick is Shopify’s AI infrastructure layer that lets merchants manage their stores conversationally, automating tasks that would otherwise require navigating admin dashboards and interfaces directly.\n\n### Does AI reduce the designer’s role at Shopify?\n\nAccording to Marvin Schwaibold, AI shifts the designer’s role toward editing and curation rather than hand-crafting every detail. Designers still make final calls on quality, aesthetics, and what ships.\n\n### Why did Shopify invest heavily in design after 20 years as an engineering-led company?\n\nSchwaibold says Shopify’s leadership pushed design into a more central role as the company entered what it considers a new era, treating design as essential to shaping the product’s direction rather than a downstream function of engineering.", "url": "https://wpnews.pro/news/how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents", "canonical_source": "https://www.mindstudio.ai/blog/shopify-ai-design-workflow/", "published_at": "2026-10-27 00:00:00+00:00", "updated_at": "2026-10-27 10:12:58.803124+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "ai-products", "generative-ai"], "entities": ["Shopify", "Marvin Schwaibold", "Figma", "Codex", "Claude Code", "Sidekick"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents", "markdown": "https://wpnews.pro/news/how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents.md", "text": "https://wpnews.pro/news/how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents.txt", "jsonld": "https://wpnews.pro/news/how-shopify-s-design-team-replaced-figma-first-work-with-ai-agents.jsonld"}}