Goodreads

From Figma to Visual Studio – Adding Back-End Logic to Goodreads App

Now that we have three working views from our previous articles (Part 1, Part 2, Part 3), we can consume them in an Uno Platform App right from Visual Studio.  The Uno Platform Figma plugin has two tabs of interest, the XAML tab, and the Themes tab. The XAML tab houses the generated code for the page you created in Figma, while the Themes tab houses the Resource Dictionary for the page you created. The sample app created can be broken down into four parts: a. Modelsb. View models and seeded Datac. Viewsd. Resource Dictionaries Goodreads Sample App @ GitHub To Follow along, ensure you have set up your environment for Uno Platform. If you are new to Uno Platform, following our official getting started guide is the best way to get started. Models I created 2 Model classes for this recreation effort: The Author and Book. The Author class represents an Author Object which can be linked to a Book object since a Book has an Author property. In addition, I used an Enum to encapsulate several properties in the Book and Author classes, such as the types of Genres a book can fall under. The code snippets below

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

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

Recreating Amazon Goodreads App Home Page Using Material UI, Figma and Uno Platform

Figma is a great tool UX/UI designers use to create stunning interactive renders of UIs for a vast assortment of software applications. Uno Platform released a Figma plugin earlier this year to bridge the UI design to code handoff. This plugin allows users to convert their material-based UI designs to XAML code which can be consumed in an Uno Platform application. This series of articles will highlight how to recreate some of the UX in Amazon’s Goodreads app, even if you are just a developer tasked with creating a mobile design. Designers will, of course, be on familiar Figma turf. Specifically, the series will address the following: Recreating the Goodreads Home page Recreating the Goodreads Author page Recreating the Goodreads Books page Consuming Figma Generated code in an Uno Platform Application To follow along, you can find a list of resources & tools used in the series at the end of the article.  https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/10/11143032/Uno_GoodReads_Demo-1.webm Setting up Color Styles and Editing Colors As one of the basic design elements, it’s best practice to set up your colors at the start of the project, but you can always edit them at any point in the project using the following method:(Also detailed in