I'm always surprised when I look at job offerings on Linkedin and still see requirements for UX designers to know how to use Adobe XD and Sketch when Figma effectively has a hegemony on the design tools market. It feels like the job offers are still stuck in the 2010s. On the other hand, new names aren't often brought up.
That said, there have been a few market disruptors within the last few years. Penpot, an open-source software similar to Figma, has had success and a new challenger, Visily, is starting to make waves.
In this article, you'll learn what Visily is and the AI tools that it enables you to use.
Why you need to know about Visily
Visily is a software developed in Vietnam by a group of software engineers. It was founded in 2022 and two years later it already hit the 100K users. Even though it started in Vietnam, the company holds an office in the US in Atlanta.
The software has a totally different look and feel from Figma and immediately focuses on AI-powered functionalities rather than the basic tools for designing. The AI tools are probably based on ChatGPT, so you can expect similar results to the ones on FigjamAI or similar plugins. It's nice to natively have AI tools, even if there's still some debate on the usefulness of AI in design.
The problem with AI is always the uncertainty of results. Wasting time trying to get a result instead of just designing it from scratch can be frustrating. That's why I recommend using AI as a complementary tool for designers.
There are currently 10 AI tools natively integrated within Vilsly, but four are really important for you as a designer.
Screenshot to design
On Figma I'm a heavy user of a plug-in called "HTML to design." It's just so nice to copy a URL, paste it in the plug-in, and get a fully editable reproduction of that page in Figma. If you don't know it you should try it. It's awesome for learning to organize a layout in Figma and to scrap pages for redesign projects.
This plug-in has an equivalent in Visily with the tool "screenshot to design." It's not exactly the same. As the name says, it'll convert a screenshot of a page into an editable design. I tested it with the Visily page directly and … it works! But not perfectly.
The AI mistook down arrows for the letter V. The font wasn't the same as on the original page. There were three cards with an image and text, with the one in the center bigger than the two others to give a 3D feel. The two cards on the side were made into images with uneditable text, but the one in the center had editable text in a container without the main picture.
The results are a bit strange but if it gets better it'll be pretty nice to use:
Text to diagram
Generating a diagram to represent the user flow of a product is an essential step in defining the different screens to design. Recently Figma added this functionality in Figjam. The equivalent in Visily is "text to diagram".
By giving it a prompt, it'll automatically generate a well crafted diagram with good logic. I must point out that the results are always limited, for me anyway. The reason is that I like to go into detail on the actions the user needs to do, not just the basics. By going into detail you get a better idea of the order that each step must be done and why one way is more logical than the other.
I wrote two prompts. The short one improvised some parts of the user flow that wouldn't work as I intended. The detailed prompt got pretty good results and didn't forget one instruction. If you want to test it, try to be as detailed as possible.
Theme generator
This one's fun to use. I like to go on Pinterest and find an analysis of color. This tool lets you take a picture and extract all the colors.
Any picture will be transformed into a set of colors with main, secondary, and "other" colors. I'm not entirely sure how it should be used and for what basis. If it's for branding, it's not just color. If it's to select colors to make a color pallet, a brief is generally given to the designer. I would use it for a portfolio of a single product to match its colors.
Magic image
Another nice feature in Figma is the "unsplash plug-in." By putting one picture of an object, the AI will recognize it and offer a list of similar objects. This is useful to fill a design that requires a lot of pictures like an online shop for shoes.
It works very well for common items like vests, phones, or coffee machines. I pushed the limit of this tool by giving a phone picture of an ugly manga character figurine. The results were fun: three fit girls, one camping guy, and a bunch of nuts. Use it with normal products and it will save you a lot of time for real:
Designing from 0 to 1
After testing the tools I wanted to make a design from scratch to see how it compares to Figma.
I designed a simple one-page website for a hotel in Ireland. The initial goal was to have a carousel with the background image.
I sketched something on paper and used the "sketch to design" tool that I was the most curious about. It failed.
To be fair this feature is in beta. However, one awesome thing is the user flow to upload a sketch: you can do it from your PC, but also from your phone by scanning a QR code, and some templates are suggested. I find it really smooth, as going from paper to digital is always a bothersome task, but not here.
I sketched something really simple with:
- A title
- A navbar
- One form
- And a background
The first try gave me something I couldn't describe. For the second try, I added a sketch and some hints for the AI and it produced something close in layout, but overall not great. It's still unusable and I wonder how the AI can work without a prompt describing at least the topic of the sketch:
After this failure, I started from scratch with the library of pre-made components. The main tools and even some elements like the "container" have short video tutorials that help the user understand the logic behind, and the flow to follow.
The UI of the software
The layout of this app can be disturbing. On the left are a "add" button to quickly make an empty screen or use a template, "wireframe" that shows the pre-made components to design, "diagram" to make user flows and such, and "saved," which shows saved components made or modified by the designer.
On the right you will find "layout" that gives information about an element such as it's position or width, layers that shows how elements are imbricated, "project theme" that is the design system base with typography, colors corner radius, and "comments settings" to manage the collaborative aspect of the app.
When placing a component from the library, an option bar pops up to control the main settings such as size, color, shadows and such. The layout logic isn't the same as in Figma and some major tools from the last few years aren't available in Visily yet.
To not use an auto-layout, it felt like I was back in 2019. It's not that important, but designers who want to use Visily must prepare themself to reuse the CTRL+G shortcut to group elements together and align them manually. The closest thing to an auto layout would be the container element which doesn't exist in Figma. It creates a small section independent from the other in which the background can be changed and components can be dropped inside.
Some designer reflexes can be found fast, but the UI of the software differs from Figma and some simple actions like changing the opacity of a color will be bothersome to find at first.
Another thing that feels like 2019 is having to move elements one above the other to achieve your desired results. In my case, I wanted an illustration picture. I couldn't set the background of a container to "image." I needed to put an image in the container, manually extend it to match the border, put an overlay in the container, and move it above the picture.
In the end, I completed my design in a few minutes. The controls are smooth. I don't know if creating a design system would be easy or not with this software. My only real regret was with the prototype part.
There was only one kind of trigger at the time I wrote this article — the click — and only one kind of outcome — navigate. To simulate a carousel with the background image I had to duplicate my screen, change the image, and click to simulate the change. A large-scale prototype would require duplicating a lot of screens for all small changes. Even if showing different states is important to communicate with developers, having dynamic pages like in Figma is still cleaner:
Conclusion
In my opinion, Visily will become a serious challenger to Figma in the months to come. It's easy to use for beginners, and the use of templates for elements is a welcomed functionality that'll help teams save time at the beginning of a project by not having to craft every button right away. It's collaborative like Figma and the incorporation of AI functionality without having to browse a community page is nice, even if nothing seems to work perfectly yet.
I won't switch to this tool immediately, but the fact that it's connected to Figma with functionalities like "export to Figma" makes the bridge easier to cross. I might use it for quick sketching or designing with a client to get quick results to tune up in Figma later.
Comments
Post a Comment