How I Built Pocket FM's Prototyping Playground
Summary
Pocket FM's design team built a functional prototyping playground in under a week by leveraging their existing design system and codebase rather than building from scratch. The key: designers embedded themselves in the tech stack, using AI tools like Codex for reliable component testing, while maintaining all design documentation in Figma to bridge the gap between design and production.
Key Takeaways
- Ship fast by building on existing infrastructure: Pocket FM's playground went from concept to v1 in less than a week by requesting the tech team's design system and GitHub repo instead of rebuilding from scratch.
- Centralize design documentation in one source of truth: Store all flows, empty states, components, and developer notes in Figma so designers and developers reference the same production-ready specs without context switching.
- Use AI tools with simulator capabilities for reliable component testing: Codex was chosen over alternatives specifically for its reliability with computer use and simulator integration to test app behavior in production environments.
- Adopt a tight-knit team culture for faster iteration: India's design teams (particularly in Bangalore) operate with family-like bonds where designers collaborate outside work hours on product ideas and innovations, accelerating learning cycles.
- Focus on niche-market UX patterns as competitive advantage: Indian apps (quick commerce, audio entertainment) are defining new UX standards that will influence global products, creating opportunities for designers to shape industry-wide patterns.
Related topics
Transcript Excerpt
How long did it take you to just get the version one of the playground out? >> No, honestly it was like less than a week. All I did was the first version I asked the tech guys, hey, can you give me the design system? GitHub rep. You could have just said, I don't care about their codebase. I'm going to build it from scratch myself. Use whatever language I want and then just make sure that the look is the same. So why did you want that parody? >> I think I just want to save time. Like they've already built something. There's a entire front-end team sitting and building an experience. I'd want to build on top of that. >> Before you started even building out this playground, is there any way you can show me what did that look like? Every single thing was on Figma. So for example, your designs,…