Thinking in Code for Designer

Slide 1

Slide 1 text

Afnizar Nur Ghifari Proclub: Protalk Friday, 3rd July 2020 @afnizarnur Thinking in Code for Designer A reflection and story as designer who code

Slide 2

Slide 2 text

Apa kabar?

Slide 3

Slide 3 text

Apa kabar? Sehat?

Slide 4

Slide 4 text

Apa kabar? Sehat? Yuk kenalan

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Teknik Informatika Design

Slide 7

Slide 7 text

Design

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

This is not about designer should code or not

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Empowering designer to code and get the benefit by code

Slide 13

Slide 13 text

Should designers code?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Where to start?

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

It’s start from my problem

Slide 21

Slide 21 text

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!

Slide 22

Slide 22 text

How I can solve my problem?

Slide 23

Slide 23 text

Let’s just build the proof of concept

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

I don’t know how to create a Figma plugin

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

1 2 3 4 5 6 if ui onmessage msg type createPage name notify = => === = . . { ( . ) { . (). . ( ) } } figma msg "createPage" figma "New Page 1" figma "Page created!"

Slide 28

Slide 28 text

System & Functionality Mapping

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

Learning mostly by reading some open source code

Slide 32

Slide 32 text

Submit and Launch!

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Y ou can help others improve their current workflow

Slide 36

Slide 36 text

Bring your ideas to life

Slide 37

Slide 37 text

Should designers react?

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Why does React seem so hard?

Slide 40

Slide 40 text

Let’s talk about programming models

Slide 41

Slide 41 text

Imperative Model

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Declarative Model

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

I’m a button I’m a button

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Design process also declarative but imperative

Slide 55

Slide 55 text

How I can solve my company problem?

Slide 56

Slide 56 text

Color Finder: Easily find color design token

Slide 57

Slide 57 text

What is the token name of this hex color?

Slide 58

Slide 58 text

Learning to code will improve collaboration with our developers

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Writer have to count character in a text in design.

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

By doing code help me make more informed design decisions

Slide 63

Slide 63 text

By doing code I can help improve others workflow

Slide 64

Slide 64 text

Code is your new friend, designers. Embrace it!

Slide 65

Slide 65 text

Matur Nuwun