Announcing Uno Platform Studio featuring Hot Design

[sasakrsmanovic]

We are proud to introduce Uno Platform Studio, a suite of productivity tools featuring Hot Design, a next-generation Visual Designer for .NET cross-platform apps!

To make every developer as productive as possible, Uno Platform Studio aids developers through the various parts of the development lifecycle, from design handoff to continuously designing and building the app:

1. Hot Design™ – The Industry-first Visual Designer for cross-platform .NET Applications. Transform your running app into a Designer from any IDE on any OS.
2. Hot Reload – Reliably update any code in your app and get instant confirmation your changes were applied with its new App Indicator
3. Design-to-Code – Completely eliminate the manual design handoff process by generating ready-to-use well-structured/clean XAML or C# Markup code from a single click.

To get on the waitlist for Hot Design as it is in private beta please visit https://platform.uno/waitlist

The Ecosystem Gap: Why We Built Hot Design
To truly revolutionize the field, we had to take the WYSIWYG concept beyond legacy designers you may recall from the WPF, WinForms, or even Delphi days. Remember these days?

While very useful at the time, they often allow for basic visual changes and require restarting of the app every time you make any changes, as well as mocking data. Those days are now over, and Windows and .NET ecosystem are now richer for a unique Designer that no other developer ecosystem has!!

UI Developer Tooling of the Past and Present

As a recap, we believe these approaches share the following challenges:

1. Disconnected Experiences: The separation between design-time and runtime tools can lead to inefficiencies and inconsistencies.
2. Limited Realism: Design-time tools often cannot accurately represent the final UI, especially when it comes to data and complex interactions.
3. Lack of Integration: The tools are often not well-integrated with each other or with modern development practices.
   Inflexibility: Many of these tools are tied to specific platforms or development environments, limiting their usefulness in cross-platform scenarios.
4. Inefficient Workflow: The need to constantly switch between different tools and contexts can slow down development and introduce errors

UI Developer Tool of the Future

Uno Platform Studio closes all the gaps identified above and more, offering a runtime Visual Designer that enables you to work in real time, without breaking your workflow. There’s no approximation of the UI or requirement for mock. Any changes are persisted in real time, without needing the application to be restarted for each change to take effect.

Let’s look into the benefits of all three pillars of Uno Platform Studio

Hot Design: What benefits does Hot Design bring?

The first part of Uno Platform Studio is Hot Design™. It is the next-generation Visual Designer for cross-platform .NET Applications. It transforms your running app into a Designer from any IDE on any OS.

Check it out - https://www.youtube.com/watch?v=fODrUH0zno0

Announcing.Uno.Platform.Studio.featuring.Hot.Design.mp4

The data-binding productivity boost alone makes it a game-changer for seasoned .NET devs. At the same time the intuitive interface lowers the barrier for newcomers as changes on the designer are immediately applied to code, therefore providing a powerful learning loop.

Let’s explore all the productivity benefits of Hot Design and this unique, patent-pending approach provides you.

Works with Visual Studio, VS Code or Rider.

Keep using the IDE you love. Hot Design is IDE agnostic, and it seamlessly integrates with Visual Studio, Visual Studio Code, and Rider on all operating systems, enabling you to develop applications with rich UI on every platform that .NET supports.

Round-Trip Sync Between Designer and Code
In Hot Design, any adjustment made in the Designer updates the XAML code in real time. Also, any code changes are reflected in UI allowing for a consistent design-to-code experience. This feature is especially valuable when working on complex UIs, as it shortens the development cycle and streamlines the dev process.

Custom and Third-Party UI Control Supported!
Hot Design fully supports user-created and third-party UI components, simplifying customization and integration, a crucial feature for developers working with sophisticated design systems and controls.

Work with Real Data
With traditional designers you had to create mock data. With Hot Design, you can work directly with the actual data sources within the running app to get the true feel of how your app looks and behaves. No need to spend time mocking your data anymore! Unless you want to, of course, in which case mocking data is supported too 😊

Use your favorite Design Pattern
Easily consume real-time data while keeping UI logic separate from the core logic. Hot Design isn’t dependent on the choice of state management pattern, so it will work with both MVVM and MVUX.

Design UI for a Remote Device
Imagine a scenario where you are visually designing a UI for a remote device, in real time, using VS Code, on a Mac. No need to imagine it, you can do it now.

