Replicating Outlook UI with Uno Platform for Figma

26 Jul 2022

It is safe to say as developers, we are always up for learning new tools that could improve our skill set and allow us to reduce time spent on the design-to-developer handoff. Imagine a tool that would not only speed up production but also allow those with little design experience to quickly lay out everything they need to deliver a beautiful front end and generate high-fidelity designs into XAML.  

Now you are likely wondering “But how do I do it if I’m a developer, not a designer…”? 🤔 Relax, the good news is we have the Uno Platform for Figma Plugin.  

To help you learn more about Uno Platform for Figma, in this article we will learn how to install the plugin, set up Uno Toolkit, and make sure our environment is ready to start replicating the Outlook UI step by step!   

For clarity, we will divide the article into two sections:

Preparing your environment to start with Uno Platform for Figma. 
Step by step we will replicate the Outlook app UI, inspired by this post.

1. Setting Up Your Environment

Getting set up to use Uno Platform for Figma is quite simple. Before starting, make sure you first have a Figma account created.

Step 1: Install the Uno Platform for Figma plugin.  

Step 2: Select “Get a copy” of the Uno Platform Material Toolkit from the Figma Community.
(The file will contain a sample Commerce App.)

Step 3: The file will open and you will be greeted with the cover page, I recommend renaming your project here, I have named mine “Outlook App.”   From here, select the Getting Started page for additional instructions.

Step 4: For this exercise, we will use an existing page from the eCommerce sample app. If you want to start a new project from a blank Page Template, refer to the “How to Start a New Project” guide in the Getting Started guide.

Running the Plugin

Before starting our UI, I will show you how to run the Uno Platform plugin:
 Step 1: Navigate to the Pages on the left-hand pane and select the “Example App”. 

Step 2: In the pages below, select the Home page. (or the screen you want to render)

Step 3: Finally, go to the option on the top bar and click on the “Main Menu“. Then, click on the option in the upper left corner -> Plugins -> Uno Platform. 

Click the Preview tab (second one from the left);
Click the Refresh button at the bottom of the tab.

The Preview Tab, allows you to troubleshoot your design and spot issues before the handoff. Preview is dynamic, so you can type into TextInputs, press buttons, and scroll through your design.

Tip: you can also right-click on the screen you want to preview > select Plugins > Uno Platform

#2 Building the UI

Let us start by establishing the structure we’ll use to develop our UI. This helps us have a good understanding of both the code when developing it with Uno Platform Plugin for Figma as well as building upon our generated XAML.

For this tutorial, as a starting point, we will use a page from the Example app provided. However, when starting a new project, it’s recommended to begin with the Page Template component.

To begin, navigate to the “Example app” and copy the Home page. Then create a new page and paste the home page into your canvas.

1. Building the Nav bar

In the Body layer, locate the Navigation Bar and select the template nested inside.
Modify the Leading Icon, Content (title), and Primary Commands to reflect the Outlook app.

Leading icon: Change the instance to “circle_notifications”
Content: Double-click “Uno Commerce” title and change it to Inbox
Primary Commands: Open the primary commands tab and start by hiding one of the trailing icons, as we only need 2. Then select the first command and in the right-hand pane, you can swap instances. Repeat for the second icon.

Your Navigation Bar should look like the following image.

Note: The plugin will not render the bell icon since the native NavigationBar handles the visibility of the leading icon. Because the plugin doesn’t generate XAML for this, it is not shown in the preview.

In our design, we have additional controls contained in the Navigation Bar. Since these aren’t navigation controls, to achieve this we will need to add a Frame that matches the same color so that we have a continuous effect. We will do the following:

Add a Frame and in it we will add a Toggle, and inside add another Frame to achieve the vertical effect with the Filter icon and text.

Here is the result for the added frame:

Here is the result when we put the two together.

FAB Compatibility

Normally we would add the FAB when working on Content.Scrollable, however, in its current state, the plugin does not support Floating Action Buttons. To work around this limitation, the option is to have a regular button entirely inside the top TabBar.
Note: Once FAB support is available, I will update the blog.

Building the Email list:

Inside Content.Scrollable layer, there will be two nested components, Search and Product List. We can hide the Search component and rename the template example to Email List. When you open the Email list you will see nested inside are ListItems. Inside the ListItem, you will find the Leading, Content and Trailing. This is where we will make our modifications.

Inside Leading is where we will Modify the image: Double click on the image; you will find the Fill property which will open an option where you can import the image you need.

