$30 off During Our Annual Pro Sale. View Details »

Design-Engineering Workflow

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.

Lucas Rocha

December 12, 2014
Tweet

More Decks by Lucas Rocha

Other Decks in Technology

Transcript

  1. DESIGN↔
    ENGINEERING
    WORKFLOW
    Festive Londroid, 2014

    View Slide

  2. LUCAS ROCHA
    +LucasRocha | @lucasratmundo

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. THE GAP
    *
    Mockups
    Specs
    ...
    Code
    Layout
    ...
    DESIGN
    DESIGN DEV DEV

    View Slide

  10. UNNATURAL
    Translation from design to
    implementation.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. DOMAIN
    Assets, layout & motion.

    View Slide

  17. BRIDGE

    Mockups
    Specs
    ...
    Code
    Layout
    ...
    DEV
    DESIGN

    View Slide

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

    View Slide

  19. dspec
    Define and render UI specs on top of
    Android UIs.
    http://github.com/lucasr/dspec

    View Slide

  20. WORKFLOW

    Specs Code
    Layout
    Spec file
    DEV
    DESIGN

    View Slide

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

    View Slide

  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" }
    ]
    }

    View Slide

  23. DESIGN SPEC
    Drawable that can be overlaid on
    any part of the UI.

    View Slide

  24. View Slide

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

    View Slide

  26. ASSETS
    Scalable atlas to autogenerate
    drawables in multiple densities?
    State list drawable in Sketch/PS?
    http://github.com/lucasr/dspec

    View Slide

  27. MOTION
    The trickiest one. Lots of green field
    for exploration.

    View Slide

  28. DEV TOOLS

    DESIGN DEV

    View Slide

  29. DEV TOOLS

    DESIGN DEV

    View Slide

  30. What other bridges can
    we build?

    View Slide

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

    View Slide