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

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
  2. 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.
  3. 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!
  4. 1 2 3 4 5 6 if ui onmessage msg

    type createPage name notify = => === = . . { ( . ) { . (). . ( ) } } figma msg "createPage" figma "New Page 1" figma "Page created!"
  5. 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.
  6. Imperative Model Much like giving step-by-step directions to do something,

    this also describe the exact steps to achieve a change.
  7. 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. . . ( , )
  8. Declarative Model A programming paradigm that describes what the program

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

    the computer figure out the steps in between.
  10. 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