In the ListItem, under Content you will find three Text controls added by default, we will use those same ones, as follows:

And we will have a design like the one below:

You can repeat the ListItem or modify your data by visiting the DataContext tab. Use it to set the DataContext for bindings in the Preview tab as shown in the following image:

				
					{ 
    "Emails":[ 
        { 
            "Title": "Kevin Minion", 
            "SubTitle": "I will be sleeping in my home.", 
            "Description": "Hello my friend, I’m kevin and and will not be available for tomorrow morning.", 
            "ProfilePic": "https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Happy-Minion-Icon.png", 
            "Day": "Monday" 
        }, 
        { 
            "Title": "Kevin Minion", 
            "SubTitle": "I will be sleeping in my home.", 
            "Description": "Hello my friend, I’m kevin and and will not be available for tomorrow morning.", 
            "ProfilePic": "https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Happy-Minion-Icon.png", 
            "Day": "Monday" 
        }, 
        { 
            "Title": "Kevin Minion", 
            "SubTitle": "I will be sleeping in my home.", 
            "Description": "Hello my friend, I’m kevin and and will not be available for tomorrow morning.", 
            "ProfilePic": "https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Happy-Minion-Icon.png", 
            "Day": "Monday" 
        }, 
         { 
            "Title": "Kevin Minion", 
            "SubTitle": "I will be sleeping in my home.", 
            "Description": "Hello my friend, I’m kevin and and will not be available for tomorrow morning.", 
            "ProfilePic": "https://cdn2.iconfinder.com/data/icons/despicable-me-2-minions/128/Happy-Minion-Icon.png", 
            "Day": "Monday" 
        } 
 
    ] 
}

Bottom Navigation Bar

The default NavBar Template includes 4 TabBarItems. However, for the purpose of our app redesign, we only need three, so we will hide the bottom one.
Select your first TabBarItem and double click on the Default icon, a menu will open to the right and a selection option will appear:

3. After swapping instances, your Bottom NavBar should look like below:

Result

We can see the result of our design as well as the dynamic preview in the plugin.

Generated XAML

