Thinking in Code for Designer

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

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
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?
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.
18. Where to start?
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
25. I don’t know how to create a Figma plugin
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
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!
35. Y ou can help others improve their current workflow
36. Bring your ideas to life
37. Should designers react?
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.
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
60. Writer have to count character in a text in design.
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