6

Best way to hand off specs from designer to developer?

almost 8 years ago from , UX Architect

I have been trying to find the best process flow for handing off specs from a designer to a developer for both iOS and Android screens. For iOS, currently our designer creates the designs at 3x resolution in pixels and then gives the specs to our developers in pixels to give them an idea of how the screen should be laid out. But we have been running into issues where the screens do not look like the specs we have created.

How do you hand off specifications to your developers both for iOS? Do you use points or pixels? Do you create the screens at 1x, 2x, or 3x? How do you hand off specifications for Android?

Any advice is greatly appreciated!

15 comments

  • Lance Cheng, almost 6 years ago

    I recommend you to try Markly, it's completely free to use. Markly is a free design collaboration app for macOS to help designers export, share & organize assets, enable developers to inspect design spec with 1 click. https://marklyapp.com/

    4 points
  • Matthew O'ConnorMatthew O'Connor, almost 8 years ago

    The main thing I can suggest is to work at 1x and MDPI (for iOS and android respectively).

    Devs work in points and DPs, where we work in pixels. By working at the lowest resolution you can start to do straight conversions between your pixel designs to the numbers that the devs will use. Having this common language means that I can just say "make that an even padding of 16" and a dev knows to put that in 16 points/DP.

    +1 for Zeplin from me also. It has been a truly useful tool for my team over the past few months.

    3 points
    • Christian Poschmann, almost 8 years ago (edited almost 8 years ago )

      Agreed, this is the best workflow for me so far. In my case, I have to design for iOS and Android at the same time. I design at 1x/MDPI which allows me to re-use elements most of the time without having to resize them much. I'm using one Sketch file that has art boards for each platform next to each other, which allows me to ensure things are consistent across platforms.

      I then export the final design into their respective projects in Zeplin and have design reviews with dev's on a regular basis.

      Breather http://cloud.breather.com/image/3i2g1u1H1t2M

      0 points
  • Christian Poschmann, almost 8 years ago (edited almost 8 years ago )

    I'm using Zeplin.io, which greatly improved the handoff to our developers.

    There is also http://marklyapp.com/, which i didn't find as easy to use in comparison to zeplin.

    2 points
  • Ruban KhalidRuban Khalid, almost 8 years ago

    I agree you should try Zeplin, it's awesome. But really you should be sitting with the devs if possible to implement the design. Install builds of the app on your phone and have design reviews based on the latest build.

    1 point
    • Julia C, almost 8 years ago

      Thanks for the reply. We are trying to figure out the best process when we initially hand off the designs so that our developers have something to start with. How do you normally start that discussion?

      0 points
      • Bart Claeys, almost 8 years ago

        Sometimes you don't need tools, but a conversation. Go talk with the devs and ask how they want to get things delivered.

        0 points
  • Shekh Al Rayhan, over 6 years ago

    Carft by Invision | create beautiful and useful Style Guide within 1 min. You must organised your files first.

    0 points
  • Adam Ferns, almost 8 years ago

    I am wondering why we don't have options to import Sketch layouts directly into development environments. This would be such a huge timesaver and some proto-typing apps already do it. It seems weird to me we are using (albeit awesome) middle-man software like Zeplin to get measurements so the devs can manually re-lay it out.

    Are there any plug-ins that can export Sketch artboards as Xcode storyboard files? Something like this would hugely lighten the workload.

    0 points
    • Max Ignatyev, over 7 years ago

      Adam, it might be interesting for you to check out beta of the tool we are working on: http://sympli.io.

      We don't really go with approach of generation of the storyboards or android layout files, because there is no enough of semantics in vector graphic file to build a proper UI. Still, it's kind of possible to build a storyboard that would look approximately like the original mockup, but re-arrangement of views will take bigger effort for developers than to create the UI manually. Especially for Android, where UI is usually split into multiple fragments/subviews and spread across multiple files.

      Instead of UI generation, Sympli provides all design handoff features(assets, specs, fonts) and also integrates with IDEs like Android Studio and XCode(WebStorm and PHPStorm integration is coming soon). Sympli plugins extend standard IDE tools to make implementation of design in the app easier for developers. For example, in XCode developers can apply styling parameters and effects from mockup(like fills, shadows, borders and many more) to selected views in Interface Builder in one click.

      We consider such approach as a happy medium that significantly reduces the routine for both designers and developers and at the same time keeps the code under full developer's control and don't introduce any "magic".

      0 points
  • Evan DinsmoreEvan Dinsmore, almost 8 years ago

    I design in Photoshop at whatever resolution is the most common of our users, and I also preview my designs on that most common device (typically iPhone 6, Nexus 5). When designing, I keep in mind the divisions or multiplications to asset size when scaling up or down to additional resolutions (@1x, @3x), (mdpi, hdpi, xxhdpi). I do not always work pixel-perfectly, because that wastes time, plus some assets or text areas or whatever sometimes have larger bounding boxes than how I've laid them out (for whitespace/dimension scaling purposes) so I find tools like Zeplin don't work well for me.

    What I end up doing is manually marking up dimensions (usually margin/padding are depicted with semi-transparent coloured bars, with the colours working as a legend to quickly see which dimensions are shared, which helps with defining constants. I try to keep these consistent between screens, too). Then, larger rectangles for image assets/text fields/whatever to help show where whitespace is included in the asset, marked up with any size constants, font sizes, file names, etc.

    All dimensions in pt/dp or %. I've had a lot of success with handing this off to developers and only needing minimal tweaking afterwards.

    0 points
  • David AlandíDavid Alandí, almost 8 years ago (edited almost 8 years ago )

    +1 to Zeplin. I'm pending to try Avocode. I used to make specs with sketch + measure plugin.

    In mdpi = 1x android.

    0 points
  • Helen . Helen . , almost 8 years ago (edited almost 8 years ago )

    I remember the first time I struggled to understand how to provide the deliverables to the devs I work with. Reading things online didn't seem to communicate the answers to what I was looking for and it was overly complicated so I will try to be as simple as possible.

    Based on my understanding, for IOS, I start off with designing in pixels (retina) and for providing of assets, I provide the 1x,2x,3x assets and the redlines in points. http://www.iosres.com/

    In summary, PNG assets = Pixel dimensions,

    Redlines ( for x and y co-ordinates for where things are placed and sizes) = Points

    As far as Android go, that thing's so complicated that it took me twice as long to get my head wrapped around it, and I am still quite hazy about this. But same concept, while IOS' assets are in 1x,2x and 3x, Android has assets in things like LDPI,MDPI,TVDPI,HDPI,XHDPI,XXHDPI,XXXHDPI (yes, I know, there's a crazy amount of different screen resolution for Android phones out there).

    Determine what Android devices you support, then find a common density bucket and do the math for assets and positon at %width of the screen.

    I tried to simplify this as best as I could. Not sure if there's a better way to doing this, but this is pretty much my 2 weeks of pain of trying to learn and understand this, simplified for you :)

    0 points
    • Julia C, almost 8 years ago

      Thanks for the reply. That is an interesting approach to do PNG assets in pixels and redlines in points. Have you run into any issues using that system? Another question I have is that while 1x assets are normally created at a standard 72 dpi, the original iPhone is actually at 163 dpi. Have you ever noticed that to be an issue?

      0 points