Figma
Boost Productivity with High-Fidelity Figma Designs and Clean XAML Code. Preview 5 is here!

Share on twitter Share on linkedin Share on reddit We’re happy to announce the release of Preview 5 of Uno Platform’s Figma plugin. Our latest version of the plugin offers enhanced features to benefit both designers and developers. Specifically, it allows the creation of custom colours, eliminating colour limitations and the ability to import Design Systems Packages (DSP), which facilitates sharing design system information across various tools and designs. Additionally, the inclusion of new controls in our toolkit, such as Pips Pager and TabBar with vertical orientation, as well as the ItemsRepeater feature, provides even greater flexibility to create highly dynamic and interactive designs. In this blog post, we’ll take a closer look at the latest features offered in Uno Platform for Figma Plugin Preview 5 and how they can benefit your design-to-code experience. https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2023/04/11151326/uno-figma-preview-5-254195-PREVIEW-1.webm Effortless Color Management We are thrilled to introduce new features that provide users with enhanced flexibility in managing the themes and colours of their apps. These new features empower users to customize their app’s visual appearance and tailor it to their unique preferences and brand identity. With these additions, users can now have greater control over the aesthetics of their apps, enabling them to create truly

April 12, 2023
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
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
Uno Platform 4.3 – Figma Plugin, Uno Extensions, Material Design 3 Support, New Sample App and more

Uno Platform 4.3 is here! The focus of this release was on enhancing our Figma plugin which generates your app XAML directly from Figma designs, as well as advancing Uno Extensions to help bootstrap your apps faster.   When looking at overall productivity and speed at which applications need to be developed, organizations need to consider the full application lifecycle. The application development lifecycle starts much earlier than coding, in the UX/UI design process. Also, the application needs to be bootstrapped quickly so that all members of the development team can start building real value.  We believe that using Uno Platform and its multi-platform capabilities, in combination with Figma integration and Uno.Extensions provide an optimal solution for increasing developer productivity and reducing time to market.   To make it easy for you to learn and experience all these concepts we are unveiling a new sample app –  “Uno To Do” app – with all assets included – from its Figma design files and code which shows how Uno Platform and Uno Extensions work on mobile, desktop and Web.   Figma Plugin and Material 3 Theme Update Uno Platform plugin for Figma is how you go from high fidelity Figma designs to developer-friendly XAML

May 24, 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