Traditional content-creation tools like Adobe Photoshop, Adobe XD and Sketch are excellent for creating initial technical designs. So too is Figma, the relative newcomer to the field that an increasing number of designers are moving across to. All these tools are used to deliver design. Qt Design Studio is a tool that complements them when designs are turned into actual products.
Once you’ve done an initial design in the tool you normally use, Qt Design Studio uses our internal bridges to transfer those designs, layouts and components into the Qt Design Studio workspace. Here you can make a production-ready user interface, and even create and deploy your final UI/UX design.
Our team has put a lot of work into making this transition into Qt Design Studio as seamless and painless as possible. In this article I’ll look at each of the four main design programs and the work we’ve done to connect to them via our bridge technology.
Brook Cronin, Senior UI/UX Designer
From talking to our customers, we see that even designers who work for companies that don’t use Figma would like to be able to use it. So I think we’ll see a lot of design work moving in this direction, which is why we put so much emphasis on Figma in our bridge development.
One of the things that Figma does differently – or rather, an existing idea it built upon – is that you can create components that can be reused. With Figma, these components can even have variations. What’s significant about this feature is that it maps almost one-to-one with the concepts in Qt Design Studio that exist as part of our QML language.
This is very useful in working with the different states that UI components typically have. For example, a button may have a pressed state, a hovered-over state, a blocked state, and a normalized state. This challenge has always been difficult to design around, but it’s something we’ve emphasized at Qt and that we see in Figma too. Starting from Qt Design Studio 3.3.0, you can seamlessly import component variants into Qt Design Studio.
I’ve spent hundreds of hours using Photoshop – both during my studies and at work. Photoshop is a very good tool for print and digital work, but it was not really made for sorting information architecture, and for creating UI/UX designs.
That said, Photoshop is still the standard in certain industries and a lot of designers have used it for a decade or more to create brilliant work. Some of these legacy projects are really complicated and detailed, so understandably nobody wants to lose work of that quality. This is why the first bridge we made to Qt Design Studio was for Photoshop.
Important for Photoshop users to know is that the idea of componentization is central to Qt Design Studio. For example, if you need to create a button in the UI, you just need to design a single version of that component in Qt Design Studio and then you can use this original version every time you need it.
The reason I point this out is that Photoshop does not easily lend itself to this idea of componentization. But we’ve created workarounds through our bridge technology that allow Photoshop users to bring their work into Qt Design Studio, with a version of this componentization feature. It’s worth a try, as the alternative is redrawing all those Photoshop files…
.png?width=830&height=700&name=MicrosoftTeams-image%20(17).png)
-1.png?width=830&height=700&name=MicrosoftTeams-image%20(18)-1.png)
Another great Adobe program is XD, which sits on top of the entire stack of development work Adobe has done over the past decades. XD is great for user-experience design, allowing you to do componentization, instantization, override properties, and create file structures that map back down to the real design objects. XD is still a very popular design tool, particularly in large industrial companies.
We’ve put a lot of effort into getting our bridge technology to the level it’s at for XD. You can use the bridge we’ve built to bring all of your photographic, illustrative and UX thinking into Qt Design Studio, where you can then start creating the interactions and other kinds of front-end logic our software was made for.
We’re still somewhat limited in terms of development by what the API for Adobe XD lets us do. As soon as the capabilities are available, we’ll implement them.
Although it’s for Mac users only, Sketch is probably one of the first tools that tried to solve the UI/UX paradigm of design.
What Sketch did brilliantly is make use of symbols that become components. So you can create one complex symbol – such as a gauge in a car UI, for example – or even a cluster of such symbols. Then everywhere that cluster appears, you just link to the original one.
The second bridge we made was to Sketch, and it’s still working really well. If you happen to be using Sketch, you can use Qt Design Studio and get a good result. We’re planning on developing it further, but right now we’re also waiting for an API to become available from Adobe so that we can implement even more features.
-3.png?width=830&height=700&name=MicrosoftTeams-image%20(16)-3.png)
