Skip to content

Platforms

Your brand, inside iOS 27 and Material 3.

The native components are already in the file, in your colors and type. One dropdown puts them back to the platform baseline, accessibility included.

Get lifetime accessHow the tokens reach the code
An iOS food delivery home screen: a greeting over a street photo, a search field, category chips and nearby restaurants above the floating tab barAn iOS food delivery home screen: a greeting over a street photo, a search field, category chips and nearby restaurants above the floating tab bar
An iOS lock screen with a Live Activity from Appetite Delivery: arriving in 12 minutes, the courier 3 stops awayAn iOS lock screen with a Live Activity from Appetite Delivery: arriving in 12 minutes, the courier 3 stops away
The same food delivery home screen in Material 3, with the navigation bar flush along the bottom edgeThe same food delivery home screen in Material 3, with the navigation bar flush along the bottom edge

Both platforms

Does Appetite UI support both Material 3 and iOS?

Yes, Appetite UI supports both Material 3 and iOS in one Figma file. The file holds 174 components and 1,984 variants, all reading from the same 589 variables in 6 collections, so one brand change reaches both platforms.

How Material 3 and iOS differ

Each platform keeps the anatomy, spacing and behavior its users already know. Geometry follows the platform too: the minimum touch target is 44 on iOS and 48 on Android, and one component obeys both.

What Material 3 and iOS share

Color, type, spacing and radius are defined once, and both platforms read them in light and dark mode. The Platform Bridge maps Apple's and Google's own color, shape and type size roles onto your tokens, and its System mode returns the values they publish.

Your engineer can get Figma design tokens into SwiftUI and Jetpack Compose from one W3C Design Tokens source, with Flutter and CSS alongside.

Platform Bridge

How do I return a screen to the native look?

Set the Platform Bridge mode on the frame to System. Every slot returns the value Apple or Google publishes, and Brand puts your brand back, with nothing redrawn.

How the Platform Bridge works
An iOS Settings screen with a profile row, General and Notifications groups, toggles and a floating tab bar whose selected tab carries the tintAn iOS Settings screen with a profile row, General and Notifications groups, toggles and a floating tab bar whose selected tab carries the tint
iOS 27iOS/tintColor is brand/base, #155DFC, in Brand mode and systemBlue, #007AFF, in System mode. The selected tab carries it.
A Material 3 Settings screen with a profile row, section labels, switches with a check in the handle and a navigation bar with its active indicatorA Material 3 Settings screen with a profile row, section labels, switches with a check in the handle and a navigation bar with its active indicator
Material 3M3/sys/color/primary is brand/base, #155DFC, in Brand mode and the Material baseline primary, #6750A4, in System mode. The section labels, the switches and the selected tab carry it.

Inside the file

The platform work is a live collection, not a folder of screenshots.

Two mirrors and one bridge between them, so one dropdown puts everything back.

An iOS alert asking to allow notifications, with Not Now and Allow, Allow filled in the brand blue

Apple, iOS 27

Fifteen system colors with real values in both modes, mapped so your accent lands where Apple puts one.
A Material 3 dialog asking to allow notifications, with Not now and Allow as text buttons in the brand color

Google, Material 3

Thirty two Material color roles mapped to your brand, within the documented Material conventions.
The same notifications dialog twice, as iOS draws it and as Material 3 draws it

The Platform Bridge

A collection with two modes: switch it and the whole file returns to the platform defaults.

Limits

Where the branding stops, and why stopping is the point.

Where the platform does work you cannot see.

System semantic colors

They shift with contrast settings, dark mode and vibrancy, so only the tint slot is safe to brand. Repaint the rest and the app ignores a user's accessibility settings.
The same iOS settings in light and dark mode. Labels, secondary labels and separators change with the mode, the tint stays your brand in both.

Liquid Glass internals

The material is calculated from what moves behind it, so a color pass that looks right in a still frame breaks in motion.
A photo grid and a transaction list under the Liquid Glass tab bar. The bar takes its color from whatever passes under it.

Conventions and gestures

Back behavior, sheet heights and tap targets come from the system. Change them and you buy a distinctive screen with a confused user.
A dish sheet at its medium detent over the photo, and a pushed Filters screen whose back button and swipe come from the system.
Carrying real values is only worth doing if you are also honest about where they should stop.

Your next rebrand is one edit.

Get lifetime accessOpen the Figma preview