Skip to content

Design and build your app from one system.

A UI kit for iOS and Android apps, in Figma and in code, built like a design system. Get the Figma file, the code for React Native, SwiftUI, Flutter and Jetpack Compose, or both.

Finance app home in light mode: a total balance with its change this month, Send, Receive, Pay and Top up, and recent transactions
Finance
  • Finance

    Finance app home in light mode: a total balance with its change this month, Send, Receive, Pay and Top up, and recent transactionsFinance app home in dark mode: a total balance with its change this month, Send, Receive, Pay and Top up, and recent transactions
  • AI

    AI assistant thread in light mode: a request to summarize the Q3 report, answered with churn by plan in a table, and an Ask anything fieldAI assistant thread in dark mode: a request to summarize the Q3 report, answered with churn by plan in a table, and an Ask anything field
  • Foodie

    Dish sheet in light mode: Shoyu ramen with a choice of size, extras and Add to cartDish sheet in dark mode: Shoyu ramen with a choice of size, extras and Add to cart
  • Booking

    Review and pay screen in light mode: a lakeside cabin in Ruka, price details, a Visa card and Confirm and payReview and pay screen in dark mode: a lakeside cabin in Ruka, price details, a Visa card and Confirm and pay
  • Fitness

    Fitness analytics in light mode: weekly training time in stacked bars by day, split into Strength, Cardio and Mobility, and weight progress against a targetFitness analytics in dark mode: weekly training time in stacked bars by day, split into Strength, Cardio and Mobility, and weight progress against a target
  • Social

    Chat list in light mode: a row of stories above recent conversationsChat list in dark mode: a row of stories above recent conversations
  • Tasks

    My work screen of the Tasks app in light mode: a weekly progress card, a Today, Upcoming and Done segmented control, and a task list with labels and timesMy work screen of the Tasks app in dark mode: a weekly progress card, a Today, Upcoming and Done segmented control, and a task list with labels and times
  • Onboarding

    Welcome back sign in, light mode: X, Apple, Facebook and Google buttons, email and password fields, and Sign inWelcome back sign in, dark mode: X, Apple, Facebook and Google buttons, email and password fields, and Sign in
  • Settings

    Preferences screen in light mode: language, currency and dark mode rows, and switches for push, email and SMS alertsPreferences screen in dark mode: language, currency and dark mode rows, and switches for push, email and SMS alerts
  • Empty state

    Empty state in light mode: No transactions yet, with Add money and Go backEmpty state in dark mode: No transactions yet, with Add money and Go back
The Figma logo on a rounded app icon tile over a soft violet glowThe Figma logo on a rounded app icon tile over a soft violet glow

Appetite UI Figma.

For designing iOS and Android apps in Figma. From $129.

See the Figma kit

The Appetite UI Code mark, angle brackets and a slash, on a rounded app icon tile over a soft green glowThe Appetite UI Code mark, angle brackets and a slash, on a rounded app icon tile over a soft green glow

Appetite UI Code.

For building in React Native, SwiftUI, Flutter or Jetpack Compose. From $79.

See the code

The kit's Cards screen with an Appetite Debit card, Freeze, Details, Limits and Settings actions, $1,500.40 spent this month and a tab bar, among its components: a time picker, a file upload, a swipe action row, an active days heatmap at 58 of 91 and an order status cardThe kit's Cards screen with an Appetite Debit card, Freeze, Details, Limits and Settings actions, $1,500.40 spent this month and a tab bar, among its components: a time picker, a file upload, a swipe action row, an active days heatmap at 58 of 91 and an order status card

Appetite UI Complete, Figma + Code.

Designers and developers on the same components. From $179.

Compare all three

Architecture

One source of truth. One file for iOS and Android.

Open a screen group and build today. The token architecture underneath is why a rebrand is still one edit six months from now.

Four kit components in the brand blue: a color picker with #155DFC chosen, a table of people with amounts and Paid, Pending and Overdue statuses, a time picker with 10:30 AM selected, and a heatmap of active days reading 58 of 91Four kit components in the brand blue: a color picker with #155DFC chosen, a table of people with amounts and Paid, Pending and Overdue statuses, a time picker with 10:30 AM selected, and a heatmap of active days reading 58 of 91

Tokens

Rebrand in minutes

Change the brand color once. Every component, both platform mirrors, light and dark, follow it. You do not reopen a single screen.
Six app screens from the kit in two rows: an AI chat with a generated hero image, a fitness profile with 382 minutes of weekly activity and personal records, a message thread, a social feed with stories, the order AP 4192 arriving in 12 minutes on a map, and a wallet with a Vault Digital cardSix app screens from the kit in two rows: an AI chat with a generated hero image, a fitness profile with 382 minutes of weekly activity and personal records, a message thread, a social feed with stories, the order AP 4192 arriving in 12 minutes on a map, and a wallet with a Vault Digital card

App examples

Ready-to-use screens

