Flawless App update: redesigned UI and UX, dark mode and optimised file selection

Flawless App
5 min readNov 19, 2018

--

What’s new for you — redesigned interface, UX improvements based on the user feedback and Dark Mode support. Here is a quick overview of more goodies in the latest Flawless App release:

  • First step in using Flawless App is to Drag & Drop designs inside tool. Now you can drop multiple design files to Flawless window directly from Finder or Zeplin.
  • When you have several designs for your project, you need to search between them. We added the ability to search right inside Flawless, making interaction with a big collection of designs easier.
  • Sometimes Sketch files can be huge and slow to upload. Now Sketch files are being processed asynchronously, so you can start using them faster.
  • Choosing comparison mode is more intuitive now with a usable interface and delightful animations.
  • We added a click-through feature in Overlay Comparison mode. You can interact with the Simulator as you’d normally do, just put overlay mode to 0% transparency.
  • You can measure sizes of design elements and make screenshots of design and implementation inside Flawless App. These features are now easier to find in the specially dedicated section.
  • If you upload a mix of designs: sketch files and images, Flawless App will group them by the source. It’s simpler for you to navigate.
  • Start iOS Simulator right from the Flawless App in case you don’t have it opened. And no iOS Simulator reboot anymore!

Faster Drag & Drop of design files

The old way of selecting design files was not obvious — you had to drop files to Flawless icon in the menu bar.

Now you can drag and drop images, Sketch files and designs from Zeplin right into the Flawless App window. By moving drag & drop to the actual window we solved the discoverability problem. At the same time, it’s nice for onboarding of the new users.

Drag&drop of files directly to Flawless App window
Drag&drop of designs from Zeplin directly to Flawless App window

Search for files at ease

Our users work with huge Sketch files. And it’s difficult to find needed artboard from the whole collection of designs. Previous, all artboards from the Sketch file were available as a list without any grouping or ability to search.

Now we added an ability to search among designs you have selected in Flawless App. Just start typing and the file you’re looking for will immediately appear in the list.

Asynchronous processing of Sketch files

Another part of the problem when working with huge Sketch file is time to process it. In the previous version of Flawless App, you had to wait until the whole Sketch file will be processed and only after it you can start using the app.

With this release, we process huge Sketch files in parallel, which means faster. While you’ll see a real-time progress of how much of selected Sketch file has been processed. This flow allows you to interact with other selected design files while waiting for a big Sketch file to finish its processing.

Design files grouping and improved selection flow

Initially, Flawless App wasn’t designed to work with a big collection of files. Instead, we had a flat list of files which was doing the job for up to 10 selected designs. The more people used the app the more it becomes obvious that the flat list model won’t work further down the line. Some kind of files grouping should be introduced.

Now files that you’ve selected will be grouped by their source. For example, if you select multiple Sketch files and a bunch of images you’ll be able to see which design corresponds to a specific Sketch file and etc. In the next updates, this grouping will become smarter as we’ll introduce our sources for design selection.

Besides grouping feature, the file selection list itself was completely redesigned. So now instead of seeing a bunch of titles of designs, you can see a little preview of a design. It’s easier to navigate and select the right file when you need it.

Launch iOS Simulator from Flawless App

It happens that people launch Flawless App for the first time and they don’t have an iOS Simulator opened. This forces users go to the Xcode, search for a right project, launch iOS Simulator from Xcode just to try Flawless App.

That’s why we’ve introduced an ability to launch iOS Simulator right from Flawless App. This solves a couple of problems:

  • First usage experience when there is no iOS Simulator around
  • A little onboarding to new users, that Flawless App can only work with launched iOS Simulator
  • A convenient way to launch iOS Simulator whenever you need it via Flawless.

What do you think about this update?
Let us know how we can make your development workflow more productive. Please share your thoughts via support@flawlessapp.io, join a conversation on Twitter or chat with us over Facebook group.

You won’t believe it but we’re already working on the next Flawless App release. Keep an eye on our updates for more news.

Originally published at flawlessapp.io on November 19, 2018.

--

--

Flawless App

macOS app for visual quality check right inside iOS simulator. We made it for empowering people build great products. Try free trial→ https://flawlessapp.io/