Orbit design system implemented in SwiftUI for iOS
Orbit is a SwiftUI component library which provides developers the easiest possible way of building Kiwi.com’s products.
Orbit Mission
Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.
Orbit is an open-source design system created for specific needs of Kiwi.com and together with that – for needs of travel projects.
This library allows you to integrate the Orbit design system into your iOS SwiftUI project.
Requirements
- iOS 13
- Swift 5.5
- Xcode 13
- Swift Package Manager
Installation
Add Orbit package to your project by adding the package dependency:
.package(name: "Orbit", url: "https://github.com/kiwicom/orbit-swiftui.git", .upToNextMajor(from: "0.8.0")),
Usage
- Import fonts that are used in orbit-components.
Font.registerOrbitFonts()
- Include any of our components in your project and use it.
HStack {
Text("Hello Orbit!")
Button("Continue")
}
You can also check the OrbitStorybookComponentsScreen preview to see all supported components.
File structure and naming conventions
File structure and component names reflect the Orbit design system structure.
As some Orbit components already exist in standard SwiftUI library (Text for example), Orbit components shadows them. In order to access standard component, a SwifUI. prefix can be used.
Components
To use Orbit components in SwiftUI, import Orbit library and use the components using their matching Orbit name.
import Orbit
...
VStack(spacing: .medium) {
Heading("Messages", style: .title2)
Illustration(.mailbox)
Text("...<strong>...</strong>...<a href="...">here</a>.")
Button("Continue", style: .secondary)
}
Foundation
Most Foundation types and values are accessed using extension on related types.
Spacing
Use Spacing enum with CGFloat extensions to access values.
VStack(spacing: .medium) {
...
}
.padding(.large)
Colors
Use Color and UIColor extensions to access values.
.foregroundColor(.cloudDarker)
Borders
Use BorderRadius and BorderWidth enums.
Typography
Use Font and UIFont extensions.
Orbit components use Orbit font automatically.