Uno Figma

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

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

Intro to Figma for .NET Developers

Developers and designers working together can 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 who are unfamiliar with Figma, it is a free, browser-based design tool that makes the developer handoff process smooth and seamless by allowing developers to readily access the full 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 can be seen by a survey done by UX Tools. Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the main design tool choices amongst developers. 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 for following reasons: Collaboration With Figma, multiple team members can work on