Join our Discord server for community support and discussions

Uno Platform for Figma plugin RTM!

Two years ago, we introduced the first preview of our Uno Platform for Figma plugin. After 8 subsequent previews, nearly 10,000 plugin downloads, and months of hard work, we are super proud to announce its official launch in the Figma marketplace. Our plugin is now generally available for free with a Pro version at just $9/month that extends your code generation capabilities and ensures personalized support from our team.

Note: Uno Platform itself remains open-source and free under Apache 2.0 license.

Why integrate with Figma?

Accelerating software development is at the heart of our mission. Uno Platform, our core open-source project, significantly reduces development time by enabling rapid cross-platform app development for mobile, desktop, and web platforms, all from the same codebase—a major efficiency boost.

Yet, the journey from design to deployment involves more than just coding. The design-to-code handoff, a notorious bottleneck, can consume a staggering amount of time. Our development experiences echo this, with an average mobile app demanding around 5,000 hours from concept to launch and over 3,000 mired in converting designs into functional code.

In the .NET ecosystem, a tool was needed to bridge this gap effectively. Our Figma plugin emerges as a natural extension of the Uno Platform, directly addressing this challenge by seamlessly integrating design and development workflows. This complements our mission of streamlining software development and represents a significant leap forward in developer productivity.

Uno Platform for Figma plugin: Quick Overview

Uno Platform for Figma is a tool for designers and developers that eliminates pains with design-to-development handoff. Using our Figma plugin ensures the app UI markup is generated in seconds and is 100% usable by developers.

With Uno Platform for Figma, we are providing a pragmatic solution for designers and developers, allowing both roles to stay in the tool of their preference. Designers use Figma and developers use IDE of their preference – Visual Studio / VS Code or JetBrains Rider.

But, both designers and developers will appreciate the separation of concerns that comes from using C# Markup or XAML to define the UI.

The process:

Designers use Figma and our free Material Toolkit to rapidly design apps and screens with components for which they are certain are implementable by their developer counterparts.

Next, once the design is complete, using our Figma plugin, the designer can get the app rendered without leaving Figma, test its look and feel, and even use mock data to experience the real-life look of the app.

Then, with a single click, the designer can generate the C# Markup or XAML to be used directly in the application and hand it off to developers for further work. It’s even possible to prepare the markup for localization and accessibility requirements.

This integration streamlines the design-to-code process, fostering consistency and efficiency throughout the software development lifecycle.

This isn’t to say that our Figma plugin shouldn’t be used by developers too. By using the plugin developers can experience exactly what designer had intended to accomplish with the components, making it more intuitive to implement in the real app,

Freemium model:

We’d like to make our tool accessible to everyone, which is why we have opted for a freemium model with an option for a Pro license for only $9/month.

All features available at the Pro/paid license are available in the free license. Only the number of screen exports is capped at 15 per month for the free version. Once that threshold is hit, you have the option to upgrade to a Pro license, which unlocks an unlimited number of exports and updates and adds a premium support option. Alternatively, you can also wait for next month’s free allocation of 15 free screens to kick in as well if you are not ready to go for the paid version.

Uno Platform Material Toolkit for Figma (Free):

Uno Platform Material Toolkit for Figma is a free UI library for accelerating designing pixel-perfect Uno Platform applications. It is really at the very heart of our handoff approach, a free design system that clicks in perfectly with the rest of our tooling.

It features a set of material-themed UI controls, text styles, and hundreds of icons with which you can centralize your app theming, including variants, light and dark theme and options for auto-layout.

Using our Material Toolkit with the Uno Platform plugin for Figma you can preview your app directly in Figma and export all your app XAML or C# Markup in seconds, reducing time spent on design-to-develop handoff. To see our Material Toolkit in action, we’ve included a fully designed eCommerce mobile app inside the toolkit file.

What is Figma Anyway

If you are a developer, you might not be paying attention to the designer tools, but you really should as it has taken the design market by storm and practically displaced comparative tools like Adobe XD, Zeplin, Sketch and others.

Figma is a cloud-based design and prototyping tool that promotes collaboration among software developers, designers, and stakeholders. It features a “Developer Handoff” mode, also supported by Uno Platform plugin, which enables developers to inspect and extract essential code-related details from design files, including color schemes, font styles, and measurements. This facilitates a smoother translation of design components into code by providing comprehensive specifications. Additionally, Figma integrates with VS Code through plugins and extensions, allowing developers to export assets and generate code snippets directly within their coding environment.

New features in RTM release

Apart from the core value proposition of instantaneous XAML and C# Markup generation, and consequent improvements which added support for Design System Imports, Figma Dev Mode and more, today we are releasing Expression Picker.

Expression picker allows you to set bindings without typing them out. This smart tool pulls all the expressions from your Data Context for you and organizes then in a nested lists for you to pick from. No more searching, no more typos, no more toggling back and forth between the Properties and Data Context tabs. Point and click bindings make your work easy and fast.

You can expect frequent updates to our Figma plugin and Material Toolkit making more and more scenarios available to you.

Free Templates to Start With

Uno Tube Player

Video Streaming App

Get Started

Pet Adopt

Pet adoption App

Get Started

Simple Calc

Simple Calculator UI

Get Started

Uno-commerce

Ecommerce App

Get Started

In addition, check out the Uno Platform for Figma playlist on YouTube in which our engineers explain how to utilize our tooling most effectively.

Playlist

6 Videos

Getting started with Uno Platform for Figma

0:16

Uno Material Toolkit for Figma plugin Walkthrough

Using Figma Plugin Generated C# Markup in an Uno Platform project

Mastering DataBinding in Uno Platform for Figma Plugin | Uno Tech Bites

0:16

How to use Color override

0:16

Swapping Templates for Component Instance

0:16

Next Steps

Regardless of having tried our plugin in the past, give it another go now. It has come a long way since its inception, and we are very proud of what’ve built. Thank you in advance for giving it a try and as usual, let us know what you think about it at our Discord.