Now you can design and adjust UI directly on a remote device, making it easier to perfect the user experience on real hardware. You can instantly see and fine-tune changes on any remote device without the need for constant redeployment, saving precious time.

Hot Reload: What benefits does Hot Reload bring?
The 2nd part of Uno Platform Studio is Hot Reload. It lets you see UI changes instantly without rebuilding the app, boosting productivity and reducing iteration time, and it works seamlessly with Hot Design™. In addition to providing feedback on visual and functional tweaks in the UI, our Hot Reload also provides a visual indicator to help you further monitor changes while developing.

Design-to-Code: What benefits does Figma plugin bring?
The 3rd part of Uno Platform Studio is the Uno Platform Figma plugin . I lets you export your Figma designs to XAML or C# Markup with one click and easily paste the resulting markup into Uno Platform Studio & Hot Design. With this workflow, we are providing a pragmatic solution to Design to Developer handoff. This allows both roles to stay in the tool of their preference – Figma for designer or Visual Studio / VS Code / Rider for developers.

Beta Waitlist Available Now & Love for our Community!
You can get on the waitlist now. We will be letting devs in on first-come, first-served basis, in small cohorts, to make sure we are able to work closely with beta testers.

If you are a contributor to Uno Platform or have been part of our community in the past, let us know you’re on the waitlist by emailing [email protected], and we’ll fast-track your beta access!

Summary:
Uno Platform Studio revolutionizes the field of Visual Designers. It ensures you stay in the flow, in the environment of your preference, building apps for every platform .NET runs on.

1. Hot Design™ – The Industry-first Visual Designer for cross-platform .NET Applications. Transform your running app into a Designer from any IDE on any OS.
2. Hot Reload – Reliably update any code in your app and get instant confirmation your changes were applied with its new App Indicator
3. Design-to-Code – Completely eliminate the manual design handoff process by generating ready-to-use well-structured/clean XAML or C# Markup code from a single click.

We are just getting started. We hope we piqued your interest, so you sign up for the beta waitlist.
https://platform.uno/waitlist

If you are new to Uno Platform and only finding it now, you should give it a try via our Get Started tutorials.
https://platform.uno/docs/articles/get-started.html?tabs=windows

[sasakrsmanovic]

You can watch our presentation at .NET Conf 2024 now:

Announcing Uno Platform Studio and Hot Design
https://www.youtube.com/watch?v=sJPyieyt1Rc&list=PLdo4fOcmZ0oXeSG8BgCVru3zQtw_K4ANY&index=93&t=320s

Great demos by Jerome and Nick!

[robloo]

This is really cool to see! Great job!

I was surprised at your direct comparisons to the WPF designer in Visual Studio or the old WYSIWYG designer from VB6 days. Uno's product is much more closely aligned with Expression Blend for WPF -- yes well over 10 years old and it wasn't widely known/used. With that in mind though, can you highlight the main advantages of Uno Platform Studio + Hot Design over Microsoft's Expression Blend?

As far as I can tell the main -- really significant -- advantage is Hot Design itself as it can operate on a live running application. Microsoft Expression Blend couldn't do that -- although you could mock data and connect bindings as well as all the other design features I see in Uno Platform Studio.

Edit: I also recall animation creation was much more advanced in Microsoft Blend compared to Visual Studio. Is animation a focus of Uno Platform Studio as well?

[francoistanguay]

Hi @robloo, always great to see you around :)

In our minds, all design-time experiences are somewhat similar. Blend was initially an external tool vs IDE-embedded but still provided similar design-time markup-editing experiences. Would love to better understand what greater distinction you make between VB/Delphi/FoxPro/WPF UI editing experiences vs Blend (which definitely had more capabilities).

The key innovation with Hot Design is the runtime experience vs design time experience. You can get to any page in your app, hit Hot Design and enter design mode. You can therefore set your bindings on your live data, without the wasteful need of mock/design-time data.

Furthermore, by working against live data, it's a lot easier to support 3rd party controls without metadata and keep it stable (remember those design surfaces crashing?), it's a lot easier to only surface contextual data like styles/resources/assets that apply to the property you're editing.

In addition, and this is probably the hardest to explain in terms of value compared to traditional designers, by being runtime and running in the app context, it's intrinsically cross-platform. This means that when you're editing on iOS, you get the real device sizes/form factors, you get the real Safe Area constraints, you get the real platform specifics. It also mean that you can run your app from macOS, using Code, targeting a physical RPi and Hot Design your way to a real app. That's what we mean by working for all platforms, from any IDE, on any OS. No other design can do that today from what we can tell.

Style editing, Animations and other aspects are definitely on the roadmap post-beta. As anything else we do, we'll focus on what brings the biggest productivity impact first. But in all cases, by allowing Hot Reload and Hot Design to work hand in hand, you can always fallback to direct code editing, like for animations, if something isn't yet supported by Hot Design.

Would love to get your feedback once you have a chance to play with it!

[robloo]

Thanks for the detailed response! Lots of good info here.

it's a lot easier to support 3rd party controls without metadata and keep it stable (remember those design surfaces crashing?)

Yes, great point

by being runtime and running in the app context, it's intrinsically cross-platform. This means that when you're editing on iOS, you get the real device sizes/form factors, you get the real Safe Area constraints, you get the real platform specifics. It also mean that you can run your app from macOS, using Code, targeting a physical RPi and Hot Design your way to a real app.

Wow, I hadn't pieced all that together yet. If a company has just a bare-bones app but all view models done that's a fantastic way to get to the finish line. Being able to run that app and design it real-time on real devices is amazing! This would be a fast way to port existing code as well.

Summarizing my main takeaways (which are now aligning pretty closely to the four @sasakrsmanovic originally stated):

• Uno Platform Studio + Hot Design's killer feature is being able to run on a live application AND on actual devices.
  • That saves an enormous amount of time because there is no need to switch back and forth between contexts. There is no need to make changes in a separate design tool and then navigate back to the view to see finished work (more below).
  • There is no need to mock data. ALL data of the running application is available. This makes it possible to design a finished application start to finish once the data models or backend is ready. This is especially interesting for those that might have existing MVVM applications and want to trial Uno/WinUI XAML.
  • The tool is also written using the Uno Platform which makes it cross platform by default.
  • Support for 3rd party controls and advanced features just works. Another benefit of running on top of a live application. Other designers always had some limitation or instability in this area.
• Expression Blend historically did have more designer features. While that feature gap will close it doesn't really matter. The value proposition mentioned before is so much higher already (no need to switch contexts, mock data, etc.)
• The current VS 2022 integrated version of Blend tooling with XAML Live Preview and XAML Hot Reload is very close but it lacks the ability to run on actual devices and isn't as fully integrated (I'm still not sure which Microsoft flavor of XAML is fully supported as well: WPF, Maui, WinUI?).

I certainly look forward to trying this out! Again, congratulations on the release and great work to the whole team!!

[francoistanguay]

• The current VS 2022 integrated version of Blend tooling with XAML Live Preview and XAML Hot Reload is very close but it lacks the ability to run on actual devices and isn't as fully integrated (I'm still not sure which Microsoft flavor of XAML is fully supported as well: WPF, Maui, WinUI?).

Our understanding and thinking is that Live Previewer is in the Previewer/DevTool bucket, not in the Editor bucket.

So if you want to actually change the background color of a button, Live Previewer lets you experiment and see effects of changing values but you still need to manually go back in your code and make the change, hopefully your app is running, Hot Reload kicks in and there's no conflict. This isn't a code editor.

I certainly look forward to trying this out! Again, congratulations on the release and great work to the whole team!!
If/when on the waitlist, ping Sasha and he'll fast track you.

[ward-horsfall]

Hi,

This looks very good. By any chance will it automatically do things like create code for the event handlers. Example in Winforms if I click in the UI it will automatically add the code for a Clicked event.

Thanks
Ward

[nickrandolph]

@ward-horsfall the priority has been to support scenarios where there's a data bound model where the Command can be connected to a method exposed by the data model - this is a common pattern for applications using MVVM and MVUX. This can be done using the data binding editor that's available for each property.

[ward-horsfall]

Hi @nickrandolph,

Thanks for your response. So I can read a bit further on this any documentation references on this technology so I can get up to speed on this topic?

Thanks again,

Ward

[nickrandolph]

@ward-horsfall at this stage we're gradually opening access via the waitlist. If you haven't already signed up, head to https://platform.uno/waitlist and sign up. We'll be opening up further documentation on Hot Design over the coming weeks