In learning about design implementation and handoff, I have been tasked with choosing a spec tool from options such as Avocode, Zeplin, and InVision. With some web design knowledge of HTML, CSS, and Javascript, these programs all seem so cool to me! No more guessing and checking until it “looks right”.
After looking at all the tools, I can’t say that there is the best tool. They all offer options that are compatible with various prototyping tools and design programs. Even during much of the prototyping process, I was using Adobe XD rather than InVision like my classmates. Therefore, when picking the tool, it is about what works for you (for your own reasons).
Generally speaking, all of the tools have an inspect mode. InVision’s inspect mode is still in beta but it works. All of the programs show distances, code snippets, comments and allow for show/hide grid. This is already very helpful than counting pixels by hand. All of the tools have team collaboration which is very important because you’d be working with other designers but also while handoff, developers so it’s important to be able to share! But let’s dive into some more specifics:
Zeplin
I think the biggest perk about Zeplin is that you can directly upload from Sketch via a plug-in. This makes it really easy for designers who prefer Macs and use Sketch… Unfortunately, that is not me — I’m a PC user! But, Zeplin is friendly to Adobe product users too! It has an awesome automated style guide generation that provides names and hex codes to your color palette from imported mockups. It’s awesome that it can detect font properties and colors so that a style guide can easily be created! It also allows for PNG download of single screens, which are very handy for presentations such as a case study. The only drawback here is that Zeplin doesn’t provide prototyping… But that’s why I use Adobe XD.
InVision
During a previous module in UX Academy, we were tasked with using InVision to create our wireframes and prototypes. While I later chose to use Adobe XD, I was able to download PNG of my artboards from Adobe XD and upload them into InVision for prototyping. InVision is very ideal for mobile mockups due to its availability as a mobile app. It’s great for collaborations because you can add as many collaborators as possible and use the live chat option for remote teams (have not personally tried this, but saw it online!). Although there are many perks to InVision, I didn’t choose it for prototyping because it was a little confusing to use. It also gets messy because there’s not a clear distinction between designing and prototyping. While this tool seems to be an all-in-one tool, it’s actually still in beta so it’s organizing screens are not so great and there aren’t options for an integrated style guide. The most you can do is look at colors you use to design with but it will not provide font-styles or symbols/components.
Avocode
While I was poking around at this tool, I noticed that there are project subfolders which remind me of how Adobe Photoshop or Illustrator function with layers and sublayers. This is very key to keeping work tidy and legible. I can upload from Adobe XD and download as XD file which is super useful to going back and forth between code and design if there are tweaks that need to be made. And because it can upload like that, the layers actually stay and are labeled from the XD file — useful for edits! There is a color swatch, fonts, and variables included so again, Avocode also makes it simple to make style guides like Zeplin. I enjoy the pixel-checker because this is very helpful to someone like myself who likes to have pixel-precise designs! The only drawbacks here are that your file structure has to be clean to export well and it’s a little pricy… Currently using the 14-day trial!
Conclusion
I think that all these tools are great. I don’t think that InVision is for me because I haven’t even been using it for the design and prototyping process. It was a little messy and confusing so I stuck with Adobe XD for designing and prototyping. I like Zeplin and I like Avocode. What it comes down to will be trying both of them and finding what I like. Eventually, I would be paying for the best of either these options depending on how I enjoy it and what others used as their preferred tool. But for now, I would like to use my 14-day-trial of Avocode and probably stick with Zeplin. There are also more resources out there for Zeplin too!
