Build together, debug together. Join the community on Discord.→

Uno Platform for Figma Preview 4 – Updated UI, Auto-Layout Features and Custom Components

1 Dec 2022

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.

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 Files — your Properties, Preview, and Dev tools have been cleaned up to give you a better experience and the available actions.

We believe we’ve found a balanced approach to fulfill your change requests without changing the user interface so much that you must relearn everything.

New Features

While there have been dozens of improvements in this preview, let us showcase the top requested ones, and for the rest you can check out our release notes and docs.

Auto-Layout

Figma announced a significant redesign to the Auto Layout system to fix issues and improve User Experience. Our latest release supports these new updates and includes the much-requested support for Absolute positioning and canvas stacking. We’re happy to announce that preview 4 will support these features.

Support for “Sections”
Support for “Groups”
Absolute positioning + non-auto layout frame
Support for “canvas stacking”

Best of the Rest

More Overrides

We continue adding additional override support to give you more control and flexibility in swapping color roles and managing component borders. Specifically, this update brings border and corner radius support to the IconToggleButton. Learn more

Improved Chips usage:

No longer need to group them in an auto layout with LayoutMode=Group
Supports orientation changes & custom spacing

RESW Generation: Along with code, theme library, and assets, users can extract resw. files (“copies”) from their Figma document to send to the translation team for multilingual applications.

Shapes:

Rectangle shape now supports Corner Radius
Path / Vector
Now support vectors outside of icons
Added proper support for Fill Rule

Bug Fixes

Along with the more notable improvements and new features, we also worked on some less apparent fixes that will undoubtedly improve your overall experience with the plugin. Check out the list below.

Autolayout Center/Scale exception
AutoLayout padding is more on par with what Figma is doing
Optimized more supported cases
Shape sizes were incorrect
Many crashing bugs fixed
Improved the design of the “no connection” page when the server is unreachable
Card padding is now correct
Button reference alignments are fixed

About Uno Platform

For those new to Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. It offers Figma integration for design-development handoff and extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.