To test the interaction between physical buttons and the on-screen UI, the designer used a simple, reprogrammable keyboard from Etsy. The OS recognizes it as a standard keyboard, allowing for rapid, low-cost simulation of custom hardware controls directly within a Figma prototype.
Related Insights
Instead of being limited by off-the-shelf software, designers can dramatically accelerate their process by building bespoke tools. MDS used the AI tool V0 to create a custom bitmap icon builder, enabling rapid prototyping of a unique interactive element.
Vercel's Pranati Perry explains that tools like V0 occupy a new space between static design (Figma) and development. They enable designers and PMs to create interactive prototypes that better communicate intent, supplement PRDs, and explore dynamic states without requiring full engineering resources.
AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).
To rapidly iterate on mobile UI, Lynn sketches screens on physical index cards, which have a similar aspect ratio to a phone. He then photographs these low-fidelity mockups and uses GPT-4's image generation to "upscale" them into high-fidelity designs, bridging the gap between physical brainstorming and digital prototyping tools like Figma.
To create a truly unique value proposition, the "Bored" team prioritized game mechanics that leveraged the combination of physical pieces and a digital surface. For example, one game uses the height (Z-axis) of stackable pieces, an interaction that cannot be replicated on a standard tablet.
The ultimate goal of interface design, exemplified by the joystick, is for the tool to 'disappear.' The user shouldn't think about the controller, but only their intention. This concept, known as 'affordance,' creates a seamless connection between thought and action, making the machine feel like an extension of the self.
Historically, resource-intensive prototyping (requiring designers and tools like Figma) was reserved for major features. AI tools reduce prototype creation time to minutes, allowing PMs to de-risk even minor features with user testing and solution discovery, improving the entire product's success rate.
To rapidly iterate on interactive ideas in code, create your own version of "Command D." Instead of hard-coding values, build a simple control panel with variables for parameters like speed or distance, allowing for easy adjustment and testing of multiple variations.
The panel suggests a best practice for AI prototyping tools: focus on pinpointed interactions or small, specific user flows. Once a prototype grows to encompass the entire product, it's more efficient to move directly into the codebase, as you're past the point of exploration.
A joystick has 'perceived affordance'—its physical form communicates how to use it. In contrast, a touchscreen is a 'flat piece of glass' with zero inherent usability. Its function is entirely defined by software, making it versatile but less intuitive and physically disconnected compared to tactile hardware controls.