Skip to content

Works with

A Jetpack Compose theme that starts in Figma.

Appetite UI works with Jetpack Compose through a generated Kotlin output of its token source, read as AppetiteTheme, with a ready Material 3 typography object and the same names as the Figma variables.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.

Code output in the docsAll tools

What you get

What the file gives Jetpack Compose.

As the file ships today.

The Figma names, as AppetiteTheme.

brand/base is read as AppetiteTheme.colors.brandBase and spacing/4 as AppetiteTheme.spacing.space4.

A ready Material 3 typography object.

The Compose output includes a Material 3 typography object, so text styles do not have to be mapped by hand.

Material roles as variables.

The Platform Bridge collection carries Material 3 roles, such as M3/sys/color/primary, with a Brand mode that resolves to your brand color and a System mode that resolves to the Material default.

Set up

How to wire it up for Jetpack Compose.

  1. 01

    Take the Kotlin output from the file you buy.

    The token source and all four outputs come with the purchase. There is no package to install and no public repository.
  2. 02

    Add it to a Compose module.

    The Kotlin file goes into the module that holds your theme.
  3. 03

    Read values through AppetiteTheme.

    Use AppetiteTheme.colors.brandBase and AppetiteTheme.spacing.space4 instead of a hex or a literal dp.
  4. 04

    Change values in the source.

    The outputs are generated with Style Dictionary v5, so an edit made in the Kotlin file is lost at the next export.

Sample

What it looks like.

In code.

Jetpack Compose: Android. Using the names: inside a composable.
Jetpack ComposeAndroid
internal val BrandBase = Color(0xFF155DFC)
internal val Space4 = 16.dp
internal val DurationFast = 120

// read as AppetiteTheme.colors.brandBase
Using the namesinside a composable
Box(
  Modifier
    .background(AppetiteTheme.colors.brandBase)
    .padding(AppetiteTheme.spacing.space4)
)

Watch for

What to check before you rely on it.

Tokens, not components.

The file ships token code, not component code: your developers build the components on those values. Appetite UI Code, the coded components, is upcoming and is not part of the file today.

Check the Dark values in the file you receive.

The sample in the docs shows one value per token. How a Dark value arrives in the Kotlin output is not shown there, so open the generated file before you rely on it.

Edit the source.

A value changed by hand in the Kotlin file is overwritten when the outputs are generated again.

FAQ

Questions about Jetpack Compose.

No. The components are Figma components, and the Compose output carries their values. Your developers build the composables on those names.

The Compose output includes a ready Material 3 typography object, and the Figma file carries Material 3 roles as variables with a Brand and a System mode. The components are drawn to Material conventions on Android.

Official documentation

Jetpack Compose's own documentation.

Where the tool says how it works. The date is the day it was read or linked.

Read 30 October 2026

Custom design systems in Compose, Android Developers

Check it against the tool.

This page states what the file does today and follows the documentation beside it. Where the two differ, the tool’s own page wins.

Keep reading

On this site.

Read

Code output in the docs

Read

How one Figma token becomes SwiftUI, Compose, Flutter and CSS

Read

One file for iOS and Android

Bring your own stack.

Find your tool on the list, then open the preview and see how the kit sits next to it.

Get lifetime accessOpen the Figma preview