Figma

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

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

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

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

Announcing Uno Platform 4-0. Four Major Components Added

Four platform additions for speeding up application development announced: Visual Studio Code and Figma integration, Uno Platform Extensions and UI Toolkit.   Today, at UnoConf, we announced Uno Platform 4.0 which marks major new expansion to the platform, and an introduction of a set of new productivity tooling for Visual Studio Code users, a Toolkit of multiplatform-first components, a Figma plugin to eliminate the designer-developer handoff for XAML developers, and a set of Extensions to help with jumpstarting your apps.    Following today’s announcements, with Uno Platform you will be able to develop C# and XAML applications from any operating system or browser, and deploy them to Web, Android, iOS, macOS, Linux and Windows.  Note: If you missed any of UnoConf 2021, you can still experience every moment. Check out the conference here. Uno Platform Extensions To help you bootstrap a new Uno Platform application and get started with proper architecture we are introducing Uno Extensions. The idea is you shouldn’t need to ever write code from scratch for commonly used functions, while retaining an option to easily extend any feature.  Microsoft has extracted a host of capabilities outside of ASP.NET and made them available through Microsoft Extensions – covering hosting, logging, configuration, etc. In turn, Uno Platform Extensions are based on Microsoft Extensions. Reactive (MVU-X) While we have ~10 extensions available, Reactive is one of the bigger ones and deserves special attention. In our