If you’re a Sympli user that uses Sketch, I won’t need to tell you how beautiful the really is. That feeling when you can confidently say to developers: “Hey, here’s the design. Also, here’s the complete design specs, Hex/RGBA colour codes, a list of the fonts used, downloadable image assets and a concise “Brandbook/Style Guide” in case you need to refer to it. And then you follow up with: “Although, if something looks odd or oversighted, make a comment on the design in Sympli and tag me in it.” — that’s productivity right there. Sympli Plugin for Sketch But that being said, if you’re anything like me, you’ll still be looking for ways to improve your design workflow, so let’s take a look at the 5 best Sketch Plugins to bolster your design efficiency with Sketch and Sympli. 1. Pixel Perfecter We’ll start off nice and easy with . When handing off the design using Sympli, we don’t want layers to be aligned on (for example 17.3487px). It’s ugly, and if the developer was to extract this value during the development stage, the code would be ugly too. Also, most programming languages will try to round decimal numbers, so this would also make the web or app performance slower, which isn’t ideal. Pixel Perfecter subpixels Pixel Perfecter aligns all layers and objects onto the nearest for a much cleaner spec and design handoff, with a very quick n’ easy keyboard shortcut ( ) that also tells you how many layers/objects it realigned. full pixel cmd + alt + P 2. Mirr.io Many designers work solo, so the need for a huge collaborative prototyping app like Marvel App or InVision App can seem a bit unnecessary, especially when Sympli already offers collaboration tools. It doesn’t make sense to pay for two subscriptions where some of the core features are essentially the same. But with that having been said, prototyping is still important, even if the testing is being done by only, say…the designer, a developer and a couple other teammates. is a free, lightweight, and rather impressive mirroring app that allows you to prototype interactions and user flows from your Sketch artboards, and then share them with your team, who can test the prototype as if it were a finished app. Mirr.io Obviously the animation features are quite basic (I mean, it’s a free app), but complex animations are rarely needed anyway, as they often do more harm than good. Actually, they can be something of a hindrance a lot of the time. Note: Mirr.io requires a desktop app as well as Sketch Plugin. 3. Sketch Find & Replace Sympli is a terrific way to collect useful, contextual feedback, regardless of how “annoying” feedback can be sometimes. Sometimes changes are inconvenient despite being minor, for example when a common phrase is spelled incorrectly. Although, in this case, you could use , which lets you find/replace those mistakes (whereas the manual approach to this involves double-clicking the layer, highlighting the words, rewriting the words, then repeating this step for every instance of the mistake). Pretty awful, right? Sketch Find & Replace Sketch Find & Replace is a faster and more efficient solution. is the keyboard shortcut needed to run it. cmd + shift + F 4. Sort Me You can define the order in which artboards are exported to Sympli from Sketch by changing the order of the artboards in Sketch using a method called “natural sorting”, which is simply the order that they appear on the Sketch canvas. Although, it’s a bit time-consuming to be realigning the artboards after already rearranging them, which is why is so useful here. Sort Me Instead, rename each artboard ( ) starting with a number, so “Launch Screen” would become “1 Launch Screen”. Then, before you export the design to Sympli using the Sympli Plugin for Sketch, hit the Sort Me keyboard shortcut ( ) to sort the artboards automatically. After that, use the Sympli keyboard shortcut to export the artboards. It’s much, much quicker! cmd + R control + shift + P 5. Sketch Style Inventory Personally, I think there is nothing worse than receiving a handed off design with an abundance of unnecessary, unused, and sometimes even near-identical styles. I mean, what can you do in a situation like that? You’d need to contact the designer and clarify the styles one-by-one, to see which of the two (or more) similar styles is the “correct” one. really automatically creates a visual inventory of colours and text styles used in the design. Then, the designer can locate any inconsistencies and correct the mistakes, and then the developer can then receive the handoff with a smile. Sketch Style Inventory uses a whole range of keyboard shortcuts to select layers by colour, name, similar style and so on, so make sure to memorise those! Sketch Style Inventory — — — If I’ve missed anything (I probably have, Sketch is endlessly useful when paired with plugins!), let me or the official Sympli account know on Twitter. We’re always more than happy to discuss workflow tips, especially when Sympli is concerned! Like what you read? Use the ♥ button below to spread it around even more. Follow us on Twitter and Facebook to get more tips and tricks for mobile and web app UX/UI and development. And, check out the Sympli platform to help you speed the digital product development process with design versioning; asset, style, positioning handoff; Sketch, Photoshop, Xcode & Android Studio integration; and much more.
