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

How to Quickly Build Goodreads Author Page with Figma and Uno Platform

For the second page of our Goodreads tutorial, we recreate the Author Page using Uno Platform’s open-source Plugin for Figma and Material Toolkit and generate the accompanying XAML code. Using the same approach, you can quickly build complete UIs for Uno Platform applications at lightning speed.

Uno Platform brings a leading code generation plugin and Uno Material Toolkit into Figma, enabling teams to ship Uno Platform applications faster than ever.

  • Designers can export developer-friendly XAML code for engineers

  • Developers can skip the grunt work of coding UI from scratch.

Amazon Goodreads App Tutorial - Community File

Replicating Goodreads Author Page

The author page of the Goodreads app can be broken down into four sections:

  • Top Navigation Bar

  • Author Profile

  • List of authored books

  • Bottom Navigation bar (Which can be reused from our Home page tutorial)

Author Page - Reference Image

Step 1: Top Navigation Bar

The Standard Page Template provided with the Uno Toolkit already has a pre-set NavigationBar implemented; the generated XAML will correctly invoke a native NavigationBar with a leading icon when exported to your project.

Start by adding the Standard Page Template to your canvas and remember to Detach Instance. Use this opportunity to rename the page template to “Author Page.”

  1. In the layers panel, navigate to the Navigation Bar and toggle off Trailing Icon
    (Author Page > Body > Page> Navigation Bar)

  2. Open the Leading Icon tab; nested inside is the icon. Select it and swap instances to Keyboard_arrow_left

  3. Select the Title, edit the text to “Author Profile” and change the Text Style to Uno Semantic/Title Medium in the text properties

TIP

You can also select a NavigationBar component from the assets list should you need it; however, always ensure the NavigationBar component is placed within the Page layer and outside the Content.Scrollable layer.

Docs: How to Use NavigationBar Component

Step 2: Author Profile Card

The Author’s Details section is a horizontally oriented Auto layout with an Image aligned to the left with a height that hugs the source image to be rendered and another vertically oriented Auto layout. This vertically oriented auto layout consists of Two text blocks representing the Authors Name and follower count, respectively, and a button used to follow or unfollow the Author. The Author’s Bio section is an Auto layout with a single text block child object used to house the Bio of the Author.

  • Profile Image (Image Component)

  • Author Name & Follower Count (Text or TextBox)

  • Follow and More Button (Button and Icon Button)

  • Author Bio (Text or TextBox)

  1. Start by adding an Image component to your canvas, then adjust its frame properties so that its corners are rounded to 100 and its Fixed Horizontal/Vertical values are set to 100.

  2. Add Text to the canvas and type out the author’s name. Change the text style to Uno Semantic/Title Medium in the Text properties. Duplicate the Text, drag it below the first one, and type out the follower count.

  3. Open the Components library and drag a Button onto your canvas. Start by toggling off the icon and editing the button text to “Follow Author.” Round the corners to a value of 4 and change both the button and text color.

  4. Next, add the Icon Button to your canvas, swap the icon instance to the “more_Horizontal” icon, and change the button color. 

  5. Finally, add text for the biography, and change the text style.

Adding Auto Layouts to our Components

  • Select both Texts (Author name and Follower count) and Shift + A to frame them together and create an Auto Layout. (Author Frame)

  • Select both buttons and Shift + A to put them into an Auto Layout. (Buttons Frame)

  • Select the Text frame and the newly created button frame, and again put them into an Auto Layout. (Button and Author Frame)

  • Add an Auto Layout to the bio. (Bio Frame)

  • Select the Button & Author Frame as well as the image and create an Auto Layout. (Image + button + Text Frame) 

  • Finally, select Image + button + Text Frame and the Bio Frame and add another Auto Layout. (Author Card) 

Below is the process and result of our author card

Step 3: Book List

The Author’s books section is a card list consisting of card items customized to mimic the look of the book items on the Goodreads Author Profile page. This section will follow a similar process as we did for the author card above.

  1. Add an image component to your canvas

  2. Add Text to represent the book Title and Author

  3. Add a Rating Control from the components list

  4. Add another line of Text for the date

  5. Create an Auto Layout for the four components above by framing them together (Shift + A). Make sure your Auto Layout is set to a Vertical direction.

  6. Add a Button and frame the button with the Auto-Layout created above to create another Auto Layout.

  7. Select the frame encompassing all of your components, selct your image, and create another Auto-Layout once again.

  8. Select your final frame that nests all of your components, and add a stroke to the bottom of the frame.

Final Result

Once you have duplicated your book detail card a few times, the end result should look like below.

