Join our Discord server for community support and discussions

Building a Profile Page with Uno Platform for Figma

6 Dec 2022

In this tutorial, we’ll build a completely functional Profile Page using Figma and Uno Platform for Figma plugin to generate responsive XAML code that can be built upon and extended quickly.

Breaking Down the UI

The screen can be broken down into four sections, each with its own set of components:

User Info
- Image
- Text
Call Log
- IconButtons
- TextBlock

Action Buttons
- IconButtons

Bottom Menu
- IconButtons
- Text

Now that we understand the layout of our UI and the components we are using, the next step is picking our theme as an essential design element. It’s best practice to set up your colors at the start of the project.

Editing Color Styles in the Figma Toolkit File

To edit your colors:

In the Styles Panel (right side of the screen when nothing is selected), expand the Colors folder and subfolders to view all color roles used in the document.
Select one that needs an update to follow your brand colors. Right-Click and Select Edit.
From the Properties section of the Edit Style Panel, input the HEX code you want, which will update throughout the entire document.

You can always edit them at any point in the project.

(Instructions are Detailed on the Getting Started Page of the Uno Material Toolkit, or you can learn more about Color Styles in our docs).

Let's Get Started

To start, set up your template and hide the layers that aren’t needed for this screen by following the steps below:

Add a new Standard Page Template from the Component Library to your canvas. Right-click it and Detach instance.
Start by hiding the Status Bar and Bottom Bar. Then in the drop-down menu of the body layer, hide the Bottom TabBar, and in the page layer, hide the Navigation Bar.

Section 1 - User Information

