DIPS.Mobile.UI 62.1.5

<img src="DIPS.Mobile.UI/assets/dips.png" width="20" height="20">

To support developers building DIPS mobile native apps, the designers maintain a Design System with reusable style resources and components. These resources and components are available through the DIPS.Mobile.UI NuGet package.

This project is well documented with examples on how to use the components from DIPS. The documentation can be found in the designDocs wiki on GHE.

Using the library

Please make sure to read the Getting started before using the library for your app.

Compatibility

• The library supports developing on .NET MAUI for mobile.
• This library is aimed at mobile development and it supports iOS and Android applications.
  • The library is compatible with the latest iOS and Android versions minus 2.

Build status

Live test with app

The Components app (DUI.App) provides live examples of the resources and components. It is distributed to authorized internal testers through TestFlight on iOS and the Google Play internal testing track on Android.

From design to code

Design Tokens

The style resources (colors, sizes, icons etc.) in this library are generated from DIPS.Mobile.DesignTokens in the DIPS Mobile monorepo, which is exported from the Design System. The point of having design tokens is for developers and designers to use the same terms when discussing design or implementing a design in an application. The design tokens is exported in various formats, but they must be machine readable. Not everything can be exported as design tokens, but DIPS.Mobile.UI is using exported colors, sizes and icons. These are refered to as resources, and the resources are available for developers in .NET Standard, Android and iOS project by xaml/xml resources or APIs.

Workflow

The designers is maintaining prototypes and design in Figma. They also maintain their resources and components, which makes it easy to reuse throughout design and prototypes. The resoruces can be exported to various formats.

The following workflow is used when a new resource is added to DIPS.Mobile.UI:

1. The designer wants to create a new color, size or icon to be reused. They come up with a name for the resource and the resource gets created.
2. The designer export the resource from Figma to a format that the developers and designers agree on.
3. The designer commits the exported resource under src/design/DIPS.Mobile.DesignTokens/ in the monorepo.
4. The pull-request workflow generates the corresponding DIPS.Mobile.UI resources and commits them to the same branch.
5. CI verifies deterministic generation, builds DIPS.Mobile.UI and Arena Mobil, runs tests, and validates the contents of the NuGet package.
6. The pull request is reviewed and merged with a DUI changelog fragment.
7. The DUI changelog automation selects the requested SemVer bump. Azure Pipelines signs the package through DigiCert ONE and publishes it to NuGet.org.

journey
    title Pipeline: From design to code
    section Figma
      Create resource:20: Designer
      Exports resource as design token: 20: Designer
    section DIPS.Mobile.DesignTokens
      Import & push design token: 20: Designer
         Generate resources in the same PR: 20: Build server
    section DIPS.Mobile.UI
         Validate generated resource: 20: Build server
      Approve pull request: 20: Developer
      New nuget package created: 6: Build server
      New DUI.App version distributed: 6: Build server