Cuda iOS Design System

The iOS component library for the Cuda Design System, built with SwiftUI and distributed via Swift Package Manager.

This repository follows the Skyscanner backpack-ios architecture pattern. For design tokens source-of-truth, specifications, and architectural decisions, see the main cds repository.

Installation

Add cuda-iOS as a Swift Package dependency in Xcode:

1. File > Add Package Dependencies
2. Enter the repository URL
3. Import the libraries you need:

import Cuda_SwiftUI   // SwiftUI components
import Cuda_Common    // Shared utilities
import Cuda_Tokens    // Design tokens
import Cuda_Fonts     // Typography

Repository Structure

cuda-iOS/
├── Package.swift                    # SPM manifest (4 library targets)
├── Sources/
│   ├── Cuda-SwiftUI/                # SwiftUI components
│   │   ├── Button/                  # One folder per component
│   │   │   └── __figma__/           # Figma Code Connect files
│   │   ├── Card/
│   │   ├── Badge/
│   │   └── ... (39 component folders)
│   ├── Cuda-Common/                 # Shared utilities
│   ├── Cuda-Tokens/                 # Design tokens (colors, spacing, typography)
│   └── Cuda-Fonts/                  # Font resources
├── Tests/
├── Example/                         # Sample app
├── scripts/                         # Build & automation
└── decisions/                       # Architectural decision records

Components

Component	Component	Component
AppSearchModal	Badge	BannerAlert
BottomSheet	Button	Calendar
Card	CardButton	Carousel
Chip	ChipGroup	Color
Dialog	FieldSet	Font
Icons	Link	NavigationBar
Nudger	Overlay	PageIndicator
Panel	Price	ProgressBar
Rating	SearchInput	SectionHeader
SegmentedControl	Select	Skeleton
Slider	Snippet	Spacing
Spinner	StarRating	Switch
Text	TextArea	TextField

Figma Code Connect

Each component folder contains a __figma__/ subdirectory with a [ComponentName].figma.swift file for Figma Code Connect integration.

Convention

Sources/Cuda-SwiftUI/Button/
├── Button.swift                     # Component implementation
└── __figma__/
    └── Button.figma.swift           # Figma Code Connect mapping

Setting up a Code Connect file

1. Navigate to the component's __figma__/ directory
2. Open the .figma.swift placeholder file
3. Uncomment the template code
4. Replace REPLACE_WITH_FILE_ID and REPLACE_WITH_NODE_ID with your Figma component's URL
5. Map Figma properties to your SwiftUI component using property wrappers:
   • @FigmaString("Property Name") — text properties
   • @FigmaBoolean("Property Name") — boolean flags
   • @FigmaEnum("Property Name", mapping: [...]) — variant selections
   • @FigmaInstance("Property Name") — instance swaps

Publishing to Figma

npm install -g @figma/code-connect
figma connect publish --token YOUR_FIGMA_ACCESS_TOKEN

Adding a New Component

# Create component folder with Figma Code Connect placeholder
mkdir -p Sources/Cuda-SwiftUI/NewComponent/__figma__

# Add your component Swift file
# Sources/Cuda-SwiftUI/NewComponent/NewComponent.swift

# Add Figma Code Connect file
# Sources/Cuda-SwiftUI/NewComponent/__figma__/NewComponent.figma.swift

Related Repositories

• cds — Main design system hub (web components, tokens source-of-truth, specs)
• cuda-android — Android component library (planned)