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

Thinking in Code for Designer

Thinking in Code for Designer

Slide deck presented for Proclub online talk event on 3 July 2020.

Afnizar Nur Ghifari

July 03, 2020
Tweet

More Decks by Afnizar Nur Ghifari

Other Decks in Design

Transcript

  1. Afnizar Nur Ghifari
    Proclub: Protalk Friday, 3rd July 2020
    @afnizarnur
    Thinking in Code

    for Designer
    A reflection and story as designer who code

    View Slide

  2. Apa kabar?

    View Slide

  3. Apa kabar?
    Sehat?

    View Slide

  4. Apa kabar?
    Sehat?
    Yuk kenalan

    View Slide

  5. Hi there, I’m Afnizar
    Currently, UX Designer at Bukalapak

    View Slide

  6. Teknik

    Informatika Design

    View Slide

  7. Design

    View Slide

  8. View Slide

  9. View Slide

  10. This is not about
    designer should

    code or not

    View Slide

  11. Or how to make
    designers code if they
    don’t want to

    View Slide

  12. Empowering designer to
    code and get the benefit
    by code

    View Slide

  13. Should
    designers
    code?

    View Slide

  14. View Slide

  15. View Slide

  16. It’s all relative
    There is no right or wrong, if you learn the code you
    will get benefits from it, if not, you don't get any
    loss too.

    View Slide

  17. View Slide

  18. Where to start?

    View Slide

  19. View Slide

  20. It’s start from my

    problem

    View Slide

  21. Background
    I'm tired to manually create page one
    by one when creating new project on
    Figma.

    For example if I'm working on a new
    project for Design System, I have to
    create all the component page
    list(Homepage, Form, Sheets,
    Navigation bar, etc).

    This is so inefficient and take a ton of
    my time!

    View Slide

  22. How I can solve my
    problem?

    View Slide

  23. Let’s just build the

    proof of concept

    View Slide

  24. View Slide

  25. I don’t know how to
    create a Figma plugin

    View Slide

  26. View Slide

  27. 1

    2

    3

    4

    5

    6
    if
    ui onmessage
    msg type
    createPage name
    notify
    = =>
    ===
    =
    . . {

    ( . ) {

    . ().
    . ( )

    }

    }
    figma msg
    "createPage"
    figma "New Page 1"

    figma "Page created!"

    View Slide

  28. System &

    Functionality

    Mapping

    View Slide

  29. View Slide

  30. Choosing stack, no
    matter what the stack,
    choose wisely
    My goals basically want to be more proficience with
    react so I started looking for react boilerplate.

    View Slide

  31. Learning mostly by
    reading some open
    source code

    View Slide

  32. Submit and

    Launch!

    View Slide

  33. View Slide

  34. View Slide

  35. Y
    ou can help others
    improve their current
    workflow

    View Slide

  36. Bring your ideas to life

    View Slide

  37. Should
    designers
    react?

    View Slide

  38. View Slide

  39. Why does React
    seem so hard?

    View Slide

  40. Let’s talk about
    programming

    models

    View Slide

  41. Imperative Model

    View Slide

  42. Imperative Model
    A programming paradigm that describes
    computation in terms of statements that change a
    program state.

    View Slide

  43. Imperative Model
    Much like giving step-by-step directions to do
    something, this also describe the exact steps to
    achieve a change.

    View Slide

  44. View Slide

  45. I’m a button
    1
    2
    I’m a button
    3

    View Slide

  46. I’m a button
    1
    2
    I’m a button
    3

    View Slide

  47. I’m a button
    1
    2
    I’m a button
    3

    View Slide

  48. 1

    2

    3

    4

    5

    6

    7

    8

    9

    10
    100

    200

    states
    onTap
    stateCycle
    =

    ->

    layerA
    stateA
    x
    stateB
    x
    layerA
    layerA "stateA" "stateB"
    # Set multiple states at once

    .
    :

    :
    :

    :


    # On a click, go back and forth between states.

    .
    . ( , )

    View Slide

  49. Declarative Model

    View Slide

  50. Declarative Model
    A programming paradigm that describes what the
    program must accomplish in terms of the problem
    domain.

    View Slide

  51. Declarative Model
    Describes changes as before and after and lets the
    computer figure out the steps in between.

    View Slide

  52. I’m a button
    I’m a button

    View Slide

  53. 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11
    state
    state
    state
    < />

    < />

    < > >

    "logged_out"
    "logged_out"
    "logging_in"
    "logged_in"
    = =
    ===
    ===
    ===
    username
    Login
    Spinner
    div div
    null
    function
    if
    return
    if
    return
    if
    return
    ({ , }) {

    ( ) {

    }

    ( ) {

    }

    ( ) {

    Welcome back { }
    }

    }
    App state username

    View Slide

  54. Design process also
    declarative but
    imperative

    View Slide

  55. How I can solve my
    company problem?

    View Slide

  56. Color Finder: Easily find color design token

    View Slide

  57. What is the token name
    of this hex color?

    View Slide

  58. Learning to code will
    improve collaboration
    with our developers

    View Slide

  59. View Slide

  60. Writer have to count
    character in a text in
    design.

    View Slide

  61. View Slide

  62. By doing code help me
    make more informed
    design decisions

    View Slide

  63. By doing code I can help
    improve others workflow

    View Slide

  64. Code is your new
    friend, designers.
    Embrace it!

    View Slide

  65. Matur

    Nuwun

    View Slide