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

Design-Engineering Workflow

1f461eee0b22011d0bccf4e882d9149f?s=47 Lucas Rocha
December 12, 2014

Design-Engineering Workflow

As UI engineers on Android, we spend a lot of time interacting with designers. Android currently lacks the tools that would make the translation from design (mockups, assets, specs) to implementation (layouts, drawables, code) a lot smoother. In this talk, I'll share some thoughts on the core components of what I'd consider an ideal design-engineering tooling/workflow on Android (where dspec is just a tiny piece of the puzzle).

Presented at the Festive Londroid meetup in London.

1f461eee0b22011d0bccf4e882d9149f?s=128

Lucas Rocha

December 12, 2014
Tweet

Transcript

  1. DESIGN↔ ENGINEERING WORKFLOW Festive Londroid, 2014

  2. LUCAS ROCHA +LucasRocha | @lucasratmundo

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. THE GAP * Mockups Specs ... Code Layout ... DESIGN

    DESIGN DEV DEV
  10. UNNATURAL Translation from design to implementation.

  11. DISCONNECTED Visual reference not usable in the dev tools.

  12. JUMP! Code generation, visual tools, unicorns.

  13. CODE MATTERS i.e. you'll have to maintain this thing.

  14. TOOLS MATTER It takes time to master design and developer

    tools.
  15. COMPLEXITY Codegen and visual tools fall apart in complex projects.

  16. DOMAIN Assets, layout & motion.

  17. BRIDGE ↔ Mockups Specs ... Code Layout ... DEV DESIGN

  18. I/O Designers deliver native input for developer tools.

  19. dspec Define and render UI specs on top of Android

    UIs. http://github.com/lucasr/dspec
  20. WORKFLOW ↔ Specs Code Layout Spec file DEV DESIGN

  21. SPEC FILE Computer and human readable. Leans on the resource

    system.
  22. SPEC FILE { "baselineGridVisible": true, "baselineGridCellSize": 8, "keylines": [ {

    "offset": 16, "from": "LEFT" }, { "offset": 16, "from": "RIGHT" } ], "spacings": [ { "offset": 0, "size": 16, "from": "LEFT" }, { "offset": 0, "size": 16, "from": "RIGHT" } ] }
  23. DESIGN SPEC Drawable that can be overlaid on any part

    of the UI.
  24. None
  25. ANDROID STUDIO Maybe a design-time attribute? tools:designSpec=”@raw/myspec”

  26. ASSETS Scalable atlas to autogenerate drawables in multiple densities? State

    list drawable in Sketch/PS? http://github.com/lucasr/dspec
  27. MOTION The trickiest one. Lots of green field for exploration.

  28. DEV TOOLS ↔ DESIGN DEV

  29. DEV TOOLS ↔ DESIGN DEV

  30. What other bridges can we build?

  31. QUESTIONS? +LucasRocha | @lucasratmundo http://thelayout.cc