Uno Figma
Replicating Pet Adoption UI with Uno Platform and Figma

Figma is notably regarded as a design tool. However, it is also easy for developers to learn and use, even with limited design experience. Furthermore, the Uno Platform for Figma plugin allows you to export your designs directly into code, saving time, streamlining the development process and improving the consistency of designs. This tutorial will walk you through creating a Pet UI mobile screen and exporting your Figma designs into code, including setting up your Figma file and designing using Uno Material Toolkit components. By the end of this tutorial, regardless of being a developer or designer, you will have a solid understanding of using Figma to create and export designs into code. Let’s get started! Pet Adopt UI https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/12/20102237/Uno__PETUI.webm Before Getting Started Install the Uno Platform Plugin Copy the Uno Material Toolkit Set up your Canvas and Screen Start by opening your file, selecting the cover page, and renaming it. 2. Continue to the Getting Started page. This is where you will want to set up all aspects of your app’s theme (Color styles, Font styles). These can always be changed later, but best practice would recommend you do it at the onset of your project. Note: all the

December 20, 2022
Building a Profile Page with Uno Platform for Figma

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. Profile Page – Playground File 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.

December 6, 2022
Uno Platform for Figma Preview 4 – Updated UI, Auto-Layout Features and Custom Components

Today weā€™re releasing Preview 4 of our plugin to continue helping front-end engineers and designers deliver apps faster by improving the design to code handoff. Our latest release packs an updated UI, improved Auto-Layout features, the flexibility to use custom components, and further performance improvements provided by the Uno Platform 4.6 update. Updated Plugin UI inside Figma Based on your feedback, we improved the user interface to provide a more intuitive interface. If youā€™ve used the plugin before, along with the visual changes, youā€™ll notice that weā€™ve reorganized the menu. The Tabs are now labeled, making it easier for users to navigate and customize the pluginā€™s parameters to better suit each use case scenario. https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/12/01125541/New-UI.mp4 Other UI improvements include introducing a new Console Tab, which provides information and warnings about what the plugin is doing. This is the first rollout of the console, so we are still in an experimental stage; however, this should prove more important in future releases to help users identify and fix common errors and mistakes. A few other notable changes to the UI include renaming the Code tab to Export and permitting the user to switch between views; such as XAML, Global Resources, and Localization

December 1, 2022
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

November 1, 2022
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

October 24, 2022
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

October 19, 2022
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

October 11, 2022
Uno Platform for Figma Preview 3 ā€“ Improved Flexibility, Performance, and UX

Weā€™re pleased to announce the release of the third preview of our Figma plugin, a faster and more efficient way to produce your applications! The Uno Platform for Figma plugin now includes parameters that accept user overrides, shape support, and auto-layout optimization. If you havenā€™t tried it yet, hereā€™s how to go from Figma design to XAML code in a few simple steps. Let’s unpack this preview. About Uno Platform for Figma Uno Platform for Figma lets you create high-fidelity designs in Figma, then easily export your Figma design into clean, responsive XAML code. The result is a more streamlined design-to-development handoff which significantly boosts app development productivity. The resulting code is clean and easy to understand, so developers can build upon and extend it quickly. Overrides While talking to designers and developers using Uno Platform for Figma Preview 2, we noted a desire for greater flexibility regarding overriding component properties defined in the design system. Now, as of Preview 3, users can set property overrides to components giving users the flexibility they want to customize components to suit their new context or explore iterations of a design. Suppose your design uses a consistent set of buttons, yet you need

September 21, 2022
Replicating Outlook UI with Uno Platform for Figma

It is safe to say as developers, we are always up for learning new tools that could improve our skill set and allow us to reduce time spent on the design-to-developer handoff. Imagine a tool that would not only speed up production but also allow those with little design experience to quickly lay out everything they need to deliver a beautiful front end and generateĀ high-fidelity designs into XAML. Now you are likely wondering “But how do I do it if I’m a developer, not a designer…”? šŸ¤” Relax, the good news is we have the Uno Platform for Figma Plugin. To help you learn more about Uno Platform for Figma, in this article we will learn how to install the plugin, set up Uno Toolkit, and make sure our environment is ready to start replicating the Outlook UI step by step! For clarity, we will divide the article into two sections: Preparing your environment to start with Uno Platform for Figma. Step by step we will replicate the Outlook app UI, inspired by this post. 1. Setting Up Your Environment Getting set up to use Uno Platform for Figma is quite simple. Before starting, make sure you first have a

July 26, 2022

Uno Platform
215 rue St-Jacques, SuiteĀ 500
MontrƩal QC, H2Y 1M6

1-888-926-1276
info@platform.uno

Resources

Developers

Target Platform

Extending & Porting

Tools & Resources

Support

Knowledge

Help

Follow Us

Terms of UseĀ  Ā  Ā  Ā  Ā  Privacy Policy