--- title: Introduction description: Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system: what it includes, what it covers and where it fits with Apple and Google. group: Get started source: https://www.appetiteui.com/docs/introduction dateModified: 2026-10-08 --- # Introduction Updated: October 8, 2026. Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system. One token source drives Apple and Material components in light and dark mode, and exports to SwiftUI, Jetpack Compose, Flutter and CSS. Apple and Google publish the platform baseline; Appetite UI is the token layer that puts your brand on it. ## What is Appetite UI? Appetite UI is a Figma UI kit made only for iOS and Android apps and built like a design system. The components, the token system and the platform-aware native elements all run on Figma's own variables, so nothing needs a plugin, and every component value reads a token. ![A collage of app screens built from Appetite UI components: a blue finance home with balance, quick actions and recent transactions in the middle, with cards, chat, a task list and workout analytics on the left, and an inbox, a task detail and an unfolded iPhone Duo portfolio screen on the right.](https://www.appetiteui.com/images/docs-intro-screens.webp) ## Which platform features does the kit cover? iPhone Duo, the Dynamic Island, charts and tables, a Tasks app, Liquid Glass in three styles and a Focused state on the form controls. The table names each area and the page that explains it. | Area | What the kit holds | Read more | | --- | --- | --- | | iPhone Duo | Outer and inner display screens for 8 apps in light and dark, a vertical control rail and two Platform modes. | [iPhone Duo screens](https://www.appetiteui.com/docs/screens-iphone-duo), [Platform modes](https://www.appetiteui.com/docs/platform-bridge#platform-modes) | | Dynamic Island | States, system presentations and expanded layouts for Live Activities. | [Dynamic Island on the iOS page](https://www.appetiteui.com/docs/ios#dynamic-island) | | Charts and tables | 16 chart components on a categorical palette with chart tokens, plus Legend and Sparkline. Table with a pinned column and typed cells. | [Chart](https://www.appetiteui.com/docs/chart), [Table](https://www.appetiteui.com/docs/table), [Colors](https://www.appetiteui.com/docs/colors) | | Tasks app | 10 screens in light and dark: My work, Board, Table, Timeline, Task, Project, Inbox, Search, Filters and New task. | [Tasks screens](https://www.appetiteui.com/docs/screens-tasks) | | Time and Color Picker | A time slot list, quick durations, a spectrum and a hue slider in the Date Picker card. | [Picker](https://www.appetiteui.com/docs/picker) | | Liquid Glass | Three effect styles, Clear, Regular and Tinted, the stops of the iOS transparency setting. | [Effects](https://www.appetiteui.com/docs/effects#glass) | | Focus and states | Focused on Button, Checkbox, Radio and Toggle, Error on Checkbox, a ring spinner for every Loading state, and the bg/raised token for sheets and menus in dark. | [Button](https://www.appetiteui.com/docs/button), [Checkbox](https://www.appetiteui.com/docs/checkbox), [Effects](https://www.appetiteui.com/docs/effects#focus), [Colors](https://www.appetiteui.com/docs/colors) | | Apple system dialogs | Passkey, Permission Alert and Review Prompt, plus brand marks in 14 groups. | [iOS](https://www.appetiteui.com/docs/ios), [Assets](https://www.appetiteui.com/docs/assets) | | Company logos | Twelve placeholder companies as a symbol or a lockup, in color or mono. | [Assets](https://www.appetiteui.com/docs/assets) | | Motion and progress | Motion shown as keyframe filmstrips, and Typing Indicator in its own section. | [Motion](https://www.appetiteui.com/docs/motion), [Progress](https://www.appetiteui.com/docs/progress) | | Shape and type | Headings in Inter Display with tracking per size, radius steps of 40 and 48, chips and search as capsules, cards at radius 24. | [Typography](https://www.appetiteui.com/docs/typography), [Dimensions](https://www.appetiteui.com/docs/dimensions), [Chip](https://www.appetiteui.com/docs/chip), [Card](https://www.appetiteui.com/docs/card) | | Components after current apps | Drawer, text input, swipe actions and top bars, Composer in Input, a compact List row, Table Layout and Top Bar size md. | [Input](https://www.appetiteui.com/docs/input), [List](https://www.appetiteui.com/docs/list), [Top bars](https://www.appetiteui.com/docs/top-bars), [Drawer](https://www.appetiteui.com/docs/drawer) | | iOS 27 | Status bar glyphs, Toggle, Slider and Tab Bar follow the iOS 27 kit, and Action Sheet is the glass card. | [iOS](https://www.appetiteui.com/docs/ios), [Toggle](https://www.appetiteui.com/docs/toggle) | The [changelog](https://www.appetiteui.com/changelog) lists what each release added, with dates. ## Where does it fit next to Apple's and Google's kits? Apple's and Google's kits give you each platform's baseline. Appetite UI names their slots and points them at your tokens, so your brand sits on top of the baseline. Platform Bridge holds 113 variables for this: 53 Apple slots and 60 Material 3 slots, in two modes. Switch to System mode and the same slot points back at the platform value, so you can check a screen against the native palette without unpicking anything. [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge) lists every slot. ## How is the token system built? A component never names a color. It names a token, the token names a foundation, and the chain runs one way only. | Collection | What it decides | Variables | | --- | --- | --- | | Foundations | Raw color ramps, and the spacing, radius, border and icon scales | 202 | | Color Tokens | Semantic color in Light and Dark: bg, text, border, fg, state, brand | 190 | | Platform Bridge | Material 3 and Apple slot names, in Brand and System modes | 113 | | Motion | 5 durations, 5 easing curves, 3 springs and the presets built from them | 31 | | Typography | Size, line height, tracking, weight and family | 33 | | Platform | Touch targets, safe areas, bar heights and corners, per platform | 20 | Six collections, 589 variables, one direction of travel. Nothing points back up the chain, which is what lets the structure survive scale. `platform/min-touch-target` reads 44 pt in the iOS modes and 48 dp in android, so one component obeys both without a second copy. ## How do the tokens reach code? One W3C Design Tokens source generates CSS, SwiftUI, Compose and Flutter, so the value your engineer ships is the value you drew. Some values need no translation at all: `motion/easing/standard` holds `cubic-bezier(0.2, 0, 0, 1)` and `motion/duration/base` holds 200. [Code output](https://www.appetiteui.com/docs/code-output) shows the exporter and the generated files. ## What does the kit include? One Figma file with the components, Apple and Material 3 pattern pages, ready app screens, icons and styles, all reading from one set of variables. | Area | What you get | Count | | --- | --- | --- | | Components | Built for touch, every value bound to a token | 38 pages | | Apple patterns | iOS conventions redrawn in Appetite UI geometry | 20 pages | | Material 3 patterns | Material conventions redrawn in Appetite UI geometry | 17 pages | | Application screens | Onboarding, Settings, Empty State, Finance, Fitness, Social, AI, Booking, Foodie, Tasks and iPhone Duo | 11 sets | | Icons | Lucide, one stroke weight variable at 24 and lighter strokes at small sizes | 1,667 | | Styles | 20 text, 16 effect, 5 grid, and deliberately no paint styles | 41 | Inter is licensed under the SIL Open Font License 1.1 and Lucide under the ISC License, both cleared for commercial work. The Apple and Material pattern pages carry no vendor design resource. The Assets page ships third party brand marks, flags and emoji for realistic mock-ups: they belong to their owners, and you replace them before you ship. The Appetite UI logo and the twelve placeholder company logos are ours. [How to choose a Figma UI kit for an iOS app](https://www.appetiteui.com/blog/choose-figma-ui-kit-for-ios-app).