Join our Discord server for community support and discussions

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

19 Oct 2022

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.

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)

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.”

In the layers panel, navigate to the Navigation Bar and toggle off Trailing Icon
(Author Page > Body > Page> Navigation Bar)
Open the Leading Icon tab; nested inside is the icon. Select it and swap instances to Keyboard_arrow_left
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.

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)

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.
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.
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.
Next, add the Icon Button to your canvas, swap the icon instance to the “more_Horizontal” icon, and change the button color.
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.

Add an image component to your canvas
Add Text to represent the book Title and Author
Add a Rating Control from the components list
Add another line of Text for the date
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.
Add a Button and frame the button with the Auto-Layout created above to create another Auto Layout.
Select the frame encompassing all of your components, selct your image, and create another Auto-Layout once again.
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;

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.

Project created and authored by Paula Aliu

Tags:

Figma, Goodreads, Tutorial, UI, XAML

Share this post:

Uno Platform for Figma plugin RTM!

🕓 6 MIN Two years ago, we …

•

February 27, 2024

Uno Figma Plugin’s Gift of Custom Fonts and Refreshed UI

🕓 3 MIN In the spirit of …

•

December 22, 2023

Five is for 5X productivity. Announcing Uno Platform 5.0

🕓 10 MIN Today’s release is a …

•

November 1, 2023

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

Replicating Goodreads Author Page

Step 1: Top Navigation Bar

TIP

Step 2: Author Profile Card

Adding Auto Layouts to our Components

Below is the process and result of our author card

Step 3: Book List

Final Result

TIP

Next Steps

Share this post:

Related Posts

Uno Platform for Figma plugin RTM!

Uno Figma Plugin’s Gift of Custom Fonts and Refreshed UI

Five is for 5X productivity. Announcing Uno Platform 5.0

Tools

Platform

Migration

Resources

Support