AMI Design System for iOS

This repository is the entry point for the AMI Design System for iOS.

The main content

This design system is based on DSFR: https://www.systeme-de-design.gouv.fr/version-courante/fr

This AMI Design System currently provides:

• a set of named colors
• a set of named icons
• a set of Marianne font variants
• a default DSFR accent color

This repository contains:

• a Swift Package in folder AmiDesignSystem
• an example project named AMI-design-system-lab-xcodegen in folder Examples

The AmiDesignSystem Swift Package

How to build the Swift Package

    cd <root directory>
    swift build

The Swift Package project uses SwiftGen plugin (https://github.com/SwiftGen/SwiftGenPlugin) to generate at build time Swift classes with hierarchical content:

• AmiDesignSystem.Colors
• AmiDesignSystem.Icons

What to find in the Swift Package

AmiDesignSystem exposes assets of types:

• DsfrColorAsset
• DsfrImageAsset

To access SwiftUI colors and Images, you use:

• .swiftUIColor
• .swiftUIImage

To access UIKit colors and Images, you use:

• .color
• .image

AmiDesignSystem gives you access to Marianne fonts for several usages.

Theses usages are listed in an Enum:

    public enum DsfrFont {
        case h1, h2, h3, h4, h5, h6
        case textXL, textLG, textMD, textSM, textXS
    }

You use it on a Text using a SwiftUI modifier:

    Text(fontItem.typeLabel)
        .dsfrFont(fontItem.font)

Using AmiDesignSystem Swift Package in your product

To use AmiDesignSystem Swift Package in your Xcode project, just import it using menu File > Add Package Dependencies… and paste the repository url: https://github.com/numerique-gouv/ami-design-system-ios/

Then, in your Xcode source files, import the module and use it:

    import AmiDesignSystem
    
    let titleColorAsset = AmiDesignSystem.Colors.Text.Title.blueFrance
    let partnerIconAsset = AmiDesignSystem.Icons.Ami.Services.demarcheNumeriqueGouvFr

For the Marianne fonts to be available for your application, you have to load them by calling at application start:

    import AmiDesignSystem
    
    FontLoader.registerFonts()

To configure DSFR default accent color for your application you have to apply it to your root SwiftUI hierarchy and configure it for UIKit too:

• on your SwiftUI root hierarchy

    WindowGroup {
        ContentView()
        // Define global view hierarchy accent color like this because this color is defined externaly.
            .tint(.dsfrAccentColor)
    }

• in your application main class

    init() {
    	...
        // Set default accent color for UIKit components.
        Color.setUIKitAccentColor()
        ...
    }

The AMI-design-system-lab-xcodegen sample

The sample application is located in Examples folder.

To prepare the sample application Xcode project, you need xcodegen tool (install it via terminal command brew install xcodegen).

    cd Examples
    ./scripts/ami-design-system-lab-generate-xcode.sh

Note: the first time you checkout the project, you must to generate the project once, then build it (it will failed because of missing files inGenerated subfolder). The missing files are generated by this first build. You must generate the project a second time (the files in Generated will be included in the project this time) and then you can build the Xcode project successfully.

This will generate the AMI-design-system-lab-xcodegen.xcodeproj Xcode project strucutre.

The AMI-design-system-lab-xcodegen.xcodeproj links to AmiDesignSystem Swift Package (locally).

Then, you can run it using Xcode in Simulator or real device.