Zeplin can show percentage width instead of pixels, and also has the ability to show the underlying layout grid. Communicating responsive behaviour is not widely supported across these tools, although some have made steps towards it. Most will display designs as static images on a fixed screen size, but this is rarely the reality. However, there are some things that automated handover tools can’t show. ❌ Negative: Displaying responsive behaviour With design systems and atomic design becoming more commonplace, being able to integrate these into handover tools is a very powerful development in the design workflow.Ĭheck out my earlier blog post for why using style guides and component libraries are so important for great handover. Instead of just displaying static styles and components in the code view, you can link them to your style guide or component library to encourage adoption.įor example, Zeplin allows you to set up a spacing system which is shown instead of pixel values when inspecting. One area that these tools are really starting to shine in is documenting design tokens and components. ✅ Positive: Style guide and component adoption Making every single screen pixel-perfect can be more time-consuming than just doing the visual specs manually. But the intention behind these pixel values is not clear.įor example, an element could be shown to be 50px wide - but is this a set width or does it take the width based on its contents? Does it have a maximum width? Creating manual specs allows us to specify this, while purely automated specs leave it up to interpretation.Īdditionally, designs have to be consistently pixel perfect, or you could be asked questions like “Why is this line 50px on this screen, but 51px on the next?.” □♀️ Developers can see the width and height of every element and how it is spaced in relation to every other element. What could possibly go wrong?īy showing all styles we remove the ability to show which ones matter. Developers can come in and easily find exactly the information that they need. The most obvious advantage to automatic speccing tools is the time saved by not having to create redlines.Īll the styles and spacing information is already there. ✅Positives: Saving time + showing all information Just like other forms of automation that are taking place, there are pros and cons to these tools that it’s important to consider. Tools like Zeplin, Invision Inspect, Google Gallery and many more allow you to upload your design files and share them with developers, who can inspect and extract the styles of every element.ĭesigners everywhere rejoiced as they waved goodbye to ever having to produce redlines again. Recently, a whole range of tools have been introduced promising to fully automate visual specs and free designers forever from the horrors of redlining. The creation of the Sketch Measure plugin helped to somewhat streamline this process, but it still remains low on most designers’ lists of ‘Things I Enjoy Doing’, just below ‘watching paint dry’. This involved painstakingly adding markup on top of designs to show colours, fonts, widths, heights, spacings and more. Design handover involves communicating the visual styles and behaviours of your design so they can be translated into code.īack in the Dark Ages of digital design, the only way to clearly define styles and spacings was through a process called redlining.
0 Comments
Leave a Reply. |