The Design System package is a personal project designed to implement a comprehensive design system for new projects. This package aims to provide a consistent and reusable set of design elements and resources, such as color tokens, typography, and component styles, to ensure uniformity across different projects. It leverages Swift Package Manager (SPM) to manage and distribute these design assets efficiently.
The design system includes Figma files that contain design guidelines, component specifications, and visual references. These resources help ensure that the implementation aligns with the design standards set in Figma. Access these files in the Figma
- Color Tokens: Centralized color definitions for consistent use across the application.
- Typography: Predefined text styles for headings, body text, captions, and more.
- Components: Standardized UI components like buttons, labels, and views.
- Asset Management: Easy inclusion and access to design assets like images and color sets.
To integrate the Design System package into your project, add the following dependency to your project :
https://github.com/alfian0/Design-System.git
An overview of all available color variables
| Sample | Variable | Token |
|---|---|---|
| fg_default | .foregroundDefault |
|
| fg_disabled | .foregroundDisabled |
|
| fg_emphasis | .foregroundEmphasis |
|
| fg_muted | .foregroundMuted |
|
| accent_emphasis | .foregroundLink |
|
| accent_emphasis | .foregroundAccent |
|
| danger_emphasis | .foregroundDanger |
|
| info_emphasis | .foregroundInfo |
|
| success_emphasis | .foregroundSuccess |
|
| warning_emphasis | .foregroundWarning |
| Sample | Variable | Token |
|---|---|---|
| bg_default | .backgroundDefault |
|
| bg_emphasis | .backgroundEmphasis |
|
| bg_muted | .backgroundMuted |
|
| accent_emphasis | .backgrounddAccentEmphasis |
|
| accent_muted | .backgroundAccentMuted |
|
| danger_emphasis | .backgroundDangerEmphasis |
|
| danger_muted | .backgroundDangerMuted |
|
| info_emphasis | .backgroundInfoEmphasis |
|
| info_muted | .backgroundInfoMuted |
|
| success_emphasis | .backgroundSuccessEmphasis |
|
| success_muted | .backgroundSuccessMuted |
|
| warning_emphasis | .backgroundWarningEmphasis |
|
| warning_muted | .backgroundWarningMuted |
| Sample | Variable | Token |
|---|---|---|
| fg_default | .boderDefault |
|
| accent_emphasis | .boderEmphasis |
|
| fg_disabled | .boderDisabled |
Text("Listen to the best \n Podcast")
.multilineTextAlignment(.center)
.foregroundColor(.foregroundDefault)
An overview of all available typography variables
| Sample | Token |
|---|---|
.notoSans(.thin, 14) |
|
.notoSans(.extraLight, 14) |
|
.notoSans(.light, 14) |
|
.notoSans(.regular, 14) |
|
.notoSans(.medium, 14) |
|
.notoSans(.semiBold, 14) |
|
.notoSans(.bold, 14) |
|
.notoSans(.extraBold, 14) |
|
.notoSans(.black, 14) |
| Sample | Token |
|---|---|
.notoSans(.regular, 14) |
|
.inter(.regular, 14) |
Use the font declaration to set all font properties at once (font-weight, font-size, line-height, and font-family).
| Sample | Token |
|---|---|
.Display.xs |
|
.Display.s |
|
.Display.m |
|
.Display.l |
|
.Display.xl |
|
.Heading.xs |
|
.Heading.s |
|
.Heading.m |
|
.Heading.l |
|
.Heading.xl |
|
.Paragraph.xs |
|
.Paragraph.s |
|
.Paragraph.m |
|
.Paragraph.l |
|
.Paragraph.xl |
|
.Label.xs |
|
.Label.s |
|
.Label.m |
|
.Label.l |
|
.Label.xl |
SectionView(axis: .horizontal, title: "For You", models: [
CardView.Model(title: "How to hack the education system?",
date: "6 Dec",
duration: "1 hr 15 min",
like: 1,
image: CardView.Model.Image(image: UIImage(named: "thumbnail_1")!, url: nil)),
CardView.Model(title: "How to hack the education system?",
date: "6 Dec",
duration: "1 hr 15 min",
like: 1,
image: CardView.Model.Image(image: UIImage(named: "thumbnail_2")!, url: nil))
]) { model in
CardView(model: model)
.frame(width: 287)
}
CardView(model: model)
.frame(width: 287)
CardView2(model: model)
.frame(width: 257)
This Design System package is a personal initiative to streamline the implementation of design systems in new projects. By using this package, you can ensure consistency, reduce design debt, and speed up the development process with a well-documented and reusable set of design assets.