Thinking in Code for Designer

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