The Shift from Figma to Production Code

Andy Madrick, a designer at Notion, argues that the traditional design handoff is becoming obsolete. While Figma remains a powerful tool for initial exploration and pixel-pushing, it is no longer the definitive source of truth. Madrick has shifted his workflow to treat production code as the primary artifact. He uses a "prototype playground"—a lightweight version of the Notion codebase—to build interactive, functional prototypes that allow stakeholders to experience the product as users would, rather than viewing static mocks.

Owning the "Last Mile" of Craft

AI models are highly effective at scaffolding features and handling standard UI components, but they consistently struggle with the "last mile" of design—the subtle polish, animation, and visual rhythm that define high-quality software. Madrick positions this as the designer's new superpower. He suggests that engineers can take a feature to 80-90% completion, leaving designers to step in and own the final 10-20% through small, targeted pull requests (PRs). This allows designers to ensure the final output matches their vision without needing to build complex backend logic.

Collaborative Prototyping with AI

Instead of relying on static handoffs, Madrick uses AI to turn visual concepts into functional code. He employs a "computer vision" approach: he sketches keyframes or takes screenshots of his desired UI, labels the states, and feeds them to an LLM (like Claude/Composer). By being highly descriptive about the intended motion and layout, he can generate production-ready code that requires minimal manual intervention. This workflow also enables better collaboration with content teams, who can now edit text directly within the functional prototype rather than waiting for a developer to implement changes.

Managing Ambiguity and Trade-offs

Designers must be comfortable with ambiguity, especially when working in a fast-paced environment. Madrick notes that his design files have become "messier" because he no longer feels the need to maintain perfect documentation in Figma. He prioritizes the final product over the design artifact. He also highlights the importance of testing design hypotheses in production; for instance, when shipping a new modal, he used A/B testing to determine which version performed best, noting that sometimes the most "polished" design is outperformed by simpler, more functional alternatives.

Key Takeaways

  • Stop treating Figma as the source of truth: Your canvas is a reference tool; the production code is the reality.
  • Own the last 20%: Use AI to handle the heavy lifting of scaffolding, then step in to polish the final visual and motion details yourself.
  • Use visual prompts: When working with LLMs, a screenshot or labeled sketch is worth a thousand words. Use them to define exact states and transitions.
  • Adapt to your team: Don't force a one-size-fits-all workflow. Ask engineers how they prefer to collaborate—some want to pair on code, others prefer you to submit small polish PRs.
  • Build for content: Create prototypes that allow content designers to edit text in context, eliminating the need for back-and-forth handoffs.

Notable Quotes

  • "These LLMs are not very good at the last mile of design and that's still like our superpower... our engineers will bring it all the way up to 80 to 90% and then that's up to us as designers to just own the outcome."
  • "I think we have no excuse anymore to not be responsible for those changes that we want to see."
  • "My canvas is now the messiest that it has ever been in my entire career and it was freaking me out for a little bit but I totally settled into it now."
  • "I'm a bit of a control freak and so when it comes to like crafting things... I'm pretty fast in Figma still, but I'm actually migrating more and more toward my initial prototypes being in code."