From Concept to Code-Ready: Engineering the PizzaBot Geneva Mobile App in Figma
Building a Scalable Design System
An app dedicated to custom automated pizza making requires thousands of potential UI permutations. To keep the project organized and scalable, I built a robust, production-ready design system from scratch.
- Reusable Components & Variants: I atomized the UI. Buttons, navigation bars, ingredient selectors, and order status cards were built as master components. Using Figma Variants and Boolean properties, I could toggle between states (e.g., default, hovered, active, disabled) instantly, ensuring 100% visual consistency across more than 40 app screens.
- Figma Variables (Tokens): To prepare the design for real-world development, I implemented Figma Variables for light/dark modes, spacing, and typography scales. If the brand color needed a tweak, I only had to change it once in the variable panel to update the entire ecosystem.
Advanced Prototyping Features Used:
- Interactive Components: I used micro-interactions within components (like toggling an ingredient on/off) so the prototype would respond instantly to user touch without needing to wire up dozens of separate artboards.
- Conditional Logic & Expressions: By setting up “if/then” rules in Figma, the prototype could actually calculate math. For example, if a user added extra truffles or local Gruyère cheese, the total price updated dynamically at the bottom of the screen.
The Ultimate Milestone
Completing the PizzaBot Geneva mobile application was the perfect culmination of my UX/UI Certification. It allowed me to showcase not only my strategic thinking and user empathy but also my technical mastery of modern design tools.