
Replicating Goodreads App Book Detail Page in Figma and Uno Platform
In the previous articles, I demonstrated the step-by-step processes of recreating the Home and Author pages of the Goodreads app using Figma and the Uno Platform Material Toolkit and how to generate the UI code using Uno Platform’s Figma Plugin. In this segment, I will be recreating our final UI, the Book Profile Page, before moving on to the last part of series; how to consume the code produced by the Uno Platform plugin. Amazon Goodreads App Tutorial – Community File Reference Image STEP 1: Page Templates and Navigation By now, if you’ve followed along with our previous two articles, to start the new UI recreation task, you need to drag, drop, and detach the Page template component from the Assets tab which comes as part of the UI library provided in the Uno Material Toolkit. Once that is done, and you’ve renamed your template, we can focus on the navigation components of our UI. Both the Top and Bottom TabBar come as part of the standard page template. Top Navigation Bar For the top Navigation bar, as it already comes as part of the template page, all we need to do is make the custom edits so that it