Skip to content

Works with

A SwiftUI design system that starts in Figma.

Appetite UI works with SwiftUI through a generated Swift output of its token source, which carries the Figma variables under the same names, colors that follow light and dark, and text sizes as Dynamic Type anchors.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 SwiftUI.

As the file ships today.

The Figma names, in Swift.

brand/base arrives as Color.apBrandBase and spacing/4 as AppetiteSpacing.space4. Radius and text styles follow the same pattern, for example AppetiteRadius.lg and AppetiteFont.smEmphasized.

Colors that follow the appearance.

A color with a Light and a Dark value is emitted as one dynamic color, so a view follows the system appearance with no branching.

Text as Dynamic Type anchors.

The SwiftUI output emits Dynamic Type anchors for its text sizes rather than fixed point sizes.

Set up

How to wire it up for SwiftUI.

  1. 01

    Take the Swift 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 the Xcode app target.

    The Swift file goes into the target. Add Inter and Inter Display to the target as well and list both under UIAppFonts in Info.plist.
  3. 03

    Use the generated names.

    Color.apBrandBase, AppetiteSpacing.space4 and the rest, instead of a hex or a literal number.
  4. 04

    Change values in the source.

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

Sample

What it looks like.

In code.

SwiftUI: iOS. Using the names: a view, two generated names.
SwiftUIiOS
extension Color {
  static let apBrandBase = Color.apDynamic(
    light: Color(apHex: 0x155DFC),
    dark: Color(apHex: 0x2B7FFF))
}
enum AppetiteSpacing { static let space4: CGFloat = 16 }
enum AppetiteMotion { static let durationFast = 0.12 }
Using the namesa view, two generated names
Text("Pay now")
  .foregroundStyle(Color.apBrandBase)
  .padding(AppetiteSpacing.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.

Edit the source.

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

Fonts are part of the setup.

The text styles name Inter and Inter Display, so both fonts have to be in the app target and in Info.plist before the sizes look as drawn.

FAQ

Questions about SwiftUI.

No. The components are Figma components, and the Swift output carries their values: colors, spacing, radius and text. Your developers build the views on those names.

No. A color with two modes is emitted as one dynamic color, so the view follows the system appearance without a branch.

Official documentation

SwiftUI's own documentation.

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

Linked 30 October 2026, page text not read

SwiftUI Color, Apple Developer Documentation

Linked 30 October 2026, page text not read

Specifying your app's color scheme, Apple Developer Documentation

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