Below is the generated XAML of our design produced by the Uno Platform plugin, which can easily be copied and exported to your preferred IDE to be further worked on. 

				
					  <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}">
    <utu:AutoLayout.Resources>
      <x:String x:Key="Icon_Arrow_Back_Ios">F1 M 11.670000076293945 1.7699999809265137 L 9.899999618530273 0 L 0 9.899999618530273 L 9.899999618530273 19.799999237060547 L 11.670000076293945 18.029998779296875 L 3.5399999618530273 9.899999618530273 L 11.670000076293945 1.7699999809265137 Z</x:String>
      <x:String x:Key="Icon_Arrow_Drop_Down">F1 M 0 0 L 3.75 3.75 L 7.5 0 L 0 0 Z</x:String>
      <x:String x:Key="Icon_Assistant_Navigation">F1 M 11 0 C 4.929999828338623 0 0 4.929999828338623 0 11 C 0 17.070000171661377 4.929999828338623 22 11 22 C 17.070000171661377 22 22 17.070000171661377 22 11 C 22 4.929999828338623 17.070000171661377 0 11 0 Z M 14.569999694824219 16 L 11 14.420000076293945 L 7.430000305175781 16 L 7.060000419616699 15.629999160766602 L 11 6 L 14.949999809265137 15.629999160766602 L 14.569999694824219 16 L 14.569999694824219 16 Z</x:String>
      <x:String x:Key="Icon_Bookmarks">F1 M 16 17 L 18 18 L 18 2 C 18 0.8999999761581421 17.100000023841858 0 16 0 L 5.989999771118164 0 C 4.889999747276306 0 4 0.8999999761581421 4 2 L 14 2 C 15.100000023841858 2 16 2.899999976158142 16 4 L 16 17 Z M 12 4 L 2 4 C 0.8999999761581421 4 0 4.899999976158142 0 6 L 0 22 L 7 19 L 14 22 L 14 6 C 14 4.899999976158142 13.100000023841858 4 12 4 Z</x:String>
      <x:String x:Key="Icon_House">F1 M 17 6.300000190734863 L 17 1 L 14 1 L 14 3.5999999046325684 L 10 0 L 0 9 L 3 9 L 3 17 L 8 17 L 8 11 L 12 11 L 12 17 L 17 17 L 17 9 L 20 9 L 17 6.300000190734863 Z M 8 7 C 8 5.899999976158142 8.899999976158142 5 10 5 C 11.100000023841858 5 12 5.899999976158142 12 7 L 8 7 Z</x:String>
      <x:String x:Key="Icon_Menu">F1 M 0 12 L 18 12 L 18 10 L 0 10 L 0 12 Z M 0 7 L 18 7 L 18 5 L 0 5 L 0 7 Z M 0 0 L 0 2 L 18 2 L 18 0 L 0 0 Z</x:String>
      <x:String x:Key="Icon_More_Horiz">F1 M 2 0 C 0.8999999761581421 0 0 0.8999999761581421 0 2 C 0 3.100000023841858 0.8999999761581421 4 2 4 C 3.100000023841858 4 4 3.100000023841858 4 2 C 4 0.8999999761581421 3.100000023841858 0 2 0 Z M 14 0 C 12.899999976158142 0 12 0.8999999761581421 12 2 C 12 3.100000023841858 12.899999976158142 4 14 4 C 15.100000023841858 4 16 3.100000023841858 16 2 C 16 0.8999999761581421 15.100000023841858 0 14 0 Z M 8 0 C 6.899999976158142 0 6 0.8999999761581421 6 2 C 6 3.100000023841858 6.899999976158142 4 8 4 C 9.100000023841858 4 10 3.100000023841858 10 2 C 10 0.8999999761581421 9.100000023841858 0 8 0 Z</x:String>
      <x:String x:Key="Icon_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>
    </utu:AutoLayout.Resources>
    <utu:AutoLayout utu:AutoLayout.PrimaryAlignment="Stretch">
      <utu:AutoLayout Background="{ThemeResource SecondaryBrush}" Padding="10,0">
        <utu:AutoLayout Spacing="95" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.CounterLength="255">
          <Button Foreground="{ThemeResource OnSurfaceBrush}" utu:AutoLayout.CounterAlignment="Center" Style="{StaticResource IconButtonStyle}">
            <PathIcon Data="{StaticResource Icon_Arrow_Back_Ios}" Foreground="{ThemeResource OnSurfaceBrush}" />
          </Button>
          <TextBlock Foreground="{ThemeResource OnSurfaceBrush}" TextAlignment="Center" Text="Author Profile" utu:AutoLayout.CounterAlignment="Center" Style="{StaticResource TitleMedium}" />
        </utu:AutoLayout>
      </utu:AutoLayout>
      <ScrollViewer utu:AutoLayout.PrimaryAlignment="Stretch">
        <utu:AutoLayout Spacing="8" Padding="8">
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="12" utu:AutoLayout.PrimaryLength="200">
            <utu:AutoLayout Spacing="22" Padding="6" Orientation="Horizontal">
              <Border CornerRadius="100" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="103.64958" utu:AutoLayout.CounterLength="100">
                <Image Source="https://picsum.photos/103/100" Stretch="UniformToFill" />
              </Border>
              <utu:AutoLayout Spacing="14" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnSurfaceBrush}" TextAlignment="Center" Text="Josef Albers" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" TextAlignment="Center" Text="75 followers" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleSmall}" />
                </utu:AutoLayout>
                <utu:AutoLayout Spacing="10" Orientation="Horizontal" utu:AutoLayout.CounterAlignment="Start">
                  <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantLightBrush}" Content="Follow Author" utu:AutoLayout.CounterAlignment="Start" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}" />
                  <Button Foreground="{ThemeResource OnSurfaceBrush}" Background="{ThemeResource SecondaryBrush}" utu:AutoLayout.CounterAlignment="Start" CornerRadius="4" Style="{StaticResource IconButtonStyle}">
                    <PathIcon Data="{StaticResource Icon_More_Horiz}" Foreground="{ThemeResource OnSurfaceBrush}" />
                  </Button>
                </utu:AutoLayout>
              </utu:AutoLayout>
            </utu:AutoLayout>
            <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" TextWrapping="Wrap" Text="Josef Albers was born a German-born American artist&#xA;and educator whose work, both in Europe and in the&#xA;United States, formed the basis of modern art education" Margin="0,10,10,10" Style="{StaticResource LabelMedium}" />
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="4" PrimaryAxisAlignment="Center">
            <utu:AutoLayout Spacing="7" Padding="6,0,6,18" Orientation="Horizontal" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="0,0,0,1">
              <Image Source="https://picsum.photos/82/101" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="82.186264" utu:AutoLayout.CounterLength="101" />
              <utu:AutoLayout Spacing="6" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" Text="Interaction of Color" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="by Josef Albers, Nicholas Fox Weber" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                  <muxc:RatingControl Caption="9,5558 ratings" MaxRating="5" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource RatingControlStyle}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="Published 15 May 2006" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                </utu:AutoLayout>
                <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantDarkBrush}" Content="Enabled" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="40" utu:AutoLayout.CounterLength="141" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}">
                  <um:ControlExtensions.Icon>
                    <PathIcon Data="{StaticResource Icon_Arrow_Drop_Down}" Foreground="{ThemeResource OnPrimaryBrush}" />
                  </um:ControlExtensions.Icon>
                </Button>
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="4" PrimaryAxisAlignment="Center">
            <utu:AutoLayout Spacing="7" Padding="6,0,6,18" Orientation="Horizontal" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="0,0,0,1">
              <Image Source="https://picsum.photos/82/101" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="82.186264" utu:AutoLayout.CounterLength="101" />
              <utu:AutoLayout Spacing="6" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" Text="Interaction of Color" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="by Josef Albers, Nicholas Fox Weber" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                  <muxc:RatingControl Caption="9,5558 ratings" MaxRating="5" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource RatingControlStyle}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="Published 15 May 2006" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                </utu:AutoLayout>
                <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantDarkBrush}" Content="Enabled" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="40" utu:AutoLayout.CounterLength="141" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}">
                  <um:ControlExtensions.Icon>
                    <PathIcon Data="{StaticResource Icon_Arrow_Drop_Down}" Foreground="{ThemeResource OnPrimaryBrush}" />
                  </um:ControlExtensions.Icon>
                </Button>
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="4" PrimaryAxisAlignment="Center">
            <utu:AutoLayout Spacing="7" Padding="6,0,6,18" Orientation="Horizontal" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="0,0,0,1">
              <Image Source="https://picsum.photos/82/101" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="82.186264" utu:AutoLayout.CounterLength="101" />
              <utu:AutoLayout Spacing="6" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" Text="Interaction of Color" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="by Josef Albers, Nicholas Fox Weber" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                  <muxc:RatingControl Caption="9,5558 ratings" MaxRating="5" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource RatingControlStyle}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="Published 15 May 2006" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                </utu:AutoLayout>
                <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantDarkBrush}" Content="Enabled" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="40" utu:AutoLayout.CounterLength="141" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}">
                  <um:ControlExtensions.Icon>
                    <PathIcon Data="{StaticResource Icon_Arrow_Drop_Down}" Foreground="{ThemeResource OnPrimaryBrush}" />
                  </um:ControlExtensions.Icon>
                </Button>
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="4" PrimaryAxisAlignment="Center">
            <utu:AutoLayout Spacing="7" Padding="6,0,6,18" Orientation="Horizontal" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="0,0,0,1">
              <Image Source="https://picsum.photos/82/101" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="82.186264" utu:AutoLayout.CounterLength="101" />
              <utu:AutoLayout Spacing="6" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" Text="Interaction of Color" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="by Josef Albers, Nicholas Fox Weber" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                  <muxc:RatingControl Caption="9,5558 ratings" MaxRating="5" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource RatingControlStyle}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="Published 15 May 2006" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                </utu:AutoLayout>
                <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantDarkBrush}" Content="Enabled" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="40" utu:AutoLayout.CounterLength="141" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}">
                  <um:ControlExtensions.Icon>
                    <PathIcon Data="{StaticResource Icon_Arrow_Drop_Down}" Foreground="{ThemeResource OnPrimaryBrush}" />
                  </um:ControlExtensions.Icon>
                </Button>
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
          <utu:AutoLayout Background="{ThemeResource OnPrimaryBrush}" CornerRadius="4" PrimaryAxisAlignment="Center">
            <utu:AutoLayout Spacing="7" Padding="6,0,6,18" Orientation="Horizontal" BorderBrush="{ThemeResource OnSurfaceVariantBrush}" BorderThickness="0,0,0,1">
              <Image Source="https://picsum.photos/82/101" Stretch="UniformToFill" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="82.186264" utu:AutoLayout.CounterLength="101" />
              <utu:AutoLayout Spacing="6" utu:AutoLayout.CounterAlignment="Start">
                <utu:AutoLayout utu:AutoLayout.CounterAlignment="Start">
                  <TextBlock Foreground="{ThemeResource OnBackgroundBrush}" Text="Interaction of Color" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource TitleMedium}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="by Josef Albers, Nicholas Fox Weber" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                  <muxc:RatingControl Caption="9,5558 ratings" MaxRating="5" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource RatingControlStyle}" />
                  <TextBlock Foreground="{ThemeResource OnSurfaceVariantBrush}" Text="Published 15 May 2006" utu:AutoLayout.CounterAlignment="Start" Style="{StaticResource LabelMedium}" />
                </utu:AutoLayout>
                <Button Foreground="{ThemeResource OnPrimaryBrush}" Background="{ThemeResource SecondaryVariantDarkBrush}" Content="Enabled" utu:AutoLayout.CounterAlignment="Start" utu:AutoLayout.PrimaryLength="40" utu:AutoLayout.CounterLength="141" CornerRadius="4" Style="{StaticResource ElevatedButtonStyle}">
                  <um:ControlExtensions.Icon>
                    <PathIcon Data="{StaticResource Icon_Arrow_Drop_Down}" Foreground="{ThemeResource OnPrimaryBrush}" />
                  </um:ControlExtensions.Icon>
                </Button>
              </utu:AutoLayout>
            </utu:AutoLayout>
          </utu:AutoLayout>
        </utu:AutoLayout>
      </ScrollViewer>
    </utu:AutoLayout>
    <utu:TabBar Style="{StaticResource BottomTabBarStyle}">
      <utu:TabBarItem IsSelectable="True" Content="Home" Style="{StaticResource BottomTabBarItemStyle}">
        <utu:TabBarItem.Icon>
          <PathIcon Data="{StaticResource Icon_House}" />
        </utu:TabBarItem.Icon>
      </utu:TabBarItem>
      <utu:TabBarItem IsSelectable="True" Content="My Books" Style="{StaticResource BottomTabBarItemStyle}">
        <utu:TabBarItem.Icon>
          <PathIcon Data="{StaticResource Icon_Bookmarks}" />
        </utu:TabBarItem.Icon>
      </utu:TabBarItem>
      <utu:TabBarItem IsSelectable="True" Content="Discover" Style="{StaticResource BottomTabBarItemStyle}">
        <utu:TabBarItem.Icon>
          <PathIcon Data="{StaticResource Icon_Assistant_Navigation}" />
        </utu:TabBarItem.Icon>
      </utu:TabBarItem>
      <utu:TabBarItem IsSelectable="True" Content="Search" Style="{StaticResource BottomTabBarItemStyle}">
        <utu:TabBarItem.Icon>
          <PathIcon Data="{StaticResource Icon_Search}" />
        </utu:TabBarItem.Icon>
      </utu:TabBarItem>
      <utu:TabBarItem IsSelectable="True" Content="More" Style="{StaticResource BottomTabBarItemStyle}">
        <utu:TabBarItem.Icon>
          <PathIcon Data="{StaticResource Icon_Menu}" />
        </utu:TabBarItem.Icon>
      </utu:TabBarItem>
    </utu:TabBar>
  </utu:AutoLayout>

TIP

Proper XAML generation depends on usage of the proper templates and components, please read the New design guidelines before starting a new project;

Docs: Using the XAML Tab

Next Steps

If you are new to Uno Platform and the Uno Figma plugin, following our step-by-step guide is the best way to set up your environment and get started.

Get Started with Uno Platform for Figma

Project created and authored by Paula Aliu

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