Product review of Wondershare Mockitt — the new design tool in town
and how it compares to Adobe XD and Figma while designing Lyrics by Spotify
There are quite a few wireframing and prototyping tools available on the market right now, with Sketch, Figma, and Adobe XD as the most popularly used ones in the United States. However, there are also a lot of similar tools that are popular outside of the United States, like Wondershare Mockitt.
Wondershare Mockitt, previously known as Mockingbot before being acquired by Wondershare in June 2020, is an online prototyping and collaboration tool used by over 2 million individuals and over 15,000 enterprises worldwide. It allows you to quickly wireframe and prototype your ideas to share with your team, and also upload your high-fidelity screens from their Sketch plug-in to prototype. Developers can also access the code to your prototype through a simple link.
So how does Wondershare Mockitt compare to other tools?
I decided to test it out myself — I built my passion project, Lyrics by Spotify, in Wondershare Mockitt, Figma, and Adobe XD. As I first learned how to wireframe and prototype in Figma, I built it there first before doing so in Adobe XD and Wondershare Mockitt.
Creating a new project
When you create a new project in Wondershare Mockitt, you will see this screen:
This reminded me of what you see when you create a new project in InVision, but the difference is that you can customize your screen size if the ones they provide you do not meet your needs; they even have the latest iPhone 12 screen size!
Unfortunately, I was designing for an Android device this time and they did not have the newer Samsung device screen sizes. The latest Samsung model dimensions they have was for the Samsung S7, so I used the custom screen size option to set up my screen dimension.
After clicking “Create,” you will see something similar to the image below. I would like to note that if you selected custom dimensions, you would only see blank screens that do not include the status bar (time, phone signal bars, and battery level), and header with the title of your project. You can change the device you are designing for in the right panel, and it will change the dimensions of all of your screens (which is what I did to take the screenshot below). You also have to do that on your home/initial screen for this to work.
When you create a project, two screens will automatically be created; however, will only see one screen when you are designing and can switch to your other screens through the left panel. A 10px grid appears on your screens by default, but you can customize it and add a customized grid layout for responsive design as well, just like in Figma and Adobe XD.
Features that I loved
Adjusting screen sizes
When you extend the height of the screen on Figma and have assets on it, the assets stretch with the screen, unless you hold CMD/CTRL while doing so. Similar to Adobe XD, Wondershare Mockitt allows you to extend the height of your screens without stretching your assets or having to hold CMD/CNTL while extending it.
However, Wondershare Mockitt also assumes that you will not extend the width of the screens, and only allows you to extend the height. I liked this because, as designers, we are pushing for responsive designs where users would not have to scroll horizontally to find what they need.
A library full of templates and assets
Wondershare Mockitt has an extensive library filled with templates, assets, widgets (what they call components), and icons that you can choose and use from. They also have 22 built-in typefaces you can use with various font styles you can choose from, including popular typefaces like Avenir, Montserrat, and Roboto.
If you created your own assets and would like to use them, you can easily upload them under the “Mine” tab. If they are images, you can create a folder under images. If they are icons, components, or “organisms” that you will use often, I recommend uploading them under “widgets.” I also want to note that if you are planning on uploading SVG files, you should drag them into the library window instead of selecting the files from your device after clicking “Upload Image;” SVG files can only be uploaded that way.
Screen States
Screen states is probably my favorite feature. It’s just like component states in Adobe XD, but for screens. When I was prototyping the slider track to “move” every second as the song played, I had to create extra screens in both Figma and Adobe XD to make it happen with Smart Animate and Auto-Animate, respectively. With screen states, I was able to duplicate the first screen, adjust the slider, and have it all come together with Magic Move, Wondershare Mockitt’s version of Smart Animate/Auto-Animate.
In retrospect, they all required me to do the same thing. The difference is that when you prototype it, you can choose to Magic Move it to the first, previous, next, or last screen — you don’t have to try to remember which screen name comes next because Figma and Adobe XD organizes screens in alphabetical order (trust me, after designing for hours, you would appreciate your prototyping tool helping you think).
Prototyping
Prototyping in Wondershare Mockitt was my favorite part of building Lyrics by Spotify here. As I mentioned, I really appreciated how it automatically assumes that you will want it to transition to the next screen state when you choose “Change Screen State.” I also loved how you can prototype screens by dragging the lightning icon to the name of the screen you want it to change to on the left panel. You can later edit the detail of the “event” or interaction on the right panel.
Wondershare Mockitt also allows you to specify the type of tap and click you want to trigger your event. You can trigger an event by swiping any direction, double-tapping/-clicking, etc. An important thing to note is that swiping only works for static screens, ones that do not scroll. For the purpose of recording my Wondershare prototype, I used the double-click option to transition from the first initial playlist screen (“Home”) to the scrollable one (“Playlist — Songs”) as I recorded on my MacBook.
Features that I liked but could be improved
Fixed slider
The fixed slider was really easy to use and made it easier to differentiate which items should be fixed when scrolling. I loved that I didn’t have to go into each component to make sure that I checked the “fixed position when scrolling” box and specified the constraints (top, bottom, left, right, etc.) like I would have to do in Figma. Similar to Figma where you extend your screen to however long you would like and select what you want to be fixed when scrolling. This is also probably one of the reasons why I love Adobe XD’s scrolling groups.
However, the fixed slider does have its limitations, especially for this project. If you look at the image above, I needed the bottom navigation, status bar, top navigation, and shuffle play button to remain fixed. As you scroll through the playlist, the songs should scroll behind the shuffle play button, and you should still be able to see the song details behind the bottom half of the shuffle play button. If I were to fix the position of half the shuffle play button on Wondershare Mockitt, the bottom half of the bottom would scroll away.
Widgets
Widgets are Wondershare Mockitt’s version of components and like Figma and Adobe XD you can create different states (Wondershare Mockitt = widget states, Figma = variants, and Adobe XD = component states). If you are using widget states, it seems like you can only have 2 widget states; I’m not sure if this is a limitation to my account type (free vs. paid) or the version of Wondershare Mockitt (online vs. desktop) that I’m using.
I had a little trouble creating widgets as some icons that I grouped to be part of the widget would get deleted. I think that happened because I created a widget, duplicated and edited it, made the edited widget a new widget, but forgot to rename it. I did like it because it felt familiar and did help speed up building the playlist screen.
I used the built-in image widget and was able to quickly replace the default image with the album covers. I want to note that if you do use this widget and are replacing images from your Wondershare Mockitt library, that you should only click the image you want once, and then click “change image.” Double-clicking the image will insert the image onto the screen rather than change the image.
Features that I would love to see in Wondershare Mockitt in the future
Import CSV files
Figma and Adobe XD both have plug-ins where you can import Google Sheets and CSV files into your designs. I did that to quickly populate the playlist screens with artists, song titles, and their respective album covers. Since this was not an option for Wondershare Mockitt, it took a little more time to edit each widget.
Gradient-fill
Gradient fill is currently unavailable on Wondershare Mockitt, which is why the background color for my screens are different for my Wondershare Mockitt prototype.
Magic Move between screens
I loved prototyping in Wondershare Mockitt, but I also love Smart Animate/ Auto-Animate. Magic move is currently only available for “events” between screen states. It would be amazing for it to be available for “events” between screens too for smoother transitions.
Eyedropper tool
The Eyedropper tool is only available through the desktop app. I was using their online version, and could not find where I can download the desktop app. This might only be available for paid and/or enterprise versions.
Rounded ends for lines
When you use the line tool on Wondershare Mockitt, it does not give you the option to round the ends of the line. It was something I was looking for when designing the slider for my prototype, but couldn’t find, so I used a rectangle and rounded the corners as much as I can instead.
Guides
Adobe allows you to drag guides, “lines that you can superimpose on your artboard that help shape your design and plan where elements will fall,” in all of their application. You can probably tell by now that I love grids, guides, and precision, which is why I would love it if both Figma and Mockitt Wondershare had this feature.
Zoom beyond 400%
I like zooming into my designs to make sure that all my components, texts, images, etc. are aligned perfectly to my grid layouts. You currently can only Zoom in up to 400%, but again, this is just my personal preference.
Designing to the closest 0.01px
Similar to Wondershare Mockitt, Figma, and Adobe XD snaps to the closest pixel when you create and move objects. However, the latter two allow you to design to the closest 0.01px if you manually change the pixels in their respective right panels. Although it’s recommended to always design to the closest pixel, I would like the option to design to the closest 0.01px as I can in Figma and Adobe XD.
Final Verdict
I enjoyed using Wondershare Mockitt and would recommend this tool for designers who are new to UX/UI design and are looking for a quick and easy way to learn how to build their prototypes. The learning curve for this tool is also slightly lower than that of Adobe XD, Figma, and Sketch; Adobe XD maybe the least beginner-friendly of the four. I also feel like Wondershare Mockitt is more user-friendly than InVision as a prototyping tool.
I would use this tool in the future to prototype my low fidelity prototypes or create simple mid-fidelity prototypes that I can share with my team members. However, I am a little hesitant to build high-fidelity prototypes in Wondershare Mockitt because some features/tools I often use are not available to me. This may change as I am currently freelancing and used the free online version of Wondershare Mockitt to create this project rather than the desktop/paid/enterprise versions. I also no longer have access to Sketch, but if I did, I would probably use Sketch to build my high-fidelity screens, and then use the Wondershare Mockitt plug-in to upload my screens and prototype there instead of InVision.
I will continue to design in Figma, Adobe XD, and now Wondershare Mockitt, because as a designer you can never know how to use too many design tools that can help with collaboration within and between teams and streamlining the design process.
Disclaimer:
- I partnered with Wondershare Mockitt for this product review and was given complete freedom about what I can write about. This is an honest review of the product, and I built the same project in all of them (but I created all the icons in Figma, saved them as SVG files, and used them in my Adobe XD and Wondershare Mockitt prototypes).
- I do not work at Spotify. I use Spotify often and missed having lyrics to the songs available to me while listening to them like I did when I still used my iPod and music streaming was still a new thing. I use Spotify a lot, and wished that they had that option especially because some other apps do — so I built my own!
- Album covers and music belong to the artists and their respective companies; I used them to make my prototype more realistic.
