---
title: SwiftUI design system in Figma: Appetite UI
source: https://www.appetiteui.com/works-with/swiftui
---

# 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.

## What the file gives

- 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.

## How to wire it up

1. 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. 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. Use the generated names. Color.apBrandBase, AppetiteSpacing.space4 and the rest, instead of a hex or a literal number.
4. 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.

### SwiftUI (iOS)

```swift
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 names (a view, two generated names)

```swift
Text("Pay now")
  .foregroundStyle(Color.apBrandBase)
  .padding(AppetiteSpacing.space4)
```

## What to check

- 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

### Does Appetite UI include SwiftUI components?

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.

### Do I write separate code for dark mode in SwiftUI?

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

## Official documentation (30 October 2026)

- [SwiftUI Color, Apple Developer Documentation](https://developer.apple.com/documentation/swiftui/color), linked 30 October 2026, page text not read
- [Specifying your app's color scheme, Apple Developer Documentation](https://developer.apple.com/documentation/xcode/specifying-your-apps-color-scheme), linked 30 October 2026, page text not read

## On this site

- [Code output in the docs](https://www.appetiteui.com/docs/code-output)
- [How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css)
- [One file for iOS and Android](https://www.appetiteui.com/platforms)