Extending Uno Platform Material Toolkit with overrides: the case of Fluent

Build together, debug together. Join the community on Discord.→

Extending Uno Platform Material Toolkit with overrides: the case of Fluent

Overriding Material components for a Fluent 2 look and feel

March 25, 2024

If you’re a designer or developer already working with Uno Platform and Figma, you might have initially leaned towards Material UI for its robust design system and ease of integration. Or, perhaps, you’re on the cusp of starting a new project and considering Uno Figma as the cornerstone of your application’s UI. However, what if the Material Design aesthetic doesn’t quite align with your vision? What if you’re aiming for a Fluent design or seeking a more customized branding that transcends mere app themes?

While the Material toolkit file has been the go-to for those using our plugin, we understand you may have different requirements.

This article is all about highlighting the power of component overrides and how to tweak those Material components to fit a Fluent design style without starting from scratch. We’re talking practical steps, real examples, and the kind of flexibility that makes your job easier. Whether you’re looking to align with Fluent’s aesthetics or just want to customize your project’s design, we’ve got you covered. Let’s dive into how overrides can be your best friend in tailoring UI components to fit your vision.

(I know all about Uno Material Toolkit, let me jump right to Instance Overrides tutorial.)

Uno Platform Material Toolkit for Figma

The Uno Material Toolkit file for Figma is an extensive library of components, templates, and styles designed to echo the principles of Material Design for use with the Uno Platform for Figma plugin and Uno Platform development.

At the surface level, the components, styling, and theme are nothing new to designers familiar with material design systems; however, what sets the Uno Material Toolkit apart is its comprehensive approach, which caters to designers and developers within the .NET ecosystem. The magic of the Uno Platform plugin and toolkit comes from behind the scenes, as each component, state, template, and layout generate clean responsive C# and XAML markup that are ready for export.

The Uno Material Toolkit serves as a bridge between design and development, ensuring that the visual fidelity and user experience envisioned by designers are faithfully translated into the final product. It instantly generates ready-to-use code that can be seamlessly incorporated into any project, so designers can communicate to developers in a language they understand.

You can find the full list of components available as part of the Uno Platform Material Toolkit File here.

Override support for a tailored UI

The core objective of this article is to demonstrate to designers and developers alike that with the solid foundation laid out by the Uno Material Toolkit, override support gives you the flexibility to further tailor your UI to your brand or maybe a particular design system like in the case of this tutorial, Fluent 2.

An essential aspect of mastering the transformation from Material to Fluent or any design in Figma is getting comfortable with the concept of instance overrides. The Uno Platform’s documentation provides an in-depth look at how designers can leverage instance overrides to tailor components to their specific needs without losing the ability to update those components globally—an invaluable feature when applying Fluent Design principles to existing Material designs.

Instance overrides in Figma allow designers to modify properties of a component instance—such as color, text, and even certain effects—while still keeping it linked to the main component. This means any non-overridden properties will still update across all instances if the main component is changed. This capability is crucial when transforming design systems because it ensures efficiency and consistency across the design process. Designers can experiment with Fluent styles, such as depth, light, and motion, on individual instances, knowing that the underlying structure of their designs remains intact and universally manageable.

Uno Platform’s support, for instance overrides, ensures that these design adjustments are not only possible but also practical in a development context. The Uno Platform for Figma plugin not only generates the appropriate C# and XAML but also generates color and font files, with the updated values, ready to be exported and dropped into your project. The Instance Overrides documentation is a vital resource for designers looking to adapt their Material Design UIs into a more tailed design or theme.

Tutorial

Let’s dive into how we can leverage Instance Overrides to give our UI a Fluent 2 design makeover. We’ll be using the below example app from the Fluent 2 iOS Kit as our guide, aiming to replicate the look and feel through strategic overrides.

Getting Started: Setting Up Your Environment

Before Getting Started, it’s important to make sure your environment is set up for both Figma and Uno Platform.

Uno Platform setup

Haven’t set up your Uno Platform environment yet? No worries, follow these steps to get up and running.

For Figma:

