I loved the layout after this: Zeplin in battle

    Sometimes I asked myself and Google: "Why am I ashamed to be a typesetter." Well, you know, when I couldn’t see by sight what font is in front of me: open sans with font-weight: bold , or open sans bold with font-weight: normal - or accidentally found out that “oh, they forgot to tell you, the scale was not 1920x1080, but 2560x1440 . "

    Usually they’re like it - they drop off .psd and spin as you want.



    In the spring of 2015, when I came to uKit, I learned about Sketch - and saw how the templates began to appear with beautiful and identical size labels relative to each other and a very detailed description.

    Then I wanted more.And just a few months later, Zeplin 1.0 came out. This application has changed my idea of ​​layout as a whole - because it truly makes the life of a layout designer happy.


    What is Zeplin and why is it needed


    This application is for Mac and Windows with a very fast and buggy web version (alternative for Linux), which will save you a lot of effort, time and nerves. Especially when working in a team - because he has integration with Slack.

    In conjunction with Sketch, you can end the versioned war of files and conveniently keep layouts alive. When complex screens are not overloaded with a huge number of layers and groups of layers, the designer can easily and easily make minor edits on the fly - the layout designer will see them immediately.



    But the main thing in Zeplin is that it allows you to click on any simple vector object on the canvas and see all available information about it.

    Exactly the information that the designer laid down - be it the exact size of the canvas, the exact dimensions of each element, the exact indentation, shadow, line thickness, transparency or CSS effect codes.



    Another nice thing is working with content. For example, you can click on the text on the layout, and Zeplin will allow you to copy the text. You can also tag content (canvases) inside the project folder and make notes in them.

    And this thing is ideal for working on three monitors:


    Three monitors - less alt-tab.

    For example: the middle monitor is always with a code. Large horizontal - displays the page and, if necessary, another window with the code. On the third, you can hold a DOM tree debugger or several console windows.



    But...


    Yes, Photoshop has a similar application. But, like all Ps, its usability seems overly cumbersome. Plus, there are difficulties with the definition of objects - and if the sizes of some elements are shown at the very least, then the relative interelement distances are not. And this is a fatal flaw.


    The interface of the same Adobe Brackets contains a lot of unnecessary and makes it difficult to focus on the correct transfer of the layout.

    Fortunately, Zeplin has support for Photoshop layouts - a special plugin requires a minimum of knowledge about how to export it better.


    By the way, in the latest version of Ps, the Zeplin plugin is built out of the box!

    For the purity of the experiment, I’ll say that overlays with recognition of Photoshop layouts are sometimes found in Zeplin - for example, it does not always accurately recognize line spacing in large blocks of text.

    But such moments should be part of the contract with the designer. After all, it’s more correct to break large pieces into different objects - if only because it is more convenient to work this way.



    How to embed this in a team


    I'll tell you how we did it at home. We have: my department of layout designers - 4 people - and an equal in power chief of designers, who has a crowd of guys in the state and in outsourcing.
    The task was facilitated by the fact that all the designers were already sitting on Sketch.

    NB Tip - Pre-convince your designers to make mock-ups not in Photoshop. For example, by demonstrating to them the difference in the display of the contents of the layouts with the increase in Zeplin during operation.


    On the left is a mockup made in Photoshop. On the right is in the sketch. Traces of blurring are visible in Photoshop: it’s a trifle, but it’s unpleasant.

    Next, you will need to take three simple steps.

    Step 1. Interest, telling everyone: “Pixel-perfection is not a myth or utopia, but it’s quite possible for yourself with the right tools.”

    Step 2. Agree with the designers. Discuss what needs to be drawn and indicated in the layouts and what not. Yes, if your designer still uses Photoshop, to upload to Zeplin, just convert the layout to a smart object and press 3 more buttons.

    Step 3. Distribute invites to layout designers so that they enter the project and begin to enjoy life - they no longer need to remember the scale and screen rulers when checking and developing the layout.



    How does it work with him


    1. Open the layout on one screen. We sketch out the layout on the second, just looking at the layout - we think over what to do, how to do, how much to do.

    At the same time, you already know exactly how many div elements will be needed, and how to parse it under React, JQ, or just a landing page. And that means that there is time to figure out what to use in order to grow a little on this specific task.

    2. Zeplin itself automatically collects all the colors in one place - and most often even gives them the names of CSS variables. It remains to zoom the layout and consider the details. If you don't like new-fangled native CSS variables, you can always transfer them to your favorite CSS preprocessor and name them using your usual special character like @ or $.



    A functional that automatically collects all the colors encountered in variables saves a lot of time. For example, if it turns out that “you need blacker blacker” , it will be enough just to change the color in one common variable, and it will immediately apply to everyone.

    3. Next, we deal with the layout and styles of the elements - select the element in the WYSIWYG mode on the page, click and immediately see all or almost everything you need to know about it.



    It remains to frame-by-element layout in styles. I usually go from top to bottom - from styling containers to internal elements.

    Here Zeplin significantly saves time. You can write styles just by looking at the layout, and rarely looking up at the use of the browser to check more or less large entities - is there any syntax error?


    Also from the pleasant - export immediately to the finished CSS, LESS, SASS, SCSS or Stylus. Conveniently.



    Somehow, the letters Y and Y were lost


    Zeplin 1.0 is a young application and, in fact, is still in beta. But beta does not happen without bugs.

    The main problems at work related to the transfer of the text: in the process, he may lose the Q and E . Or replace AND with Y on the button. Sometimes - but it’s rather a mistake of the designer - to insert a question icon or a set of letters instead of a space in the text.


    Zeplin's special love of replacing spaces and the letter AND are examples from various projects.

    But even despite this, copying texts with one click from the layout and pasting them into the right place in the code is much faster than picking a file with texts somewhere in the cloud.

    Funny moments happenwhen displaying sizes - but this, again, is a human factor. One freelance designer once messed up with the dimension: he believed that 1 conditional unit was 1px, and Zeplin that 1pt.

    But in general, the fact is that Zeplin usually exactly shows the layout that the designer made. So you can easily find half a pixel in the item information.


    Fractional sizes (height: 105.5px) are some kind of perfectionist hell.

    There is another very annoying feature - you can’t just download any selected object in two clicks. The same problem may occur with pictures.

    Of course, if we are talking about standard icons, they can be taken from icon fonts or connected with a texture from open libraries. But if it is an exclusive picture, icon or logo, then first the designer must specify the export of a specific asset in the source settings in Sketch. Yes, with Photoshop so, again, it will not work.

    ***

    This is already the second year since I fell in love with layouts again. Share your recipes and tools to enjoy your workflow.

    Ask questions about Zeplin. This is a world thing - in my opinion, the brightest thing that has happened between design in the client side recently.

    Also popular now: