Illustrator AND Sketch

This is the first time we have offered our UI kit for Sketch. Mercury’s team still prefers to design iOS and Android mockups in Illustrator. The tools for Illustrator are still more robust for a lot of our day-to-day tasks, and we find that we can build in Illustrator more quickly. This kit itself was initially built completely in Illustrator and then ported to Sketch.

We continue however to flirt with Sketch and are closer than ever to moving to Sketch for screen layout. We continue to be blown away by Sketch’s plugin community. With Sketch’s growing maturity and new tools like Zeplin and InVision’s Craft being released for Sketch on a seemingly daily basis, it is becoming harder and harder to ignore Sketch as a powerful, affordable alternative to the Adobe juggernaut for web and app layout.

For those of you who use Sketch, we would especially love your feedback on the kit. Even though we aren’t daily Sketch users, this isn’t simply a lazy SVG port to Sketch. The Sketch document has been specially structured to take advantage of Sketch’s infinite canvas size and unlimited Artboards. Knowing that Sketch users tend to structure and organize their documents more like Photoshop’s layers environment, we have also taken extra effort to name, organize, and sort all layers and objects in the kit. (This effort applies to the Illustrator document as well.)

All gradients and font sizes that didn’t transfer over to Sketch properly were reworked. Drop shadows in Illustrator that were imported as bitmap graphics were replaced with native Sketch drop shadow object effects. As an added bonus, we made extra efforts to fully leverage Sketch’s Background Blur effect. This is something that simply can’t be replicated in Illustrator in a graceful, non-destructive way.

We pulled in a few additional bitmap images to the app screens section to help highlight the blur effect. But rest assured, even though it isn’t always obvious, virtually everywhere that Apple’s blur effect would be used, including the bar templates and keyboards in the UI elements section, we have structured these object groups to automatically trigger the Background Blur effect with the proper blur, color, and transparency settings. If you decide you don’t want the blur effect for your app, simply look for the background layer or a special layer with “blur” somewhere in the name and turn off the Background Blur effect in the Inspector panel.

If there is something unique to Sketch that you think we should be taking advantage of to make your workflow better, shoot us a message on Twitter @mercury or email us at hello@mercury.io. Improving the document for you will likely help improve our own workflow, so we would love to hear from you.