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.
- Add less files to StyledApp.LESS
- 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:
MAUI complete Enterprise