Uno Figma
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
Building a Login Page with Uno Platform and Figma

Nowadays, the majority of mobile, web, and desktop applications require some form of authentication to access their features and content. The intent for developers is always to create a simple page with an input field for email/password, and a login button that still reflects the brand’s image. However, it can start to get complicated once we start to accommodate the various use-cases and conditions.  Uno Platform’s plugin and toolkit offer a large library of ready-to-use components that allows developers and designers to take advantage of a set of higher-level UI Controls designed specifically for multi-platform, responsive applications. Thus, making it easier for you to build different screens while still extending the freedom of customization of how you want your components or elements to look. Let’s jump in and learn how you can build a beautiful and responsive login page for your Uno Platform application. To get started with the Uno Figma plugin you will first need to Install the Uno Platform Plugin for Figma and Download (“Duplicate”) Uno Platform Material Toolkit from the Figma community.  Uno Platform for Figma Plugin Uno Platform Material Toolkit Setting the Page Template Creating a new page The first thing you will need to do is create a new page so you can

May 31, 2022
Intro to Figma for .NET Developers

Developers and designers often agree that the “handoff” is a dreaded pain point when collaborating. Every mistake made in the design handoff can impact the app and cause a rework for the developer. One tool that has been quickly gaining traction and has seen increasingly wide use with developers and designers is Figma. Now for those unfamiliar with Figma, it is a free, collaborative interface design tool that has rapidly become the go-to choice for designers. That’s why we chose to integrate a Figma plugin that helps make the designer-developer handoff process smooth and seamless by allowing developers to easily access the complete design files. In the Microsoft ecosystem, we have been using the likes of Expression Blend, Adobe XD, Sketch, and InVision. But Figma has skyrocketed in adoption among designers, as seen by a UX Tools survey. Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the leading design tool choices amongst developers. However, given the UX Tools poll above, we can conclude that Figma is yet to get even more adoption among .NET developers. 3 Features that Make Figma Stand Out Above Other In our opinion, Figma stands out above other options

March 17, 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