Thinking in Code for Designer

Thinking in Code for Designer

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

0c6fd6a08d0f898159cda7cafcacf07f?s=128

Afnizar Nur Ghifari

July 03, 2020
Tweet

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
  2. Apa kabar?

  3. Apa kabar? Sehat?

  4. Apa kabar? Sehat? Yuk kenalan

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

  6. Teknik Informatika Design

  7. Design

  8. None
  9. None
  10. This is not about designer should code or not

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

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

  13. Should designers code?

  14. None
  15. None
  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.
  17. None
  18. Where to start?

  19. None
  20. It’s start from my problem

  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!
  22. How I can solve my problem?

  23. Let’s just build the proof of concept

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

  26. None
  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!"
  28. System & Functionality Mapping

  29. None
  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.
  31. Learning mostly by reading some open source code

  32. Submit and Launch!

  33. None
  34. None
  35. Y ou can help others improve their current workflow

  36. Bring your ideas to life

  37. Should designers react?

  38. None
  39. Why does React seem so hard?

  40. Let’s talk about programming models

  41. Imperative Model

  42. Imperative Model A programming paradigm that describes computation in terms

    of statements that change a program state.
  43. Imperative Model Much like giving step-by-step directions to do something,

    this also describe the exact steps to achieve a change.
  44. None
  45. I’m a button 1 2 I’m a button 3

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

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

  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. . . ( , )
  49. Declarative Model

  50. Declarative Model A programming paradigm that describes what the program

    must accomplish in terms of the problem domain.
  51. Declarative Model Describes changes as before and after and lets

    the computer figure out the steps in between.
  52. I’m a button I’m a button

  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
  54. Design process also declarative but imperative

  55. How I can solve my company problem?

  56. Color Finder: Easily find color design token

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

  58. Learning to code will improve collaboration with our developers

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

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

  63. By doing code I can help improve others workflow

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

  65. Matur Nuwun