How to work with AI in UX Design.
Challenge
Matthew McLemore accepted the challenge of designing the Halo Waypoint UI as a mobile-first prototype for a hire review. He aimed to bring the interface to life with micro-interactions, parallax scrolling, and strict adherence to touch-target, spacing, and gesture guidelines.
Process
Use Figma to create a design system that includes color styles, typography, iconography, and states, as well as micro-animations, utilizing prototyping features such as smart-animate and after-delay. He conceptualized responsive auto-layout stacks, simulated parallax with layered scrolling groups, interactions, taps for navigation, drags for pull-to-refresh, and staggered reveals. To make it truly challenging, Matthew accomplished all this, starting with a finely crafted UX Development Prompt.
Results
Matthew worked in FIGMA to deliver a rapid, interactive Halo Waypoint prototype: a mobile-first layout with immersive parallax effects, dynamic micro-animations covering all key screens featuring detailed UI elements—challenge cards, profile interactions, real-time messaging, and customizable settings—while aligning with iOS guidelines and Halo’s aesthetic. The outcome provided a fully functional prototype to demonstrate his ability to create engaging gaming interfaces that could attract potential clients.
What did UI design look like a few years ago?
While at CBS Interactive, a Microsoft recruiter contacted me about a designer role. As a 10-year Xbox FPS Overlord and former leader of the Reaper Squad Xbox Clan, I was stoked with the chance to deep layer this idea to life. Back then, we used Adobe Illustrator and Photoshop—no high-retina displays to worry about yet. I was designing an iPhone interface for the test, aiming to make it pop with beveled glass and sparkling shines inspired by our clan’s website I designed a few years earlier. But a crunch on the CBS Entertainment app meant I never finished the bottom or sent it. Recently, I revisited the project to try Figma’s new "Make" feature. It was a blast, though learning to iterate on designs through AI without breaking things took some work. The prototypes below are the results of my rapid AI-driven session.
How to Create Rich Rapid prototypes In FIGMA.
AI Prototyping in Action
Watching this prototype come to life with the help of some heavy prompting and artificial intelligence is thrilling. We've come a long way since the early days of smartphone design. The previous Photoshop version, with its stunning realism, was a true work of art—creating it felt like painting, and as an artist, that process was deeply satisfying. This version is more in line with out-of-the-box development tool kits. We've sacrificed some of that incredible sparkle to design for cross-device compatibility and easy upscaling. What we're seeing now is game-changing: what once took hundreds of layers and weeks of work in Photoshop, we now achieve at a much faster pace. This opens the door for incredible innovation and leads to more collaboration by those outside design departments.
How to use AI Prompting and training to include Apple UX Design Guidelines in UX Products.