Our UI’s first block comprises a profile image and Text for contact information (Name, #, and email).

Adding a Profile Image

Add an Image to the canvas from the components list and resize it. (100 x 100)
Round Corners to a radius of 100.

The image will remain a placeholder until we add our Data Context. (I will demonstrate this at the end)

Adding User Information

Add a line of Text for the contact information and change the TextStyle to Uno Semantic/Headline Small.
- Repeat for subtitle and body text.
Select the three Texts (Name, #, and email) and add an Auto-Layout (Shift + A).
- Repeat with the image and newly created frame selected.
Drag the frame into Placeholder 1 and adjust frame properties:
- Change horizontal resizing to Fill and vertical resizing to Fixed (value: 300)
- Set AutoLayout properties to BottomAlignment and Spacing between items to 0.

*Note: Delete Selection Place Holders as you progress.

Section 2 - Action Buttons

Add an IconButton from the component library to your canvas.
Open the Icon Layer, and you can change the instance in the right-hand pane.
Select the IconButton. Add a Fill color in the properties and adjust the corner radius to create a circled outline.
Re-select the IconButton and duplicate it 3x (Ctrl + D). Then select all four IconButtons and add an Auto Layout. (Shift + A)
In the AutoLayout properties of the newly created frame, switch to Horizontal Direction, and change the Spacing between Items to 30.
Drag your frame into Section Placeholder 2 and change your Horizontal Resizing to Fill and Center Alignment.

Section 3 - Call Log

Header

For the title of our section: Add Text to your canvas, and in the properties, switch the Color Style and change the font to Uno Semantic/Title Medium.
Drag your title into Section 3, add an Auto-Layout and adjust your frame to Fill Container.
Ensure your AutoLayout is set to Top Left Alignment and your Horizontal Padding to 15.

Call Log Card

Add a TextBlock to your canvas, toggle on headline, subtitle, and body, and change your Text Block AutoLayout to center alignment.

Select an Icon Button from the components library and drag it onto your canvas above the text block we just created.

Select your Text Block, Icon Button, and (Shift + A) to frame them together. Then in your newly created frame, in the properties tab, add a fill color, change your horizontal padding to 15 and vertical padding to 20.
In the frame properties, change your vertical and horizontal resizing to fixed and the values to 175 for both—round corners to a value of 20.
Select your Icon Button and change it to the appropriate instance

Select your frame and duplicate it (Ctrl + D). Select both copies of the card and (Shift + A) to create a single frame and change your spacing between items to a value of 20

Section 4 - Bottom Menu

Add an IconButton to the canvas and in the properties, and change the icon to the appropriate instance.
Add a line of Text next to the IconButton and add an Auto Layout to the Icon and Text.
Add Trailing IconButton so that all three components are in line.
Select the three components and add another Auto Layout.
Duplicate the newly created frame so that you have three identical ones stacked. Select the three frames, add another Auto-Layout, and change the space between items to 200.
Select the frame, add a Fill color, edit the corner radius and adjust the Horizontal/Vertical padding.

Final Result

Data Context Tab

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.

Plugin Generated Code

				
					<utu:AutoLayout Background="{ThemeResource BackgroundBrush}">
    <utu:AutoLayout.Resources>
      <x:String x:Key="Icon_Account_Box">F1 M 0 2 L 0 16 C 0 17.100000023841858 0.8899999856948853 18 2 18 L 16 18 C 17.100000023841858 18 18 17.100000023841858 18 16 L 18 2 C 18 0.8999999761581421 17.100000023841858 0 16 0 L 2 0 C 0.8899999856948853 0 0 0.8999999761581421 0 2 Z M 12 6 C 12 7.659999966621399 10.659999966621399 9 9 9 C 7.340000033378601 9 6 7.659999966621399 6 6 C 6 4.340000033378601 7.340000033378601 3 9 3 C 10.659999966621399 3 12 4.340000033378601 12 6 Z M 3 14 C 3 12 7 10.899999618530273 9 10.899999618530273 C 11 10.899999618530273 15 12 15 14 L 15 15 L 3 15 L 3 14 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_Keyboard_Arrow_Right">F1 M 0 10.59000015258789 L 4.579999923706055 6 L 0 1.4099998474121094 L 1.4099998474121094 0 L 7.409999847412109 6 L 1.4099998474121094 12 L 0 10.59000015258789 Z</x:String>
      <x:String x:Key="Icon_Logout">F1 M 15 4 L 13.59000015258789 5.409999847412109 L 16.170000076293945 8 L 6 8 L 6 10 L 16.170000076293945 10 L 13.59000015258789 12.579999923706055 L 15 14 L 20 9 L 15 4 Z M 2 2 L 10 2 L 10 0 L 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 L 0 16 C 0 17.100000023841858 0.8999999761581421 18 2 18 L 10 18 L 10 16 L 2 16 L 2 2 Z</x:String>
      <x:String x:Key="Icon_Message">F1 M 18 0 L 2 0 C 0.8999999761581421 0 0.009999990463256836 0.8999999761581421 0.009999990463256836 2 L 0 20 L 4 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 16 12 L 4 12 L 4 10 L 16 10 L 16 12 Z M 16 9 L 4 9 L 4 7 L 16 7 L 16 9 Z M 16 6 L 4 6 L 4 4 L 16 4 L 16 6 Z</x:String>
      <x:String x:Key="Icon_Phone">F1 M 3.619999885559082 7.789999961853027 C 5.059999942779541 10.619999885559082 7.380000114440918 12.929999113082886 10.210000038146973 14.379999160766602 L 12.40999984741211 12.180000305175781 C 12.679999858140945 11.910000294446945 13.080000311136246 11.81999958306551 13.430000305175781 11.9399995803833 C 14.550000309944153 12.309999585151672 15.759999990463257 12.510000228881836 17 12.510000228881836 C 17.55000001192093 12.510000228881836 18 12.960000216960907 18 13.510000228881836 L 18 17 C 18 17.55000001192093 17.55000001192093 18 17 18 C 7.609999656677246 18 0 10.390000343322754 0 1 C 0 0.44999998807907104 0.44999998807907104 0 1 0 L 4.5 0 C 5.050000011920929 0 5.5 0.44999998807907104 5.5 1 C 5.5 2.25 5.699999690055847 3.4500001668930054 6.069999694824219 4.570000171661377 C 6.179999694228172 4.9200001657009125 6.099999696016312 5.310000151395798 5.819999694824219 5.590000152587891 L 3.619999885559082 7.789999961853027 Z</x:String>
      <x:String x:Key="Icon_Phone_Callback">F1 M 3.619999885559082 7.800000190734863 C 5.059999942779541 10.630000114440918 7.380000114440918 12.939999341964722 10.210000038146973 14.389999389648438 L 12.40999984741211 12.190000534057617 C 12.679999858140945 11.920000523328781 13.080000311136246 11.829999811947346 13.430000305175781 11.949999809265137 C 14.550000309944153 12.319999814033508 15.759999990463257 12.520000457763672 17 12.520000457763672 C 17.55000001192093 12.520000457763672 18 12.970000445842743 18 13.520000457763672 L 18 17.010000228881836 C 18 17.560000240802765 17.55000001192093 18.010000228881836 17 18.010000228881836 C 7.609999656677246 18.010000228881836 0 10.40000033378601 0 1.0099999904632568 C 0 0.4599999785423279 0.44999998807907104 0.009999990463256836 1 0.009999990463256836 L 4.5 0.009999990463256836 C 5.050000011920929 0.009999990463256836 5.5 0.4599999785423279 5.5 1.0099999904632568 C 5.5 2.259999990463257 5.699999690055847 3.459999918937683 6.069999694824219 4.579999923706055 C 6.179999694228172 4.92999991774559 6.099999696016312 5.320000380277634 5.819999694824219 5.600000381469727 L 3.619999885559082 7.800000190734863 Z M 17.15999984741211 0.7000000476837158 L 16.450000762939453 0 L 10 6.300000190734863 L 10 2.009999990463257 L 9 2.009999990463257 L 9 8.010000228881836 L 15 8.010000228881836 L 15 7.010000228881836 L 10.850000381469727 7.010000228881836 L 17.15999984741211 0.7000000476837158 Z</x:String>
      <x:String x:Key="Icon_Phone_Missed">F1 M 6.5 2.5 L 12 8 L 19 1 L 18 0 L 12 6 L 7.5 1.5 L 11 1.5 L 11 0 L 5 0 L 5 6 L 6.5 6 L 6.5 2.5 Z M 23.709999084472656 13.670000076293945 C 20.659999132156372 10.77999997138977 16.539999961853027 9 12 9 C 7.460000038146973 9 3.339999943971634 10.77999997138977 0.28999999165534973 13.670000076293945 C 0.10999998450279236 13.850000083446503 0 14.099999159574509 0 14.379999160766602 C 0 14.659999161958694 0.10999998450279236 14.910000145435333 0.28999999165534973 15.09000015258789 L 2.7699999809265137 17.56999969482422 C 2.949999988079071 17.749999701976776 3.2000000178813934 17.860000610351562 3.4800000190734863 17.860000610351562 C 3.7500000298023224 17.860000610351562 3.9999998211860657 17.749999925494194 4.179999828338623 17.579999923706055 C 4.969999849796295 16.83999991416931 5.870000123977661 16.21999955177307 6.840000152587891 15.729999542236328 C 7.1700001657009125 15.569999545812607 7.400000095367432 15.22999992966652 7.400000095367432 14.829999923706055 L 7.400000095367432 11.729999542236328 C 8.850000143051147 11.249999552965164 10.399999976158142 11 12 11 C 13.600000023841858 11 15.15000033378601 11.250000268220901 16.600000381469727 11.720000267028809 L 16.600000381469727 14.819999694824219 C 16.600000381469727 15.209999680519104 16.829999834299088 15.55999931693077 17.15999984741211 15.719999313354492 C 18.139999866485596 16.209999322891235 19.029999911785126 16.839999675750732 19.829999923706055 17.56999969482422 C 20.009999930858612 17.749999701976776 20.26000067591667 17.850000381469727 20.530000686645508 17.850000381469727 C 20.8100006878376 17.850000381469727 21.059999763965607 17.73999947309494 21.239999771118164 17.559999465942383 L 23.719999313354492 15.079999923706055 C 23.89999932050705 14.899999916553497 24.010000228881836 14.650000840425491 24.010000228881836 14.370000839233398 C 24.010000228881836 14.090000838041306 23.889999091625214 13.850000083446503 23.709999084472656 13.670000076293945 L 23.709999084472656 13.670000076293945 Z</x:String>
      <x:String x:Key="Icon_Settings">F1 M 16.47800064086914 10.539999008178711 C 16.51800063997507 10.239998996257782 16.538002014160156 9.930000394582748 16.538002014160156 9.600000381469727 C 16.538002014160156 9.280000388622284 16.518000412732363 8.959999859333038 16.468000411987305 8.65999984741211 L 18.498001098632812 7.0799994468688965 C 18.67800110578537 6.93999944627285 18.728001937270164 6.669999793171883 18.61800193786621 6.46999979019165 L 16.698001861572266 3.1500000953674316 C 16.578001864254475 2.9300000965595245 16.328001707792282 2.8599998280406 16.108001708984375 2.929999828338623 L 13.717999458312988 3.8899998664855957 C 13.217999458312988 3.5099998712539673 12.688000500202179 3.1899998039007187 12.098000526428223 2.9499998092651367 L 11.73799991607666 0.4099998474121094 C 11.69799991697073 0.1699998527765274 11.498000368475914 0 11.258000373840332 0 L 7.418000221252441 0 C 7.178000226616859 0 6.987999953329563 0.1699998527765274 6.947999954223633 0.4099998474121094 L 6.588000297546387 2.9499998092651367 C 5.99800032377243 3.1899998039007187 5.458000421524048 3.519999861717224 4.968000411987305 3.8899998664855957 L 2.578000068664551 2.929999828338623 C 2.3580000698566437 2.8499998301267624 2.1080003902316093 2.9300000965595245 1.9880003929138184 3.1500000953674316 L 0.07800034433603287 6.46999979019165 C -0.04199965298175812 6.6799997836351395 -0.001999765634536743 6.93999944627285 0.1980002373456955 7.0799994468688965 L 2.2280001640319824 8.65999984741211 C 2.1780001632869244 8.959999859333038 2.13800048828125 9.29000037908554 2.13800048828125 9.600000381469727 C 2.13800048828125 9.910000383853912 2.1580001823604107 10.239998996257782 2.2080001831054688 10.539999008178711 L 0.17800025641918182 12.120000839233398 C -0.0019997507333755493 12.260000839829445 -0.05199963599443436 12.529999539256096 0.058000363409519196 12.729999542236328 L 1.9780001640319824 16.05000114440918 C 2.0980001613497734 16.270001143217087 2.348000317811966 16.340000458061695 2.568000316619873 16.270000457763672 L 4.958000183105469 15.309999465942383 C 5.458000183105469 15.689999461174011 5.9880000948905945 16.010000005364418 6.578000068664551 16.25 L 6.938000679016113 18.790000915527344 C 6.988000679761171 19.030000910162926 7.178000226616859 19.200000762939453 7.418000221252441 19.200000762939453 L 11.258000373840332 19.200000762939453 C 11.498000368475914 19.200000762939453 11.698000641539693 19.030000910162926 11.72800064086914 18.790000915527344 L 12.088000297546387 16.25 C 12.678000271320343 16.010000005364418 13.218001127243042 15.689999461174011 13.708001136779785 15.309999465942383 L 16.09800148010254 16.270000457763672 C 16.318001478910446 16.350000455975533 16.56800163537264 16.270001143217087 16.68800163269043 16.05000114440918 L 18.608001708984375 12.729999542236328 C 18.728001706302166 12.509999543428421 18.67800086736679 12.260000839829445 18.488000869750977 12.120000839233398 L 16.47800064086914 10.539999008178711 Z M 9.338000297546387 13.200000762939453 C 7.3580002784729 13.200000762939453 5.73799991607666 11.580000400543213 5.73799991607666 9.600000381469727 C 5.73799991607666 7.62000036239624 7.3580002784729 5.999999523162842 9.338000297546387 5.999999523162842 C 11.318000316619873 5.999999523162842 12.938000679016113 7.62000036239624 12.938000679016113 9.600000381469727 C 12.938000679016113 11.580000400543213 11.318000316619873 13.200000762939453 9.338000297546387 13.200000762939453 Z</x:String>
      <x:String x:Key="Icon_Videocam">F1 M 14 4.5 L 14 1 C 14 0.44999998807907104 13.550000011920929 0 13 0 L 1 0 C 0.44999998807907104 0 0 0.44999998807907104 0 1 L 0 11 C 0 11.550000011920929 0.44999998807907104 12 1 12 L 13 12 C 13.550000011920929 12 14 11.550000011920929 14 11 L 14 7.5 L 18 11.5 L 18 0.5 L 14 4.5 Z</x:String>
    </utu:AutoLayout.Resources>
    <ScrollViewer Padding="8" utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:AutoLayout Spacing="12" Padding="8">
        <utu:AutoLayout Padding="30,110,30,0" PrimaryAxisAlignment="End" Height="300">
          <Border utu:AutoLayout.CounterAlignment="Center" Width="100" Height="100" CornerRadius="100">
            <Image Source="{Binding image}" Stretch="UniformToFill" />
          </Border>
          <utu:AutoLayout Padding="0,10,0,0" utu:AutoLayout.CounterAlignment="Center">
            <TextBlock TextAlignment="Center" Text="Darth Vader" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource HeadlineSmall}" />
            <TextBlock TextAlignment="Center" Text="+0123456789" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
            <TextBlock TextAlignment="Center" Text="d.vader@galacticempire.com" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource LabelLarge}" />
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Spacing="30" PrimaryAxisAlignment="Center" Orientation="Horizontal" Height="55">
          <Button Background="{ThemeResource PrimaryInverseBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource OnPrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Phone}" Foreground="{ThemeResource OnPrimaryBrush}" />
          </Button>
          <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Videocam}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
          <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Message}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
          <Button Background="{ThemeResource OnPrimaryBrush}" utu:AutoLayout.CounterAlignment="Center" CornerRadius="30" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Email}" Foreground="{ThemeResource PrimaryBrush}" />
          </Button>
        </utu:AutoLayout>
        <TextBlock Text="Today" Margin="15,0" utu:AutoLayout.CounterAlignment="Start" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
        <utu:AutoLayout Spacing="20" Padding="0,0,0,20" PrimaryAxisAlignment="Center" Orientation="Horizontal">
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Padding="15,10" CornerRadius="35" PrimaryAxisAlignment="Center" utu:AutoLayout.CounterAlignment="Start" Width="175" Height="175">
            <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
              <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource ErrorBrush}" Style="{StaticResource IconButtonStyle}">
                <PathIcon Data="{StaticResource Icon_Phone_Missed}" Foreground="{ThemeResource ErrorBrush}" />
              </Button>
              <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
                <TextBlock Text="Missed Call" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource ErrorBrush}" Style="{StaticResource TitleMedium}" />
                <TextBlock Text="09:23 pm" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
                <TextBlock Text="4" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Padding="15,10" CornerRadius="35" PrimaryAxisAlignment="Center" utu:AutoLayout.CounterAlignment="Start" Width="175" Height="175">
            <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
              <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
                <PathIcon Data="{StaticResource Icon_Phone_Callback}" Foreground="{ThemeResource PrimaryBrush}" />
              </Button>
              <utu:AutoLayout Spacing="8" utu:AutoLayout.CounterAlignment="Center">
                <TextBlock Text="Incoming Call" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
                <TextBlock Text="09:05 pm" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
                <TextBlock Text="1" utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource SurfaceBrush}" Style="{StaticResource TitleMedium}" />
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
        </utu:AutoLayout>
        <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" Spacing="14" Padding="20" CornerRadius="35">
          <utu:AutoLayout Spacing="150" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
            <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
              <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
                <PathIcon Data="{StaticResource Icon_Settings}" Foreground="{ThemeResource PrimaryBrush}" />
              </Button>
              <TextBlock TextAlignment="Center" Text="Settings" utu:AutoLayout.CounterAlignment="Start" Width="82" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
            <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
          </utu:AutoLayout>
          <utu:AutoLayout Spacing="142" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
            <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
              <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
                <PathIcon Data="{StaticResource Icon_Account_Box}" Foreground="{ThemeResource PrimaryBrush}" />
              </Button>
              <TextBlock TextAlignment="Center" Text="Account" utu:AutoLayout.CounterAlignment="Start" Width="91" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
            <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
          </utu:AutoLayout>
          <utu:AutoLayout Spacing="150" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" Width="308">
            <utu:AutoLayout Spacing="5" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Center">
              <Button Background="{ThemeResource BackgroundBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="10" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
                <PathIcon Data="{StaticResource Icon_Logout}" Foreground="{ThemeResource PrimaryBrush}" />
              </Button>
              <TextBlock TextAlignment="Center" Text="Log out" utu:AutoLayout.CounterAlignment="Start" Width="82" Height="40" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource TitleMedium}" />
            </utu:AutoLayout>
            <Button utu:AutoLayout.CounterAlignment="Center" Foreground="{ThemeResource PrimaryBrush}" Style="{StaticResource IconButtonStyle}">
              <PathIcon Data="{StaticResource Icon_Keyboard_Arrow_Right}" Foreground="{ThemeResource PrimaryBrush}" />
            </Button>
          </utu:AutoLayout>
        </utu:AutoLayout>
      </utu:AutoLayout>
    </ScrollViewer>
  </utu:AutoLayout>

Next Steps

First, visit the Figma community to download the Uno Platform for Figma plugin and Uno Material Toolkit. If you are new to Uno Platform, following our official documentation is the best way to get started.

Tags:

Figma, Tutorial

Share this post:

Handling Millions of Data Points in Cross-Platform .NET Applications

🕓 9 MIN Ever wondered how to …

•

October 8, 2024

Bridging the Gap Between MVU and MVVM

🕓 3 MIN State management patterns like …

•

September 30, 2024

Uno Platform 5.4: Perf Improvements and 290+ Issues closed

🕓 3 MIN We are introducing over …

•

September 26, 2024