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

Replicating Pet Adoption UI with Uno Platform and Figma

Figma is notably regarded as a design tool. However, it is also easy for developers to learn and use, even with limited design experience. Furthermore, the Uno Platform for Figma plugin allows you to export your designs directly into code, saving time, streamlining the development process and improving the consistency of designs.

This tutorial will walk you through creating a Pet UI mobile screen and exporting your Figma designs into code, including setting up your Figma file and designing using Uno Material Toolkit components. By the end of this tutorial, regardless of being a developer or designer, you will have a solid understanding of using Figma to create and export designs into code. Let’s get started!

Pet Adopt UI

Getting Started: Setting Up Your Environment

Before starting your project, 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:
  1. Go to the Figma community and search for “Uno Platform”
  2. Select Plugins from the list and choose Uno Platform (Figma to C# or XAML)
  3. Select the “open in” option.
  4. Choose “Playground file” to open the Material Toolkit file.
 
Install the Uno Platform Plugin

Set up your Canvas and Screen

  1. Start by opening your file, selecting the cover page, and renaming it.

2. Continue to the Getting Started page. This is where you will want to set up all aspects of your app’s theme (Color styles, Font styles). These can always be changed later, but best practice would recommend you do it at the onset of your project.

Note: all the instructions to edit colors and fonts are provided on the Getting started page.

3. Create a new page and add a Standard Page Template to your canvas. To do this:

  • Navigate to the Assets tab on the top left pane.

  • Open the list of Local Components > Templates. Select the Page Template and double-click (or drag it) to add it to your canvas.

  • Right-click the Page Template and select Detach Instance. (This allows you to make changes)

4. To begin, the design of this screen doesn’t require top or bottom navigation, so we can go ahead and hide the top and bottom navigation bar. (Toggle off the eye icon in the left pane) and delete section placeholders 4 and 5.

You’re now ready to start adding components and designing your UI. 

Replicating the UI

Our screen can be broken down into three sections:

  • Profile Image

  • Owner and Pet Description

  • Pet Bio (Stacked)

This image shows the visual previews of the code presented in the emulator.

1. Profile Image

  1. Import or select an Image from your folder and drag it onto your canvas. 

  2. Drag it directly onto your Page Template above Section Place Holder 1. 

  3. Set the Horizontal resizing to Fill and the Vertical resizing to Fixed and set to a value of 350.

  4. Select the Content.Scrollable layer, and in the right-hand pane under Auto Layout properties, remove the horizontal and vertical padding.

You can import an image manually to conceptualize your design, however, to render an image inside the plugin you will need to will to have your DataContext call to a library with an API or hosted image. 

Binding DataContext

For any designs containing an image, when launching the plugin, the Previewer will always render placeholder images unless the photo (s) have a DataContext set. You can do this in the Data Context Tab of the plugin.

  • Select the image and launch the plugin.

  • In the Properties Tab, under “Content:” name your data set.

  • Navigate to the Data Context Tab, and set your data using JSON format.

				
					{
    "image": "enter your image URL"
}

  • Update your changes and return to the Preview Tab to see your edits.

If your placeholder image hasn’t updated, go to the Settings Tab and ensure Bindings is toggled on.

Final Result

2. Owner and Pet Description

User Info

For this section, we will use a ListItem and customize it’s properties to match our design.

  1. Open the Assets tab > Components/Collections, select the ListItem and drag it directly Above Section Placeholder 2 – and then delete Section Placeholder 2.

  2. Toggle off Primary and Secondary commands

  3. Open your ListItem layer and select Leading>Template>Image. Change the corner radius to 50

  4. Open your Content Layer>Text>Template and toggle off Overline.

  5. Change your text.

  6. Toggle on Trailing Layer

  7. Open Trailing>Template>Label>Template and toggle off Text 2 and 3.

Description

For this section, we will need Text, with an added Auto Layout.

  1. Add Text and type out a description.

  2. Add an Auto Layout.

  3. Select User Info Frame and your new frame and add an Auto Layout.

Commands

For this section, we will use a Button and an IconButton. 

  1. Add IconButton and change the variant.

  2. Add a stroke and change the corner radius.

  3. Add a Button and change the corner radius.

  4. Change the Fill colour and text colour.

  5. Select both buttons and add an Auto Layout.

Finally, select each section, add an Auto Layout, and drag your created component onto your Page Template.

Pet Bio

For this section, we will use Text, Icons and Auto Layouts.

  1. Start by adding Text to your Canvas and type out the dog’s name.

  2. Add another Text, and type out the breed. Select the layer and add an Auto-Layout.

  3. Add an Icon and Text for the dog’s age. Select the two and add an Auto Layout

  4. Select the 2 frames created one and add another Auto-Layout.

  5. Add another Icon and Text for the address. Repeat the same process as above.

  6. Select your three parent frames and add a final Auto Layout.

  7. Add spacing in your horizontal and vertical padding.

  8. Add a Fill colour and corner radius.

  9. Drag it onto your canvas and add absolute positioning to stack your component in place.

Generated Code to Visual Studio

Here is our generated code which you can import into Visual Studio or your preferred IDE.

				
					<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:Pet.Adopt.UI" x:Class="Pet.Adopt.UI.Adopt_A_Pet_ScreenPage" 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_Access_Time">F1 M 9.989999771118164 0 C 4.46999979019165 0 0 4.480000019073486 0 10 C 0 15.520000457763672 4.46999979019165 20 9.989999771118164 20 C 15.520000457763672 20 20 15.520000457763672 20 10 C 20 4.480000019073486 15.520000457763672 0 9.989999771118164 0 Z M 10 18 C 5.579999923706055 18 2 14.420000076293945 2 10 C 2 5.579999923706055 5.579999923706055 2 10 2 C 14.420000076293945 2 18 5.579999923706055 18 10 C 18 14.420000076293945 14.420000076293945 18 10 18 Z M 10.5 5 L 9 5 L 9 11 L 14.25 14.149999618530273 L 15 12.920000076293945 L 10.5 10.25 L 10.5 5 Z</x:String>
    <x:String x:Key="Icon_Favorite">F1 M 10 18.350000381469727 L 8.550000190734863 17.030000686645508 C 3.4000000953674316 12.360000610351562 0 9.27999997138977 0 5.5 C 0 2.4200000762939453 2.4200000762939453 0 5.5 0 C 7.240000009536743 0 8.909999966621399 0.8100001811981201 10 2.0900001525878906 C 11.090000033378601 0.8100001811981201 12.759999990463257 0 14.5 0 C 17.579999923706055 0 20 2.4200000762939453 20 5.5 C 20 9.27999997138977 16.59999990463257 12.36000108718872 11.449999809265137 17.040000915527344 L 10 18.350000381469727 Z</x:String>
    <x:String x:Key="Icon_Favorite_Border">F1 M 14.5 0 C 12.759999990463257 0 11.090000033378601 0.8100001811981201 10 2.0900001525878906 C 8.909999966621399 0.8100001811981201 7.240000009536743 0 5.5 0 C 2.4200000762939453 0 0 2.4200000762939453 0 5.5 C 0 9.27999997138977 3.4000000953674316 12.36000108718872 8.550000190734863 17.040000915527344 L 10 18.350000381469727 L 11.449999809265137 17.030000686645508 C 16.59999990463257 12.360000610351562 20 9.27999997138977 20 5.5 C 20 2.4200000762939453 17.579999923706055 0 14.5 0 Z M 10.100000381469727 15.549999237060547 L 10 15.649999618530273 L 9.899999618530273 15.549999237060547 C 5.1399993896484375 11.239999294281006 2 8.390000104904175 2 5.5 C 2 3.5 3.5 2 5.5 2 C 7.039999961853027 2 8.539999723434448 2.9900001287460327 9.069999694824219 4.360000133514404 L 10.9399995803833 4.360000133514404 C 11.459999561309814 2.9900001287460327 12.960000038146973 2 14.5 2 C 16.5 2 18 3.5 18 5.5 C 18 8.390000104904175 14.860000610351562 11.239999294281006 10.100000381469727 15.549999237060547 Z</x:String>
    <x:String x:Key="Icon_Location_Pin">F1 M 7 0 C 3.130000114440918 0 0 3.130000114440918 0 7 C 0 8.740000009536743 0.4999998211860657 10.370000123977661 1.4099998474121094 11.84000015258789 C 2.3599998354911804 13.380000114440918 3.609999716281891 14.699999809265137 4.569999694824219 16.239999771118164 C 5.039999693632126 16.989999771118164 5.379999756813049 17.689999997615814 5.739999771118164 18.5 C 5.999999761581421 19.05000001192093 6.209999978542328 20 7 20 C 7.790000021457672 20 8 19.05000001192093 8.25 18.5 C 8.620000004768372 17.689999997615814 8.950000077486038 16.989999771118164 9.420000076293945 16.239999771118164 C 10.380000054836273 14.709999799728394 11.629999935626984 13.390000104904175 12.579999923706055 11.84000015258789 C 13.499999940395355 10.370000123977661 14 8.740000009536743 14 7 C 14 3.130000114440918 10.869999885559082 0 7 0 Z M 7 9.75 C 5.620000004768372 9.75 4.5 8.629999995231628 4.5 7.25 C 4.5 5.870000004768372 5.620000004768372 4.75 7 4.75 C 8.379999995231628 4.75 9.5 5.870000004768372 9.5 7.25 C 9.5 8.629999995231628 8.379999995231628 9.75 7 9.75 Z</x:String>
  </Page.Resources>
  <utu:AutoLayout Background="{ThemeResource BackgroundBrush}">
    <ScrollViewer utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:AutoLayout Spacing="8">
        <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start" Width="390" Height="390">
          <utu:AutoLayout Padding="10" Orientation="Horizontal" utu:AutoLayout.IsIndependentLayout="True" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Image Source="{Binding image}" utu:AutoLayout.CounterAlignment="Start" Width="400" Height="500" />
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Background="{ThemeResource SecondaryContainerBrush}" Spacing="4" Padding="40,12" CornerRadius="30" utu:AutoLayout.IsIndependentLayout="True" Margin="20,314,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="350" Height="136">
          <TextBlock Text="Martha" Margin="0,15,0,0" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource OnBackgroundBrush}" Style="{StaticResource TitleLarge}" />
          <utu:AutoLayout Spacing="33" Orientation="Horizontal">
            <TextBlock TextAlignment="Center" Text="Border Collie" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
            <utu:AutoLayout Spacing="8" Padding="23,0,8,0" PrimaryAxisAlignment="End" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center" utu:AutoLayout.PrimaryAlignment="Stretch">
              <PathIcon Data="{StaticResource Icon_Access_Time}" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceVariantBrush}" />
              <TextBlock TextAlignment="Center" Text="1 year old" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Spacing="12" Orientation="Horizontal">
            <PathIcon Data="{StaticResource Icon_Location_Pin}" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceVariantBrush}" />
            <TextBlock TextAlignment="End" Text="120 N 4th St, Brooklyn, NY, USA" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Padding="8,72,8,92" Height="416">
          <utu:AutoLayout Spacing="16" Padding="16" PrimaryAxisAlignment="Center" Orientation="Horizontal" Margin="0,10" Height="82">
            <Border utu:AutoLayout.CounterAlignment="Start" Width="60" Height="60" CornerRadius="50">
              <Image Source="https://picsum.photos/60/60" Stretch="UniformToFill" />
            </Border>
            <utu:AutoLayout utu:AutoLayout.CounterAlignment="Center" utu:AutoLayout.PrimaryAlignment="Stretch">
              <utu:AutoLayout PrimaryAxisAlignment="Center">
                <TextBlock TextWrapping="Wrap" Text="Harry Jones" Foreground="{ThemeResource OnSurfaceBrush}" Style="{StaticResource TitleMedium}" />
                <TextBlock TextWrapping="Wrap" Text="Owner" Foreground="{ThemeResource OnSurfaceMediumBrush}" />
              </utu:AutoLayout>
            </utu:AutoLayout>
            <TextBlock TextAlignment="End" Text="24.01.2022" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource OnSurfaceBrush}" Style="{StaticResource BodySmall}" />
          </utu:AutoLayout>
          <TextBlock Text="Hi! Martha had impeccable manners when I first met her, most of which I’ve since undone. She’s also become very “chatty” with a full range of Scooby Doo noises when she doesn’t feel she’s getting the attention she deserves." Margin="10" utu:AutoLayout.CounterAlignment="Center" Width="323" Height="150" Foreground="{ThemeResource OnSurfaceVariantBrush}" Style="{StaticResource TitleMedium}" />
          <utu:AutoLayout Spacing="40" Padding="0,10" PrimaryAxisAlignment="Center" Orientation="Horizontal">
            <ToggleButton utu:AutoLayout.CounterAlignment="Center" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="1" CornerRadius="40" Style="{StaticResource IconToggleButtonStyle}">
              <ToggleButton.Content>
                <PathIcon Data="{StaticResource Icon_Favorite_Border}" />
              </ToggleButton.Content>
              <um:ControlExtensions.AlternateContent>
                <PathIcon Data="{StaticResource Icon_Favorite}" Foreground="{ThemeResource OnSurfaceMediumBrush}" />
              </um:ControlExtensions.AlternateContent>
            </ToggleButton>
            <Button Background="{ThemeResource TertiaryBrush}" Content="Adoption" utu:AutoLayout.CounterAlignment="Center" Width="152" Height="45" Foreground="{ThemeResource OnSurfaceBrush}" Style="{StaticResource ElevatedButtonStyle}" />
          </utu:AutoLayout>
        </utu:AutoLayout>
      </utu:AutoLayout>
    </ScrollViewer>
  </utu:AutoLayout>
</Page>

Make sure to follow the steps to get started from Figma to Visual Studio:

  1. Install and bootstrap the Uno Toolkit and Themes.

  2. Create a new Uno App from the templates.

  3. Create a .xaml page to paste the code into.

Pet Adopt Sample App
About Uno Platform

For those new to Uno Platform for Figma Plugin – it offers Figma integration for design-development handoff, and a set of extensions to bootstrap your projects. 

Tags:

Share this post:
Related Posts

Uno Platform

360 rue Saint-Jacques, suite G101,
Montréal, Québec, Canada
H2Y 1P5

USA/CANADA toll free: +1-877-237-0471
International: +1-514-312-6958

Tools
Platform
Migration
Resources
Support

Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch