Overview
Hot Design is the new tool developed by the Uno Platform team.
It is currently in beta, but you can join the waitlist to try it out in preview.
I was contacted by the Uno Platform team to try it out, test it, talk about it and... wow.
I am really euphoric because this tool is really comfortable and speeds up the development.
In this article I will talk about Hot Design, what it is and how to use.
Let's start! 🤙
First: what is Hot Design? 🔥
During the development of a software, web app or mobile application, we can see how repetitive it is to write the UI of the project with markup languages such as HTML for example.
It wastes more time that we could spend developing business logic.
Hot Design helps the development in this: transforms your live, running app into a real-time visual designer and that runs in any OS and IDE.
It allows you to make UI changes on the fly without restarting your app or losing state, while seamlessly synchronizing your XAML code and visual designs.
Simple fantastic! 💫
Do you remember Hot Reload?
I’ve talked about it in this article, in one of the points of Uno Platform.
When you modify the XAML and C# of your running application, in order to iterate faster on UI or code changes.
Hot Design works seamlessly with Hot Reload, allowing you to see UI changes instantly without rebuilding your app,provide real-time feedback and boost your productivity 💥
Why Hot Design?
The question is legitimate: why choose Hot Design?
In general, the choice of Uno Platform for .NET developers helps to build their products.
Second point, Hot Design is part of Uno Platform Studio, a suite of tools designed to optimize the development of cross-platform apps and increase productivity.
So why not take advantage of the set of tools that are made available to help in software development? It's crazy! 😨
Key points about it
Hot Design has many important and useful features:
Design in Real Time: you can modify your app’s UI instantly while it’s running, for fast and interactive development ⚡️
Available for any IDE: integrate with Visual Studio, VS Code, and JetBrains Rider on any OS, with IDE-agnostic support 🌊
Sync code and designer: the designer’s changes are instantly synchronized with the code, ensuring that the live app and XAML remain parallel 🍃
Use Responsive Layouts: build responsive layout and instantly visualize how your app adapts to different devices 📱
Handle State with Flexibility: you can work seamlessly with MVVM or MVUX to use and handle real-time data while keeping UI logic separate from business logic 💎
These are the key points of Hot Design, but there are others to list.
If you are interested, please read this link.
How do I access Hot Design?
First thing, create a project with Uno Platform: if you do not know how to do it, I recommend that you follow the official documentation, you can find how to create a Uno Platform project in Visual Studio, VS Code and Rider.
I choose VS Code (I also talk about it in this article) ✒️
Once you have created your project, you will find yourself in front of a structure like this:
Now press F5 to start the application (without debugging) and you will be presented with a screen like this:
This is the first page of my project QRCodeGenerator, a simple application made with Uno Platform for test Hot Design.
To access Hot Design, just press this button with the flame... et voilà ✨
Finally we are inside Hot Design 🥳
The structure
The interface is divided into three main parts:
- On the left side there's the toolbox 🤳🏻
- In the center there's the canva 📟
- On the right side there's the list of properties 🖥
Toolbox
The toolbox is a list of elements, which Uno Platform provides, to be used in the project.
If you want to use an element, simply drag it into the "elements" section to make it appear in the canva 🧾
You can use objects such as "textbox", "button", "label", but also layout structures like "grids": it is possible to make elements "children" of other elements by creating tree structures, making the interface more complex and structured, simply using a drag and drop system 📈
Canva
The canva is a preview of how the elements of the application will be positioned.
Even from the canva you can move the elements using drag and drop 📍
Properties
Properties are a list of attributes that each element can have.
Clicking on the elements in the canva, this menu will appear in the image above, where you can change their properties, such as "height", "width", "padding", "colors" etc
It will also be possible to bind the properties declared in C# code for managing the application state 🔒
Conclusion
Hot Design is an amazing tool to build your app quickly and easily.
In the next article I will explain how to use Hot Design by telling how I built my app QRCodeGenerator.
Happy coding!✨
Hi👋🏻
My name is Domenico, software developer passionate of Open Source, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻
Linktree: https://linktr.ee/domenicotenace
Follow me on dev.to for other articles 👇🏻
If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹
Top comments (0)