Replicating a Dating App UI with .NET, Uno Platform and Figma

Uno Platform Team
June 16, 2023

If you want to streamline your workflow, improving the design-to-code process can help you focus on the code behind and get you to production quicker without compromising the beauty of your UI. Uno Platform and Figma are the perfect combinations to achieve a beautiful and pixel-perfect app while improving efficiency.

In this tutorial, we’ll guide you through using Uno Platform for Figma to create a dating app UI, covering various sections and components of a UI. By the end, you’ll have the skills to design a stunning UI for your Uno Platform apps and seamlessly export it into Visual Studio. Lets jump in!

Understanding Auto Layouts

With Auto Layouts, you can effortlessly arrange and organize components within frames, allowing them to automatically adjust their positions, sizes, and spacing as needed. In addition, by utilizing constraints and alignment options, you can create dynamic designs that seamlessly adapt to varying screen sizes and content changes. This feature streamlines building cohesive and scalable UIs, enhancing design consistency and productivity within Figma.

How to Create an Auto Layout in Figma

We’ll frequently use Auto Layouts in our design. To ensure you can easily follow along, let’s take a moment to make sure to understand how to create them. It’s a straightforward process, though it may seem daunting for intricate designs. Don’t worry, we’ll break it down for you step by step!

Select the components or elements that you want to include within the Auto Layout.
Click Shift + A on the selected items. Figma will automatically group the selected items into an Auto Layout frame, indicated by a bounding box and control handles.
You can further customize the Auto Layout properties by adjusting options such as direction (horizontal or vertical), spacing, padding, and alignment in the design panel.

Now that you better understand when and why we use auto layouts, you’ll be equipped with the knowledge necessary to dive into the upcoming tutorial.

Getting Started with Uno Figma

If you’re new to the Uno Platform for Figma plugin, the first step is to install it from the Figma community here. Once you have downloaded and installed the plugin, you can move on to the following steps:

Start by opening a new Material Toolkit file in Figma.
Set your desired theme for the project. You can use DSP (Design System Package) files to quickly transform the theme.
Create a new page within the file to design your mobile app.
Add the Standard Page Template to the newly created page and detach the instance.

These four steps are the initial actions for any new mobile project using Uno Figma. Following this workflow will set you on the right path to effectively using the Uno Platform for Figma plugin and creating impressive mobile app designs.

Get Started video for reference downloading the plugin and Material Toolkit.

Breaking Down our Dating App UI

This tutorial will walk you through recreating a dating app UI in Figma. To make it easier to understand and follow along, we will break down the UI into four sections, and the blog will follow the same structure to demonstrate the steps to achieve each section.

Section 1: Main Image and Floating Action Buttons

Let’s dive into the first section of our dating app UI, where we’ll focus on the main image and three floating action buttons overlayed. To start, follow these steps:

Image

Expand the layers of your Standard Page Template and selectively hide the Navigation Bar and Bottom TabBar
Import an image onto your canvas and drag and drop it into Section 1 of your Scrollable container.
Within the Content.Scrollable and Section 1 layers, set any horizontal and vertical padding to 0.
Apply a rounded corner radius to the bottom corners of your image. (0, 0, 40, 40)

*Note: you can delete placeholder text as you progress

Floating Action Buttons

Locate the FAB (floating action button) in the Components list and add it to your canvas.
Customize the button’s appearance according to your preferences. For example, set the corner radius to 50 to make it round.
Select the icon layer within the FAB layer, and in the Design panel, change the variant to your desired icon.
Duplicate the FAB button and modify the icon as needed.
Duplicate it again, and this time in the Design Panel, change its type to Large.
Select all three FAB buttons, align them and group them in an Auto Layout frame (Shift+A).
Drag the grouped FAB buttons into Section 1 of your design.
Select the absolute position option and position the buttons so that they overlay the bottom portion of the image.
Select the grouped FABs as well as the image and group them into another Auto Layout and set the frame properties to Fill.

To make sure you’re on the right track, let’s visualize it within the Uno Figma plugin:

Select the desired screen, right-click, and choose “plugins > Figma to XAML.”
In the Preview Tab, click the refresh button, and the result should be displayed.

Section 2: Name, Age & Profession and Messaging Button

Here, we’ll highlight essential user details such as their name, role description, and a messaging button. Let’s dive in and follow these steps to bring this section to life:

Add text fields for the name, age, and profession. Then, arrange the name and age side by side and position the profession below.
Select the name and age text fields and apply an auto layout to ensure proper alignment and responsiveness.
Choose the auto layout created in the previous step and the profession text field. Then, apply another auto layout to group them.
Add a floating action button (FAB) and customize it. Then, select both the FAB and the auto layout from the previous step, and create another auto layout to organize them.

Section 3: About

Section 3 follows a similar approach as Section 2. Let’s dive in and create the About section by following these steps:

Begin by adding a text field for the About title and the read more link.
Select both elements and apply an auto layout to ensure proper alignment and responsiveness.
Introduce the text field for the description and select the auto layout from the previous step, along with the description itself. Apply another auto layout to group them seamlessly.
Fine-tune the visual aesthetics by modifying the horizontal and vertical padding to achieve the desired spacing and alignment.

Section 4: Interests using SuggestionChip

In this section, we’ll explore displaying user interests using the SuggestionChips. Let’s continue with these finals steps to complete our design:

Start by adding a Text field for the title and apply an Auto Layout to it.
Drag and drop the Title into section 4.
Head to the components list and grab a SuggestionChip. Drop it onto your canvas.
To enhance the variety of interests, duplicate the chip twice for a total of three chips.
Select all three chips, align them and apply an Auto Layout.
Duplicate this trio of SuggestionChips for a second row.
Select both rows of SuggestionChips and group them in au Auto Layout.
Drag and drop this frame below the Title in section 4.
Fine-tune the padding to achieve the desired horizontal and vertical spacing.

Moving from Figma Design to Visual Studio

Once the UI design in Figma is complete, we can leverage the code generated by the Uno Figma plugin to seamlessly transition to Visual Studio. From there, we can enhance and expand upon our UI, bringing it to life through further development.

Open the Uno Figma Plugin

In the first tab (Properties) under Application, you can change your namespace.
Next, go to the export tab and select export (bottom right button)
Open Visual Studio and create a new project using the Uno App Template.
Open your MainPage.xaml, select all and remove and paste your exported code from Uno Figma Plugin.
(optional) You can also export the color override file and paste it into your ColorPallet.Override.xaml
Find that in the dropdown in the export tab of the plugin.

