Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Tools - Closing the Gap Between Designer and Developer

Taylor Ling
April 23, 2018

Design Tools - Closing the Gap Between Designer and Developer

Alternative Title: What to expect as a Android Developer from Designer for Design Handoffs

The talk is about all the tooling used by the speaker in designing UI and Interactions at Fabulous and how the handover happened between design and dev team to ensure best quality app implementation. It also talks about some of the common obstacles in efficient communication between designer and developer and how to address them for better communication.

This is mainly aimed as a sharing to the developers on what/how a usual designer used for designing, and what are some of the tools that can help in better communication between designer and developer.

Taylor Ling

April 23, 2018

More Decks by Taylor Ling

Other Decks in Design


  1. mdpi (1x) 24dp × 24dp 20sp 24dp 56dp × 56dp

    Helps in specs handoff and assets management
  2. ✓ Screen designs in proper sizes (360x640 as base) ✓

    A more consistent design with design templates, symbols, shared styles etc. Visual Design
  3. png, svg png, svg png, svg png, jpg png, jpg

    png, jpg png, jpg png, svg mdpi 1x hdpi 1.5x xhdpi 2x xxhdpi 3x xxxhdpi 4x SVG SVG 1x PNG
  4. ✓ Usable design assets at proper sizes for different dpi.

    ✓ Assets are in appropriate format (jpg, png, svg) ✓ Assets usage are properly documented (e.g. how it should be placed, how it should be cropped) ✓ Assets are optimised Design Assets
  5. ✓ Complete design specs with dp/sp values that can be

    used directly in development ✓ Easy communication on specific screens/spots if there is any spec change Design Specs
  6. Principle for Mac Simple Interaction Complex Interaction Sketch, Adobe XD,

    Invision, Marvel, Atomic, Principle, Kite Compositor, Framer
  7. Import Into Export as Create interactive and animated mock up

    Video Gif PRD file APP file Create static mock up
  8. Delay for 100ms Animate in 300ms Scale from 0.8 to

    1.0 Move up 30dp Conversion to Code
  9. Easing curves FastOutSlowIn LinearOutSlowIn FastOutLinearIn For objects that MOVE ACROSS

    the screen For objects that ENTER the screen For objects that EXIT the screen
  10. ✓ Screen flow diagram to explain the connection between screens

    ✓ A high quality interactive mock/video to show the interaction idea and the UI behaviour ✓ Ready to use Animation/Transition specs Interaction Design
  11. Lottie is a mobile library for Android and iOS that

    parses Adobe After Effects animations exported as json and renders them natively on mobile and on the web. Lottie
  12. Export SVG Create Illustrations Import SVG, Create AI Export AI

    Import AI, Animate Export Bodymovin Json/AVD file
  13. Creating Animation in AE Make sure they are vectors Easily

    scalable as needed, and smaller size
  14. Creating Animation in AE Not all AE features are supported

    Make sure to test on the mobile Expression https://www.lottiefiles.com/preview
  15. ✓ A demo on how the animation should be used

    (video or the files using with preview app) ✓ A json/AVD file (designed in proper size) generated with bodymovin ✓ A clear narrative if the animation are linked to interactions/conditions (when to start, when to stop, when to repeat, which frames etc.) Animation Design
  16. Get the designer to provide you with everything (or at

    least most of the thing) you need for development
  17. Communicate with the designer to ensure that both are speaking

    the same language (e.g. dp, sp, FAB, snackbar, ripple etc.)
  18. Provide input to designer about what’s possible, and suggest alternative

    if something looks infeasible within the constraints