Figma to XAML: View Hierarchy, UniformGridLayout and Background Images

We are thrilled to showcase the latest features of Preview 6 of our Figma plugin. One of the most significant additions is the View Hierarchy, which allows for enhanced control over your design elements. Let’s delve into all the new features this update brings.

Hierarchical Views: Nested User Controls, and Page Types

The new View Hierarchy feature allows you to create user controls from existing frames and Auto Layouts and create multiple instances of the control within your design while keeping the same XAML structure. The plugin enables designers to generate code for reusable components such as User Controls, Custom External Controls, and Pages. It exports these controls as separate files and references them in the main container code. 

The View Hierarchy feature takes user controls to the next level by supporting nested structures. The benefit of having nested controls is the ability to create complex and highly interactive user interfaces. Nesting controls within each other allow for the composition of reusable and modular UI components, making it easier to maintain and update the app’s interface. This will enable developers to build more intricate and dynamic app layouts that offer a richer user experience and facilitate a more intricate design ecosystem.

However, there are other benefits. Changing the type to a page is also possible, which proves useful in scenarios where the application shell includes a navigation frame or similar elements. This enables the generation of certain design sections as separate pages. These pages can, in turn, contain additional user controls. Moreover, the user control can be hosted within another component or elsewhere, and your thing model command will continue to function seamlessly.

The adaptability and reusability of user controls are extended beyond individual components, ensuring a cohesive and efficient design process and leading to significantly enhanced code maintainability and speed without sacrificing consistency.

Learn more about using View Hierarchy here.

Background Images for Enhanced Visual Impact

Incorporating background images, such as on buttons, is a commonly used UI/UX technique to enhance the design of your applications.

Previously, adding background images was limited to rectangles or frames. However, Preview 6 removes this restriction, so you can apply background images not only to frames with components overlayed but also to user controls. You can effortlessly set properties that determine how the background is displayed and how it behaves and enhance your designs by integrating custom visuals in the background. You have complete control over the image’s positioning and sizing, ensuring a flexible composition.

Updated Constraints Support

The constraints property defines how layers should respond when you resize their frames.

The plugin now supports “Left and Right” mode in AbsolutePositioning. This enhancement expands the possibilities for precise element positioning and ensures consistent behavior across various designs. Additionally, the top and bottom constraint modes offer the same level of control, providing comprehensive design flexibility.

You can learn more about Constraints here.

Improved ItemsRepeater with UniformGridLayout

ItemsRepeater generates code that allows you to display a collection of items in a customizable layout that can be repeated multiple times, think lists, and grids.

Though ItemsRepeater itself is not new, a notable update is the UniformGridLayout for ItemsRepeater as an alternative to StackLayout. This means that you now have the ability to create grids with multiple columns and rows, providing you with more versatility in your design layouts.

It helps generate consistent design and minimizes maintenance as you only have one item to update when changes are required, which enables you to create grids with multiple columns and rows, streamlining the organization of your design elements.

Learn more about using ItemsRepeater here.

Embrace Design to Code with Uno Figma

Preview 6 of the Uno for Figma plugin brings new features that enhance the capabilities of designers and developers in creating stunning and user-friendly interfaces.



With additions like hierarchical views, nested user controls, background images, and improved layout options, this update offers greater flexibility for customization and boosts productivity in your design process. While the new wrapping capabilities announced at Config 2023 have yet to be supported, our next update promises to include it.



Stay tuned for future updates, and don’t forget to try Uno Platform for Figma along with the new preview 6 features.

About Uno Platform

For those new to the 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. In addition, it offers Figma integration for design-development handoff and a set of extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.

To upgrade to the latest release of Uno Platform, please update your packages to 4.9 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)

Next Steps

Experience seamless design-to-code generation and elevate your development productivity with Uno Platform for Figma. Empower your .NET projects with an efficient workflow and bring your designs to life effortlessly.

Try Uno Platform today and let us know what you think!

Tags:

Uno Platform 5.2 – True Single Project, enhanced Skia renderers, Multi Window and .NET 9 support , and more! See what’s new