Here's an example of the generated XAML code that you can import into Visual Studio:

				
					<Page 
    xmlns:uen="using:Uno.Extensions.Navigation.UI" 
    xmlns:uer="using:Uno.Extensions.Reactive.UI" 
    xmlns:utu="using:Uno.Toolkit.UI" 
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
    xmlns:um="using:Uno.Material" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="using:DatingApp" 
    x:Class="DatingApp.DatingAppPage" 
    mc:Ignorable="d" Background="{ThemeResource BackgroundBrush}" 
    utu:StatusBar.Foreground="Auto" 
    utu:StatusBar.Background="{ThemeResource SurfaceBrush}" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Page.Resources>
    <x:String x:Key="Icon_Close">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_Favorite">F1 M 15 27.525001525878906 L 12.825000286102295 25.54500191504041 C 5.1000001430511475 18.540001557893277 0 13.920000439378795 0 8.250000285842432 C 0 3.6300002402115927 3.630000114440918 0 8.25 0 C 10.860000014305115 0 13.364999949932098 1.215000313893984 15 3.135000337501968 C 16.6350000500679 1.215000313893984 19.139999985694885 0 21.75 0 C 26.369999885559082 0 30 3.6300002402115927 30 8.250000285842432 C 30 13.920000439378795 24.899999856948853 18.54000227314904 17.174999713897705 25.56000225888289 L 15 27.525001525878906 Z</x:String>
    <x:String x:Key="Icon_Send">F1 M 0.009999990463256836 18 L 21 9 L 0.009999990463256836 0 L 0 7 L 15 9 L 0 11 L 0.009999990463256836 18 Z</x:String>
    <x:String x:Key="Icon_Star_Rate">F1 M 12.430000305175781 8 L 10 0 L 7.569999694824219 8 L 0 8 L 6.180000305175781 12.40999984741211 L 3.8299999237060547 20 L 10 15.309999465942383 L 16.18000030517578 20 L 13.829999923706055 12.40999984741211 L 20 8 L 12.430000305175781 8 Z</x:String>
  </Page.Resources>
  <utu:AutoLayout Background="{ThemeResource BackgroundBrush}">
    <ScrollViewer utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:AutoLayout Spacing="8">
        <utu:AutoLayout Spacing="8" Padding="0,0,0,50" PrimaryAxisAlignment="Center" Height="357.25">
          <Border utu:AutoLayout.PrimaryAlignment="Stretch" CornerRadius="0,0,40,40">
            <Image Source="https://picsum.photos/390/307" Stretch="UniformToFill" />
          </Border>
          <utu:AutoLayout Spacing="31" Orientation="Horizontal" utu:AutoLayout.IsIndependentLayout="True" Margin="58.28076,259,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Button utu:AutoLayout.CounterAlignment="Center" CornerRadius="50" Style="{StaticResource FabStyle}">
              <um:ControlExtensions.Icon>
                <PathIcon Data="{StaticResource Icon_Close}" />
              </um:ControlExtensions.Icon>
            </Button>
            <Button utu:AutoLayout.CounterAlignment="Center" CornerRadius="50" Style="{StaticResource LargeFabStyle}">
              <um:ControlExtensions.Icon>
                <PathIcon Data="{StaticResource Icon_Favorite}" />
              </um:ControlExtensions.Icon>
            </Button>
            <Button utu:AutoLayout.CounterAlignment="Center" CornerRadius="50" Style="{StaticResource FabStyle}">
              <um:ControlExtensions.Icon>
                <PathIcon Data="{StaticResource Icon_Star_Rate}" />
              </um:ControlExtensions.Icon>
            </Button>
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Padding="0,0,20,0" PrimaryAxisAlignment="Center" Orientation="Horizontal" Height="80">
          <utu:AutoLayout Spacing="8" Padding="30,0,0,0" utu:AutoLayout.PrimaryAlignment="Stretch">
            <TextBlock Text="Emily Anderson, 28" Height="25" Foreground="{ThemeResource OnSecondaryContainerBrush}" Style="{StaticResource TitleLarge}" />
            <TextBlock Text="Developer" Height="25" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
          </utu:AutoLayout>
          <Button Background="{ThemeResource OnPrimaryBrush}" Margin="10,0,10,10" utu:AutoLayout.CounterAlignment="Center" CornerRadius="10" Style="{StaticResource FabStyle}">
            <um:ControlExtensions.Icon>
              <PathIcon Data="{StaticResource Icon_Send}" />
            </um:ControlExtensions.Icon>
          </Button>
        </utu:AutoLayout>
        <utu:AutoLayout Padding="30,18,30,8" PrimaryAxisAlignment="Center" Height="136">
          <utu:AutoLayout Spacing="200" Padding="0,0,0,10" Orientation="Horizontal">
            <TextBlock Text="About" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource OnSecondaryContainerBrush}" Style="{StaticResource TitleMedium}" />
            <TextBlock Text="Read More" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleSmall}" />
          </utu:AutoLayout>
          <TextBlock TextWrapping="Wrap" Text="My name is Emily. I’m vibrant and outgoing and someone who enjoys exploring the outdoors. I have a creative mindset and passion for connecting with others." Margin="0,10" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
        </utu:AutoLayout>
        <utu:AutoLayout Spacing="10" Padding="0,8,0,18" PrimaryAxisAlignment="Center">
          <TextBlock Text="Interest" Margin="30,5,0,0" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource OnSecondaryContainerBrush}" Style="{StaticResource TitleMedium}" />
          <utu:AutoLayout Padding="30,0,0,0">
            <utu:ChipGroup Margin="0,0,0,5" utu:AutoLayout.CounterAlignment="Start" Width="390" Style="{StaticResource SuggestionChipGroupStyle}">
              <utu:ChipGroup.ItemsPanel>
                <ItemsPanelTemplate>
                  <StackPanel Spacing="5" Orientation="Horizontal" />
                </ItemsPanelTemplate>
              </utu:ChipGroup.ItemsPanel>
              <utu:Chip Content="Music" VerticalAlignment="Top" />
              <utu:Chip Content="Art History" VerticalAlignment="Top" />
              <utu:Chip Content="Art Film" VerticalAlignment="Top" />
            </utu:ChipGroup>
            <utu:ChipGroup utu:AutoLayout.CounterAlignment="Start" Width="390" Style="{StaticResource InputChipGroupStyle}">
              <utu:ChipGroup.ItemsPanel>
                <ItemsPanelTemplate>
                  <StackPanel Spacing="5" Orientation="Horizontal" />
                </ItemsPanelTemplate>
              </utu:ChipGroup.ItemsPanel>
              <utu:Chip CanRemove="False" Content="Photo" VerticalAlignment="Center" />
              <utu:Chip CanRemove="False" Content="Design" VerticalAlignment="Center" />
              <utu:Chip CanRemove="False" Content="Dancing" VerticalAlignment="Center" />
            </utu:ChipGroup>
          </utu:AutoLayout>
        </utu:AutoLayout>
      </utu:AutoLayout>
    </ScrollViewer>
  </utu:AutoLayout>
</Page>

That’s it: Figma, Uno Platform and .NET For-the-win

Throughout this tutorial, we embarked on a journey of replicating a dating app UI using the powerful tools of Uno Platform, .NET and Figma. We explored a range of controls available and gained insights into their effective implementation. By harnessing the capabilities of auto layouts, we achieved responsive designs that adapt to various screen sizes seamlessly. Additionally, we discovered the seamless integration between Figma and Visual Studio, allowing us to effortlessly export our code and continue building upon our UI.

You are now well-prepared to embark on your own UI design ventures using Uno Platform and Figma. We can’t wait to see all the amazing designs and apps you create! Don’t forget to share them with us. Just give us a shout-out on Twitter or shoot us an email.

Happy designing and coding!

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.9 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)