Inside the XAML Tab, you will be able to see the XAML generated by the plugin. You can export it to your preferred IDE and continue building your app.

				
					  <utu:AutoLayout Background="{ThemeResource BackgroundBrush}">
    <utu:AutoLayout.Resources>
      <x:String x:Key="BitmapIcon_Add">F1 M 16 9.142857142857142 L 9.142857142857142 9.142857142857142 L 9.142857142857142 16 L 6.857142857142857 16 L 6.857142857142857 9.142857142857142 L 0 9.142857142857142 L 0 6.857142857142857 L 6.857142857142857 6.857142857142857 L 6.857142857142857 0 L 9.142857142857142 0 L 9.142857142857142 6.857142857142857 L 16 6.857142857142857 L 16 9.142857142857142 Z</x:String>
      <x:String x:Key="Icon_Calendar_View_Day">F1 M 0 11 L 18 11 L 18 13 L 0 13 L 0 11 Z M 0 4 L 18 4 L 18 9 L 0 9 L 0 4 Z M 0 0 L 18 0 L 18 2 L 0 2 L 0 0 Z</x:String>
      <x:String x:Key="Icon_Clear">F1 M 14 1.4099998474121094 L 12.59000015258789 0 L 7 5.590000152587891 L 1.4099998474121094 0 L 0 1.4099998474121094 L 5.590000152587891 7 L 0 12.59000015258789 L 1.4099998474121094 14 L 7 8.40999984741211 L 12.59000015258789 14 L 14 12.59000015258789 L 8.40999984741211 7 L 14 1.4099998474121094 Z</x:String>
      <x:String x:Key="Icon_Email">F1 M 18 0 L 2 0 C 0.8999999761581421 0 0.009999990463256836 0.8999999761581421 0.009999990463256836 2 L 0 14 C 0 15.100000023841858 0.8999999761581421 16 2 16 L 18 16 C 19.100000023841858 16 20 15.100000023841858 20 14 L 20 2 C 20 0.8999999761581421 19.100000023841858 0 18 0 Z M 18 4 L 10 9 L 2 4 L 2 2 L 10 7 L 18 2 L 18 4 Z</x:String>
      <x:String x:Key="Icon_Filter_List">F1 M 7 12 L 11 12 L 11 10 L 7 10 L 7 12 Z M 0 0 L 0 2 L 18 2 L 18 0 L 0 0 Z M 3 7 L 15 7 L 15 5 L 3 5 L 3 7 Z</x:String>
      <x:String x:Key="BitmapIcon_Search">F1 M 12.5 11 L 11.710000038146973 11 L 11.430000305175781 10.729999542236328 C 12.410000324249268 9.589999556541443 13 8.110000014305115 13 6.5 C 13 2.9100000858306885 10.089999914169312 0 6.5 0 C 2.9100000858306885 0 0 2.9100000858306885 0 6.5 C 0 10.089999914169312 2.9100000858306885 13 6.5 13 C 8.110000014305115 13 9.589999556541443 12.410000324249268 10.729999542236328 11.430000305175781 L 11 11.710000038146973 L 11 12.5 L 16 17.489999771118164 L 17.489999771118164 16 L 12.5 11 L 12.5 11 Z M 6.5 11 C 4.009999990463257 11 2 8.990000009536743 2 6.5 C 2 4.009999990463257 4.009999990463257 2 6.5 2 C 8.990000009536743 2 11 4.009999990463257 11 6.5 C 11 8.990000009536743 8.990000009536743 11 6.5 11 Z</x:String>
      <x:String x:Key="Icon_Search2">F1 M 12.5 11 L 11.710000038146973 11 L 11.430000305175781 10.729999542236328 C 12.410000324249268 9.589999556541443 13 8.110000014305115 13 6.5 C 13 2.9100000858306885 10.089999914169312 0 6.5 0 C 2.9100000858306885 0 0 2.9100000858306885 0 6.5 C 0 10.089999914169312 2.9100000858306885 13 6.5 13 C 8.110000014305115 13 9.589999556541443 12.410000324249268 10.729999542236328 11.430000305175781 L 11 11.710000038146973 L 11 12.5 L 16 17.489999771118164 L 17.489999771118164 16 L 12.5 11 L 12.5 11 Z M 6.5 11 C 4.009999990463257 11 2 8.990000009536743 2 6.5 C 2 4.009999990463257 4.009999990463257 2 6.5 2 C 8.990000009536743 2 11 4.009999990463257 11 6.5 C 11 8.990000009536743 8.990000009536743 11 6.5 11 Z</x:String>
    </utu:AutoLayout.Resources>
    <utu:AutoLayout utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:NavigationBar Content="Inbox" Style="{StaticResource PrimaryModalNavigationBarStyle}">
        <utu:NavigationBar.PrimaryCommands>
          <AppBarButton>
            <AppBarButton.Icon>
              <PathIcon Data="{StaticResource BitmapIcon_Search}" />
            </AppBarButton.Icon>
          </AppBarButton>
          <AppBarButton>
            <AppBarButton.Icon>
              <PathIcon Data="{StaticResource BitmapIcon_Add}" />
            </AppBarButton.Icon>
          </AppBarButton>
        </utu:NavigationBar.PrimaryCommands>
      </utu:NavigationBar>
      <utu:AutoLayout Background="{ThemeResource PrimaryBrush}" Padding="16,0,24,0" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.CounterLength="411">
        <ToggleSwitch Header="Focused" utu:AutoLayout.CounterAlignment="Start" />
        <utu:AutoLayout Background="{ThemeResource PrimaryBrush}" PrimaryAxisAlignment="End" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryAlignment="Stretch" utu:AutoLayout.CounterLength="40">
          <utu:AutoLayout PrimaryAxisAlignment="Center" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="End">
            <ToggleButton utu:AutoLayout.CounterAlignment="Center" Style="{StaticResource IconToggleButtonStyle}">
              <ToggleButton.Content>
                <PathIcon Data="{StaticResource Icon_Clear}" Foreground="{ThemeResource OnPrimaryBrush}" />
              </ToggleButton.Content>
              <um:ControlExtensions.AlternateContent>
                <PathIcon Data="{StaticResource Icon_Filter_List}" Foreground="{ThemeResource OnPrimaryBrush}" />
              </um:ControlExtensions.AlternateContent>
            </ToggleButton>
            <TextBlock Foreground="{ThemeResource OnPrimaryBrush}" Text="Filter" utu:AutoLayout.CounterAlignment="Center" />
          </utu:AutoLayout>
        </utu:AutoLayout>
      </utu:AutoLayout>
      <utu:AutoLayout utu:AutoLayout.PrimaryAlignment="Stretch">
        <ListView Background="{ThemeResource SurfaceBrush}" ItemsSource="{Binding Products}" utu:AutoLayout.PrimaryAlignment="Stretch">
          <ListView.ItemsPanel>
            <ItemsPanelTemplate>
              <ItemsStackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
          </ListView.ItemsPanel>
          <ListView.ItemTemplate>
            <DataTemplate>
              <utu:AutoLayout PrimaryAxisAlignment="Center">
                <utu:AutoLayout Spacing="16" Padding="16,16,16,16" Orientation="Horizontal">
                  <utu:AutoLayout utu:AutoLayout.CounterAlignment="Center" utu:AutoLayout.CounterLength="60">
                    <utu:AutoLayout Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryAlignment="Stretch">
                      <Image Source="{Binding ProfilePic}" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="60" utu:AutoLayout.CounterLength="60" />
                    </utu:AutoLayout>
                  </utu:AutoLayout>
                  <utu:AutoLayout utu:AutoLayout.CounterAlignment="Center" utu:AutoLayout.PrimaryAlignment="Stretch">
                    <utu:AutoLayout PrimaryAxisAlignment="Center">
                      <utu:AutoLayout PrimaryAxisAlignment="Center">
                        <TextBlock Foreground="{ThemeResource OnSurfaceBrush}" Text="{Binding Title}" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource BodyLarge}" />
                        <TextBlock Foreground="{ThemeResource OnSurfaceLowBrush}" TextWrapping="Wrap" Text="{Binding SubTitle}" Style="{StaticResource TitleSmall}" />
                        <TextBlock Foreground="{ThemeResource OnSurfaceLowBrush}" TextWrapping="Wrap" Text="{Binding Description}" Style="{StaticResource BodySmall}" />
                      </utu:AutoLayout>
                    </utu:AutoLayout>
                  </utu:AutoLayout>
                  <utu:AutoLayout PrimaryAxisAlignment="End" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
                    <utu:AutoLayout PrimaryAxisAlignment="End" Orientation="Horizontal">
                      <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                        <utu:AutoLayout PrimaryAxisAlignment="End" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="End">
                          <TextBlock Foreground="{ThemeResource OnSurfaceBrush}" TextAlignment="End" Text="{Binding Day}" utu:AutoLayout.CounterAlignment="Start" />
                        </utu:AutoLayout>
                      </utu:AutoLayout>
                    </utu:AutoLayout>
                  </utu:AutoLayout>
                </utu:AutoLayout>
              </utu:AutoLayout>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
      </utu:AutoLayout>
      <utu:AutoLayout Orientation="Horizontal">
        <utu:TabBar utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryAlignment="Stretch" Style="{StaticResource BottomTabBarStyle}">
          <utu:TabBarItem IsSelectable="True" Content="Email" utu:AutoLayout.PrimaryAlignment="Stretch" Style="{StaticResource BottomTabBarItemStyle}">
            <utu:TabBarItem.Icon>
              <PathIcon Data="{StaticResource Icon_Email}" />
            </utu:TabBarItem.Icon>
          </utu:TabBarItem>
          <utu:TabBarItem IsSelectable="True" Content="Search" utu:AutoLayout.PrimaryAlignment="Stretch" Style="{StaticResource BottomTabBarItemStyle}">
            <utu:TabBarItem.Icon>
              <PathIcon Data="{StaticResource Icon_Search2}" />
            </utu:TabBarItem.Icon>
          </utu:TabBarItem>
          <utu:TabBarItem IsSelectable="True" Content="Calendar" utu:AutoLayout.PrimaryAlignment="Stretch" Style="{StaticResource BottomTabBarItemStyle}">
            <utu:TabBarItem.Icon>
              <PathIcon Data="{StaticResource Icon_Calendar_View_Day}" />
            </utu:TabBarItem.Icon>
          </utu:TabBarItem>
        </utu:TabBar>
      </utu:AutoLayout>
    </utu:AutoLayout>
  </utu:AutoLayout>

Do you remember the process of how to run the Uno Platform for Figma plugin that I explained above? Well, now you can do it again and see your app in live preview!!

Our UI replica is complete! I hope you liked it and see a way of using it in your day-to-day work! 💕

Here is the link to see the complete project Project in Figma: https://www.figma.com/file/JqbyX2i9t7izLMNEpTSAhd/Outlook-Sample?node-id=4435%3A31576

See you next time!

Leomaris Reyes

Next Steps

Now that you have seen how the Figma to Uno handoff works, why not try and build a multi-platform application with Uno Platform. Follow our getting started tutorial (5min to complete), designed to help you quickly get a small app up and running everywhere.