🍕 Pizza Lab — A

🍕 Pizza Lab — A Visual Pizza Design Studio

🔗 Live Project: https://sweat-bunch-55404838.figma.site/ 🔗 Figma Community File: https://www.figma.com/community/file/1649547758127634830

The Problem Digital food ordering is often a static, uninspiring experience. You click checkboxes on a text list and just hope the food looks good when it arrives. I built Pizza Lab to solve this by turning the ordering process into an immersive, highly visual design experience.

The Workflow: Built with Figma Make & Weave To bring this highly interactive UI to life, I utilized a full Figma AI workflow:

- Asset Generation: I used Figma Weave to generate the highly realistic pizza layers (crusts, sauces, cheeses, toppings) and the chef's expressions. I then processed these and hosted them via Cloudflare R2 for perfect top-down stacking.

- Code Generation: I designed the core interface components—including the ingredient carousel, the recipe card, and the dynamic feedback module—in Figma. Using Figma Make, I prompted the designs directly into fully functional, production-ready UI code. This allowed me to focus heavily on the complex app logic (state management, CDN integration, and Framer Motion animations) rather than writing boilerplate code.

Key Features:

- Live Layer System: Four stacked layers (Crust → Sauce → Cheese → Toppings) with a live top-down orthographic preview.

- Ultra-Realistic Details: Features per-ingredient random rotation for visual variety, a subtle heat shimmer animation on the pizza, and realistic drop shadows.

- Keyboard First: Fully navigable via keyboard (↑/↓ to switch layers, ←/→ to navigate the smooth-spring ingredient carousel, Space to select).

- Dynamic UI: 4 table textures (Dark Marble, Walnut, Oak, Light Marble) where the UI text automatically adapts its color to remain readable on both light and dark surfaces.

- Chef Feedback: An animated chef character reacts to your ingredient pairings (e.g., looks disappointed at pineapple), featuring quotes from famous Neapolitan pizza masters.

- Export & Share: Randomize gourmet combinations, save the exact recipe as a JSON file, or encode the exact pizza state into a shareable URL!