Delarft - Food Ordering App UI Kit

Two Delarft screens on iPhone: the home screen with search, nearby restaurants and categories, and the order tracking screen with a map and order details. — Opening image of the kit on Behance: home and order tracking. Restaurant names, dishes and prices on every screen are sample data.

Delarft is a UI kit for an app that orders food from nearby restaurants and delivers it to the door, made with Futix Lab and released to the Figma community. The kit includes the user flow, wireframes, a style guide, an icon set, prebuilt screens in light and dark themes, and a component system that design teams can adapt quickly.

This article walks through the kit in the order it was made: the problem, the approach, the user flow, the visual foundation, the screens and the packaging for kit users.

01. The problem

The app solves online ordering from local restaurants with delivery to the door, limiting direct contact between people. For designers, the problem is having a complete kit that shortens product design time instead of rebuilding from scratch.

Four goals were set from the start:

Full app flow: the most complete set of tools possible to optimize product design time.
Good design: a focus on design style so the kit is accessible to the majority of users.
UI library components: a system of components that helps designers easily edit and customize the interface.
Easy to use: layers and components classified by category, with guidelines for the design.

Board with the four project goals: Fully app flow, Good design, UI library components, Easy to use. — The four goals of the kit, from the original presentation.

02. The approach: three stages

The team put itself in the shoes of startups and designers to find the right solution, aiming for a high-quality kit that optimizes design time. The work ran in three consecutive stages: getting started with the user flow, wireframing and the style guide; design with the UI, illustrations, icons and the dark theme; packing with an atomic component structure and the guideline.

Timeline of the three project stages: Get started, Design, Packing, with the steps User flow, Wireframing, Set up styleguide, UI Design, Illustration and Iconography, Dark theme, Components set up, Guideline. — The three stages of the project: getting started, design and packing.

03. User flow

The flow starts with onboarding and a welcome screen, then the home screen with location, search, nearby restaurants, categories, banners, favorite restaurants and featured dishes. The ordering flow goes from food category to restaurant and dishes, on to purchase, then to feedback with rating, comments and support. The account flow covers payment management, addresses, order history, support, the favorite list and profile editing. There are also notifications, location selection, basket, wallet, card, address and order tracking.

Delarft user flowchart with the blocks Onboarding, Home, Ordering flow, Account flow, Feedback flow, Purchase and Order tracking. — User flowchart: main flows in red, supporting flows in blue.

High-fidelity wireframes were built for location selection, order details and status, notifications, search, home, restaurant details, adding an address and favorite restaurants before moving to the UI.

Delarft high-fidelity wireframes covering location selection, order details, notifications, search, home, restaurant details and adding an address. — High-fidelity wireframes: layout and content were settled before color.

04. Visual foundation

The global style guide has a red-orange primary palette, green, blue and orange secondaries, yellow and red accents, a ten-step neutral scale and dark-theme variants. Type uses Averta with Headline, Body, Caption and Button scales.

Delarft style guide: Primary, Secondary, Accent and Neutrals palettes on light and dark backgrounds, with the Averta type scale. — Color and type shared by both themes.

The illustrated icon set follows a food theme: dish groups such as burgers, rice rolls, salads, noodles, cakes, drinks and seafood, plus icons for promotions, tickets and the wallet.

Delarft illustrated icon set: dishes, drinks and icons for promotions, tickets and the wallet. — Iconography: food and utility icons in one style.

05. Prebuilt screens

Onboarding has three introduction steps: shop from your favorite restaurant, quick delivery to your doorstep and e-wallet connection, followed by a screen to create an account, sign in or continue with Google.

Four Delarft onboarding screens with illustrations and Next and Get started buttons, plus the sign-in screen. — Onboarding and sign-in.

The home screen shows the delivery location, search, popular restaurants nearby, categories and promotion banners. From there users reach the category grid, the nearby restaurant list with sort, distance and delivery-fee filters, a category detail, favorite restaurants and the restaurant page with dishes and prices.

Eight Delarft screens: categories, home, nearby restaurants, restaurant list, category detail, favorite restaurants and restaurant detail. — Home, restaurant and detail: one card system with image, name, rating and distance.

Checkout gathers the delivery address on a map, the selected dishes with options and an edit action, the subtotal with service and delivery fees, wallet or card payment methods, promotions that fit the order, and location selection.

Four Delarft checkout screens: order confirmation, payment method selection, suitable promotions and delivery location selection. — Checkout: order, payment, promotions and location.

Order status moves through order received, the shipper heading to the restaurant and the order on its way, with a live map, the delivery window, shipper information and order details.

Four Delarft order status screens: order received, shipper heading to the restaurant, on the way with a map, and order details. — Step-by-step order tracking with a map and shipper information.

The two interaction demos below were recorded from the kit prototype.

06. Dark theme

Every screen has a dark-theme version built on the same defined palette: profile with linked accounts, notifications, delivery location, restaurant list, home, menu, categories, favorite restaurants, restaurant detail, location selection, promotions and search.

Delarft dark theme on two tilted iPhones: profile with linked accounts and notifications; below are the delivery location, restaurant list, home and menu screens.

Switching to the dark theme with the same screen structure.

Eight Delarft dark-theme screens: categories, restaurant list, favorite restaurants, restaurant detail, menu, profile, addresses and location selection.

Category, restaurant, profile and address screens in the dark theme.

Dark-theme search screen on a hand-held iPhone, with location selection, promotion, menu and notification screens behind it. — Search, promotions, menu and notifications in the dark theme.

07. Packaging for kit users

The kit has 358 components with variants and 88 sections built with auto layout in an atomic structure, organized into folders such as button, card, header, input, list, navigate, account, address, check-out, dish, notification and restaurant for swapping instances directly in Figma. The accompanying style guide and guideline cover the palette, the type scale and navigation bar variants.

Delarft component board: 358 components with variants, such as restaurant cards, dish cards, notifications and the Figma Swap instance panel. — 358 components with variants, swappable through Swap instance.

Delarft section board: 88 auto-layout sections in an atomic structure, such as nearby restaurants, address detail, rating and order detail. — 88 auto-layout sections, organized atomically.

Delarft style guide and guideline: primary and secondary palettes, the Headline, Body and Caption type scale, and navigation bar variants. — The style guide and guideline shipped with the kit.

08. Status and limits

Delarft is a UI kit, not a released app; restaurant names, dishes, prices and addresses on the screens are sample data. The kit is featured on UI8 and has a free version on Figma Community.

View the kit on UI8 · Free version on Figma Community