App flows for finance, booking, fitness, social, AI, food and tasks, built from the same components and wired to the same tokens.
Native controls of each platform: an iOS share sheet over a $12,450.80 portfolio chart, sending to Maren Lindqvist, Design team or Appetite UI, and Material fields for Create account above a Material date picker set to Mon, Aug 17Native controls of each platform: an iOS share sheet over a $12,450.80 portfolio chart, sending to Maren Lindqvist, Design team or Appetite UI, and Material fields for Create account above a Material date picker set to Mon, Aug 17

Platforms

Ship both platforms

Apple and Material conventions live together. No second library, no translation step.
A blue Confirm and pay button above the token behind its color: brand/base, a color token of #155DFC, read as Color.apBrandBase in SwiftUI, AppetiteTheme.colors.brandBase in Compose and var(--ap-brand-base) in CSSA blue Confirm and pay button above the token behind its color: brand/base, a color token of #155DFC, read as Color.apBrandBase in SwiftUI, AppetiteTheme.colors.brandBase in Compose and var(--ap-brand-base) in CSS

Code handoff

Hand off components, not a spec

Your developer opens the folder for their stack and finds the same components, variants and tokens as in your file.

See Appetite UI Code

Three app screens in a row with the middle one in the other mode: a Product task board with To do cards, a Trips screen with the Lakeside cabin in Ruka and the trips later this year, and a food delivery home with cuisine filters and a Free delivery all week bannerThree app screens in a row with the middle one in the other mode: a Product task board with To do cards, a Trips screen with the Lakeside cabin in Ruka and the trips later this year, and a food delivery home with cuisine filters and a Free delivery all week banner

Dark mode

Dark mode is already drawn

Every component already has it, because color is a token and tokens have two modes.
A prompt composer with SKILL.md, a Markdown file of 18 KB, attached and the prompt Build the wallet home from the kit, under three chips naming Claude, Cursor and Figma MakeA prompt composer with SKILL.md, a Markdown file of 18 KB, attached and the prompt Build the wallet home from the kit, under three chips naming Claude, Cursor and Figma Make

AI agents

Brief an agent in one file

The Core Skill in the file you buy tells Claude, Cursor and Figma Make which token to use. With Appetite UI Code, your agent builds with the components, in your stack.

How agents use it

Screens

Start at screen level, not at button level.

Complete app screens, wired to your tokens. Open one and keep building.

Components

One architecture under every component.

Every component reads the same 589 variables in 6 collections, in light and dark.

I now design systems and apps much faster and more efficiently. A great investment and a foundation for good app designs.
Bára LiškováUI Designer
Appetite UI has helped us develop mobile apps much faster and more efficiently.
Jan DoanUX Designer
The outputs I get from our designer are more understandable for development. I recommend it.
Braňo StupákApp developer
The token architecture is the real product. Everything else in the file is downstream of it.
Jakub EngelbrethDigital Concept Developer

Pricing

One payment. Yours forever.

No subscription and no seat math.

Figma

$129$97$78$59

USD, paid once

For designing iOS and Android apps.

  • Components and app screens in light and dark mode
  • Apple and Material 3 in one file
  • 589 variables in 6 collections
  • Tokens for SwiftUI, Jetpack Compose, Flutter and CSS
  • Core Skill for AI agents

Code

$79

USD, paid once

For building iOS and Android apps in code.

  • Every Appetite UI component in React Native
  • The core components in SwiftUI, Flutter and Jetpack Compose, more in every release
  • Same names and variants as the Figma file
  • Tokens for every stack and CSS
  • iOS and Material conventions behind one switch
  • Rebrand in one theme file
  • App Starter with Tasks, Foodie and AI flows
  • Agent kit for Claude Code and Cursor
Get Code for $79

Code starts at $79. The price rises with every release, and every release is included.

Complete

$179

USD, paid once

Figma + Code. $29 less than both, on Team $79 less.

  • Everything in Figma
  • Everything in Code
  • Designers and developers on the same components

FAQ

Questions worth asking.

Answered by the people who build it.

Still have a question?

Write to us. It lands in one inbox, read by the people who build Appetite UI.

No. The Figma file works on its own and gets every release. Tokens for SwiftUI, Jetpack Compose, Flutter and CSS stay included.

No. Code works on its own and ships with its own tokens. Get Complete if you or your team design in Figma.

Every person who designs with the Figma file or builds with the code. Solo covers one person. Team covers up to ten, designers and developers together.

No. Add Code. Your Figma licence keeps every update.

React Native with Expo, SwiftUI, Flutter and Jetpack Compose, for iOS and Android. React Native has every Appetite UI component and the App Starter. SwiftUI, Flutter and Compose start with 15 core components, and every release adds more. Apple and Material 3 reference components stay in the Figma file.

Yes. Code ships with an agent kit, and the licence allows Claude Code, Cursor and other coding agents. It does not allow training models on the files or building tools that generate UI for others.

Yes. Every Code update is included, new components and stacks too.

Yes. The price of Code rises with every release. Every release after you buy is included.

Your next rebrand is one edit.

Colors, radii and type sizes are variables, so a new brand is one change in one place.