Go to the Figma community and search for “Uno Platform”
Select Plugins from the list and choose Uno Platform (Figma to C# or XAML)
Select the “open in” option.
Choose “Playground file” to open the Material Toolkit file.

Alternatively, we made the tutorial file available here.

From Material to Fluent: A Step-by-Step Transformation

To kick things off, we need to pinpoint the key elements that will undergo changes during our Fluent makeover. For the screen we’re focusing on, this means updating our app’s theme and text styles first.

Step 1: Update your app theme and colors

The first thing to do is update our app’s theme. The beauty here is that by using a DSP file, the plugin will create a global change that will update your theme across all screens.

If you don’t have a DSP file, don’t worry. We have the handy Material theme builder tool, make sure you are on the custom option.

Create your color palette, we used Fluent 2 ColorStyles:
- Primary: #0F6CBD
- Secondary: #CFE4FA
- Tertiary: #0F548C
- Neutral: #FFFFFF

On the top right, select Export and choose Material Tokens (DSP)
To apply the new theme, run the plugin:
- Right-click your screen and select Plugin > Uno Platform
- Navigate to the Properties Tab and make sure you select Application
- Click “Import DSP Theme”

Once imported, your theme should update globally.

Step 2: Updating Text Styles

Next, update your Text styles so the font sizes and weights align with the Fluent 2 iOS kit typography ramp.

Updating our text styles may be time-consuming, depending on the variety of text styles in use. However, changing just one text style will globally update the typography wherever that style is applied.

To do this:

Select a text on your UI; notice in the properties tab that it indicates it is using UNO Semantic/TextStyle.
Select it, and in the drop-down next to the style, click “Edit Style”
Under Properties, change the font to SF Pro Text and weight.
Repeat for each text style used in the UI. (Component Label, Body text etc.)

Step 3: Building our UI with Material components and Overrides

When it comes to components, we’re looking at giving various elements a new look, including the Textbox, CardDesign template, IconButtons, ListItem, Hyperlink, and FAB button, not to mention our TabBar.

Before starting a new project with overrides, it’s important to note that not all overrides are compatible with every component. Make sure to consult the list of which components support specific overrides here.

Standard Page Template

Select a Standard Page Template from the components library to start your UI.

It’s worth noting that the Standard Page Template, while initially presented in a mobile format, is incredibly versatile. You can easily adjust it to suit desktop or web frames, providing the flexibility you need for your UI design.

The first thing to do with the Standard Page Template involves a simple right-click to “detach instance.” After that, you’ll have the freedom to delve into the Body and Page layers, tweaking as needed.

NavigationBar:
For this tutorial, we’ll hide the NavigationBar, so feel free to hide that layer.

Content.Scrollable:
Set the horizontal, vertical, and gap padding for this layer to 0.

Bottom TabBar:

Click on the Bottom TabBar, and in the properties pane, adjust the number of items from 4 down to 3.
On the instance layer level, still in the properties pane, switch the instance to a home icon, and update the label to “Home.” Repeat the same for icons 2 and 3.

NavBar

For the NavBar, you’ll need a PersonPicture, some Text, and two IconButtons. The overrides needed here are covered through our predefined color and text styles. But we still need to build out our section.

First, add a PersonPicture to the canvas and set its size to small.
Then, place a text element for the title (“Files”) next to it, using the Headline Medium sxBold).
Group the PersonPicture and Title in an auto layout (Shift + A), setting a horizontal gap of 12 and left padding of 16.
Add two IconButtons, update the icons as needed, and apply auto-layout to these as well, with a horizontal gap of 12 and right padding of 4.

Search Function

