Join our Discord server for community support and discussions Icon description

Boost Productivity with High-Fidelity Figma Designs and Clean XAML Code. Preview 5 is here!

We’re happy to announce the release of Preview 5 of Uno Platform’s Figma plugin. Our latest version of the plugin offers enhanced features to benefit both designers and developers. Specifically, it allows the creation of custom colours, eliminating colour limitations and the ability to import Design Systems Packages (DSP), which facilitates sharing design system information across various tools and designs.

Additionally, the inclusion of new controls in our toolkit, such as Pips Pager and TabBar with vertical orientation, as well as the ItemsRepeater feature, provides even greater flexibility to create highly dynamic and interactive designs.

In this blog post, we’ll take a closer look at the latest features offered in Uno Platform for Figma Plugin Preview 5 and how they can benefit your design-to-code experience.

Effortless Color Management

We are thrilled to introduce new features that provide users with enhanced flexibility in managing the themes and colours of their apps. These new features empower users to customize their app’s visual appearance and tailor it to their unique preferences and brand identity. With these additions, users can now have greater control over the aesthetics of their apps, enabling them to create truly personalized and visually appealing user experiences.

Design System Package (DSP) Import

A significant new feature that offers users greater control and flexibility in implementing colours in their designs is the Design System Package (DSP) importing. Users can create and save custom material colour palettes, which can then easily be imported into the Uno Figma plugin to quickly change the app’s theme. This feature streamlines the process of applying consistent colours across different designs and layouts.

Follow these simple steps to import a DSP into the Uno Figma plugin:

  1. Go to the Material Theme Builder and define your desired color scheme.
  2. Export the package as a DSP (Design System Package).
  3. Open your Figma file and access the Uno Figma plugin.
  4. In the Preview tab of the plugin, choose “Import DSP Theme.”
  5. Select the entire DSP zip folder.
  6. Witness the transformation of your theme as it automatically updates based on the imported DSP.

The DSP Import tooling is available not only as a part of our Figma plugin but it is also integrated into Uno Platform itself, showing deep integration between the underlying core platform and additional productivity tooling we are building. When you enable the Material theme in Uno Platform projects you can easily import your custom theme directly into your application. 

Custom Colors

Furthermore, we added a custom colour feature that enables designers/developers to create colours that suit their specific requirements, eliminating restrictions on the number of colours used in a design. This feature offers designers greater creative freedom, enabling them to create unique and customized colour schemes that enhance the overall design aesthetic.

Follow these simple steps to add a custom color to your Color Styles:

  1. In the right-hand pane, locate the option labelled “Colour Styles“. Click on the “+” icon next to it to create a new color style.
  2. Choose a name for your new color style that accurately reflects its purpose.
  3. If desired, provide a brief description of the color style to help identify it later.
  4. Select the color you want to use for your new style from the color picker or input a specific color code.
  5. Once you are satisfied with your color selection, click on the “Create Style” button to save the new style.
  6. If you wish to create a Dark theme equivalent for your new color style, repeat the above steps, using the same name and placing each style in their respective themed folders. This is optional, but can be useful for creating consistency across your design.

New User Interface Controls

Preview 5 introduces two new, much anticipated UI controls: the vertical TabBar and Pipspagers, designed to enhance the capabilities of designers in creating advanced and interactive user interface designs with ease. Additionally, we’re introducing ItemsRepeater, a unique data-driven panel conceptually distinct from complete controls like ListView. This introduction brings flexibility, customization, and advanced functionality to developers and designers, enabling them to design more sophisticated interfaces efficiently.

Vertical TabBar

One of the primary controls available is the Vertical-oriented TabBar, which provides developers and designers with the ability to toggle between horizontal and vertical navigation bars. This functionality is especially valuable for designing tablet format applications, where a vertical navigation bar may offer improved usability compared to a horizontal counterpart.

PipsPager​

The PipsPager control is a dynamic and versatile element that offers advanced functionality for creating interactive designs. It allows developers and designers to create paginated interfaces with rich features such as smooth transitions, animations, and gestures, making it ideal for applications that require complex navigation and data manipulation.

ItemsRepeater

In addition to these exciting new controls, Preview 5 introduces ItemsRepeater, a data-driven panel that offers a unique approach to displaying collections of items. Unlike other controls like ListView, ItemsRepeater is not a complete control, but rather a flexible panel that provides a template-driven layout for displaying collections of data. It offers greater customization options, allowing designers to have full control over the visual appearance and behaviour of the repeated items, making it highly suitable for designing interfaces with complex data presentation requirements.

Preview Image and Placeholder

We’ve made two notable improvements to the way images are previewed and displayed. Firstly, we’ve refined the appearance of the placeholder image to enhance designers’ ability to create accurate visual representations of their designs. This update also makes it easier to envision the final product. Additionally, we’ve eliminated the need for images to be altered to a random preview image generated by the plugin. Instead, images now appear in the plugin exactly as they are displayed in the Figma file.

Conclusion

Uno Platform for Figma plugin is aimed at reducing pain points frequently experienced during design to code handoff. However as we continue to improve it and add new features it is also quickly becoming a unique tool that allows developers or designers take control of how they build their app and quickly go from design to development without the common hurdles.

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.

Next Steps

If you’re new to the Uno Platform for Figma plugin, getting started is easy. First download the plugin from the Figma Community and duplicate the Uno Platform Material Toolkit to start creating stunning designs that bring your vision to life.

We’re excited to see what you’ll create with the Uno Platform for Figma Preview 5 and look forward to supporting you through the design and development process. So why not try it today and see how the Uno Platform for Figma plugin can enhance your design workflow!?

Documentation

Tags:

Related Posts

Uno Platform

360 rue Saint-Jacques, suite G101,
Montréal, Québec, Canada
H2Y 1P5

USA/CANADA toll free: +1-877-237-0471
International: +1-514-312-6958

Tools
Platform
Migration
Resources
Support

Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch