Foodie

Preview

Eleven screens follow one order from the first search to a delivery on its way: Home, Category, Restaurant, Dish, Cart, Cart empty, Checkout and Tracking, then Orders, Favorites and Account. Each screen is drawn in Light and in Dark.

Foodie, 11 screens393 x 852 each, Light and Dark

What does a food delivery flow need from a component library?

Browsing that starts from a cuisine, a card that carries a photo and a delivery time, a menu that scrolls, a basket with quantities, and a delivery you can follow.

A delivery app needs a mode switch, a search field, cards for restaurants, tabs for a menu, steppers for quantities, rows that show a price and a way to show progress. Here they are Segmented Control, Search, Vertical Card, Tabs, Stepper, Price Row and Progress Steps, so the whole order flow draws on the library as it ships.

The Tracking screen draws its delivery timeline by hand in the look of Progress Steps, with a check for each finished step, a ring for the current one and a gray dot for the next. The Orders screen uses the component itself for the same four steps, so the two screens show one state, horizontal on Orders and vertical on Tracking.

On iOS the minimum touch target is 44 pt. The frames pin Platform to ios-md, where platform/min-touch-target reads 44, so that is the size a tap target on these screens starts from. Android would read 48.

How do the Foodie screens read as a delivery app?

Foodie is drawn as a delivery app, and its photo controls are components.

Home opens on Delivery and Pickup, the address, cuisines and a promo card, Category shows the delivery time on each photo, Restaurant has menu tabs and add buttons, and Orders leads with the order in progress.

What are the Foodie screens built from?

Every instance on the eleven light frames, counted once, by the component it comes from. The dark row holds the same instances, so each number is per row.

305 instances sit on the frames. 118 of them are placed directly as Appetite UI components from 22 component sets, and 5 are Lucide icons. Another 182 sit inside those. Placed counts an instance that is not inside another instance, nested counts one that is, and a component is counted by its set name, so every Button variant is a Button. An icon is any instance named in lowercase.

Of the nested instances, 121 are icons inside other components, 33 are helper parts of larger components, and 28 are Badge / Overlay, Button, Radio and Toggle instances inside cards, rows and bars.

Not everything is an instance. 31 shapes are drawn by hand: 8 sit behind the tab bar on four screens, and 12 sit on Tracking, which draws its delivery timeline itself. The other 11 are spread across Home, Restaurant, Dish, Cart, Checkout and Orders.

Counted on October 2, 2026 with a Plugin API script over the eleven light frames of the Foodie page in the Appetite UI Figma file. Hidden layers count, and one instance is hidden. No third party asset is placed on these screens.

Which tokens do the Foodie screens use?

No solid fill or stroke on these frames is a raw color. Each one resolves through a variable, which makes the dark row a mode switch.

The eleven light frames hold 683 solid fills and strokes bound to 31 different variables, and none is unbound. Photographs and six gradients are the only paints that are not a solid color. Every frame sets its modes explicitly, Color Tokens = Light or Dark and Platform = ios-md, so a frame dropped into another file arrives in the theme it was drawn in, and a rebrand at Color Tokens moves all eleven screens.