Grab the TextBox component from the library and place it on the canvas. Set a horizontal padding of 16.
In the template layer, apply a fill color (#F0F0F0) with the Light/On Background color style and adjust the corner radius to 12.
Dive into the TextBox’s Input Layer, make the LeadingIcon visible and set a left padding of 4. Also, reveal TrailingIcon2 and, if needed, update the icon instance.
Before proceeding, group the NavBar and Search sections together in an auto layout, adding a bottom padding of 8.
Finally, place a divider from the component library below the search box.

CardDesign

Next, we’ll incorporate a CardDesign template for displaying the file previews:

1. Choose the CardDesign template from the component library.
2. Dive into its layers, and within the template layer, hide the first ListItem. Then, move to the second ListItem layer, go to the Leading layer, hide the Image, and make the Icon visible. In the content layer, hide both the Overline Text and the Commands.

The modifications required here involve updating the Icon instance and setting the corner radius to 8.
Set the cardDesign layer frame to fixed for both vertical and horizontal alignment. The layer beneath the card should be configured to fill in both directions, and its auto layout needs to be centered.
Apply an Auto Layout to the card, setting the vertical spacing to 12 and both horizontal and vertical padding to 16. Then, switch the Auto Layout orientation to horizontal. (Remember to duplicate your card design for this step.)
We’ll populate the rest of the details through data binding, which will be discussed later.

Recent Files Header

This part mirrors the NavTitle section.

Start by placing a text element on the canvas, styling it as Title Medium, and wrapping it in an Auto Layout.
Next, introduce two IconButtons, update their instances, and arrange them in an auto layout with a horizontal gap of 10. Then, group the newly formed auto layout and the text auto layout into a single auto layout.
Ensure the encompassing auto layout has a left padding of 16, with right and bottom padding set to 8. The horizontal gap should be on Auto, and the alignment should be bottom-aligned.

ListItem for Recent files

To display the list of recent files, we’ll utilize the ListItem Control, which will be filled using data bindings. Begin by placing it on your canvas.

1. Within the properties, disable the primary and secondary commands and convert the TrailingToggleButton to an IconButton (updating the instance to a horizontal more icon). In the ListItem’s Content > Text layer, you should also conceal the overline text.
2. Set the frame mode to Fixed with a size of 64, and adjust the properties to include a horizontal padding of 16 and a vertical padding of 8.
3. Group your ListItem and Section Header together in a frame. (Feel free to duplicate your ListItem as needed; for the sake of this example, we’ll create 4 copies.)

Hyperlink & FAB

For our final section, we need a Hyperlink Button and a FAB (Floating Action Button). The Hyperlink Button will be part of the previous section, while the FAB will have its own space.

Insert a Hyperlink Button from the library, set its text to “See More,” and apply the Title Small text style (SF Pro Text, Regular, 17).
Place it beneath your ListItems, adjusting the frame to Fill horizontally and be fixed vertically, with horizontal padding of 16 and vertical padding of 12.
Add another Divider component below the Hyperlink Button for visual separation.
For the FAB, bring it onto your canvas from the library.
Wrap it in a vertical auto layout, aligning it to the top left with a horizontal gap of 16.
Position it on your template page below the Hyperlink Button, setting the horizontal frame to fill and the vertical frame to fixed.
In the Frame properties, opt for an absolute position to ensure it stays in place.
Adjust the FAB’s corner radius to 99 for that perfectly rounded look.

Now if we run the plugin we should see a data-less interpretation of our design.

Adding DataBinding with DataContext

The DataContext tab in the Uno Figma Plugin is pivotal for defining the DataContext for bindings, a feature that’s particularly beneficial in the Preview tab. This feature is key for simulating how data interacts with UI elements in the app.

Key Points to Remember

Data Input: The tab accepts data in JSON format.
Saving: Remember to save your changes for them to be effective.
Working with Developers: Ensure that JSON data aligns with the app’s ViewModel structures.

Setting Up DataContext

Choose Your Target: Select the layer that houses your ListItems
Launch the plugin: In the content section of the Properties tab, enter {recents}, and in Type, select ListView.
Bind Text and Image content: For each content layer (subtitle, secondary title, and image), add a binding as previously described.

- For image component I added {photo}
- For Subtitle I added {doctitle}
- For secondary title I added {lastopened}

Head to the DataContext Tab: fourth from the left in the plugin’s interface.
Enter Your JSON Data: Type your data in the JSON format. This step is crucial, and it’s best if the data comes directly from a developer to ensure consistency with the app’s data structures.
Save to Secure Your Work: Click the Save button at the bottom of the tab to ensure that all your changes are applied.

Do the same for the Preview section.

Here is the JSON data used:

				
					{
  "files": {
    "thumbnail": "https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2024/03/18220748/Card.png",
    "doctitle": "FY24 Picker",
    "lastopened": "You recently opened this",
    "recents": [
      {
        "doctitle": "S&A Brainstorm",
        "lastopened": "Audrey Webb sent 3 days ago",
        "Photo": "https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2024/03/18235627/Icon-40x40-1.png"
      },
      {
        "doctitle": "FY25 Sales Projection",
        "lastopened": "Kristine Mitchell sent 3 days ago",
        "Photo": "https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2024/03/18235910/Icon-40x40p.png"
      },
      {
        "doctitle": "Edge Brand growth MSAI",
        "lastopened": "Audrey Edwards sent 3 days ago",
        "Photo": "https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2024/03/18235917/x.png"
      },
      {
        "doctitle": "Design hiring matrix",
        "lastopened": "Dustin Steward sent 4 days ago",
        "Photo": "https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2024/03/18235917/x.png"
      }
    ]
  }
}

For a more in-depth explanation of how to effectively set up your DataContext, check out this Uno Tech Bite.

Importing C# or XAML and override files to your project

Create a new project: with the Uno Platform Wizard Template. (Opt for the live wizard template if you’re using VS Code or Rider.)

Add Namespace: In Figma, run the plugin and navigate to the properties tab (third icon from the left). Click on “Application” and enter your application’s Namespace.

Export Code: Head to the export tab and choose “copy.”

Import generated code to your project: In your IDE, open your MainPage.xaml or MainPage.cs file (if you’re using C# markup). Clear the existing content in your editor and paste the copied code.

Import Override files: In the Figma plugin, select the color override file from the export tab’s dropdown and copy it. Then, paste it into the override.color file in your IDE. Repeat these steps for font overrides.

Next Steps

Ready to build with beauty, productivity, flexibility, and modularity in mind?

Download our Visual Studio extension, install and run uno-check for a smooth setup, and use our simple counter app tutorial to get your first cross-platform application running.

Uno Platform Team

Tags:

Introducing ScottPlot Support for Uno Platform

🕓 3 MIN Advanced Cross-Platform Data Visualization …

Navigation in Uno Platform: A Comprehensive Guide to Uno.Extensions Navigation

🕓 5 MIN When developing applications, effective …

Why every .NET developer is already an Uno Platform developer

🕓 4 MIN As more organizations consider …