Enterprise Design System in XAMARIN.FORMS

Migrating Web Project to Xamarin: Using LESS and CSS and Pseudo HTML Tags

Context:

Working on design for organizations that are many years or century on market where design is process and “simple” change has mass effect on milion of users, retailers, subbranches, copy papers, business cards and discussions with design team and product owners.

In other words: Design is delivered as it is and have to be done.

Goal of this article is show how easy is to start delving enterprise design needs.

To show this process I found perfect style guide similar to what I already work but PUBLIC:

https://digitaldesign.scania.com/home

Very good enterprise style guide or even design system, how you can see

CSS HTML is language that designers are using.

Setup: Adding LESS support

https://medium.com/@benetskyybogdan/less-with-xamarin-forms-efb9ad76cc1a

Instead of fallowing @benetskyybogdan instructions decided that I download Bohdan project and included to mine project and do some modifications

2. Ups npm install

3. Edit gulp.js and run via task runner

MainPage.css was created in Xamrin.Forms project.

The Migration

Branding book and corporate colors there is not much discussion.

Colors

As you could see colors.less and variables.less are delivered.

  1. Add less files to StyledApp.LESS
  2. Import variables into colors

3. Modify gulp.js to include all LESS files

4. Run less task

5. See result files in Xamarin.Forms project

Fonts and Icons

Fonts and icons will be handled this way:

Fonts

https://digitaldesign.scania.com/foundation/typography

Developer need to handle Regular, Bold, Italic, Headline, Headline Bold as well as Condensed, Condensed Bold and a Condensed Italic versions as well as Cyrylic alphabet versions that would be ? 8x2=16 font to handle, that would give: x H1..HX, p1…pX styles ?? , a lot of styles to handle.

Unfortunately I haven’t found anywhere on top ttf files, so for let’s assume that fonts where delivered. For example will take

Icons

https://digitaldesign.scania.com/foundation/icons

I often don’t use svg or images if is not really required, in most cases delivered by graphic designers via:

For example purpose I will also use random font:

Basic test

Pseudo HTML

CSS HTML is language that designers understand, to avoid unnecessary discussions that H1 is Title … or “Mobile Apple Guidelines” it much easier to define XAML in way that design team will understand it and maybe will be able to review XAML to deliver best user experience, look and feel.

Repo:

Summary

Design teams are sometimes open for changes but more often it’s long process threw many people. It is easy to start with existing style guide delivered from web css and include it to Xamarin.Forms. Pseudo HTML is just a notation to easily communicate with design team. XAML is alien thing for designers but html/css is thing that is even done high school.

Once style guide / design system components are defined as body, badges, headers, buttons… than making UI is as building from Lego, that is fast and easy. Implementing full style guide depend on design but it is likely that enterprise customers already paid for design, they understand that all is custom and are willing to have it done.

OK, if liked the idea of Pseudo HTML / pHTML leave a comment, clap ….

See also:

Did small internal corporate and big projects with over 1 000 000 active users in ASP.NET and XAMARIN.FORMS and XAMARIN.NATIVE. Blogging for better sleep.