Install Figma Free Software

Draf transkrip dengan bingkai asal rakaman. Pengecaman pertuturan automatik dan kesesuaian setiap bingkai masih memerlukan semakan.

00:00:03–00:00:12

00:00:00 Video seterusnya saya nak share tentang rahsia desain yang convert.

00:00:03 Dan dalam ni saya nak tunjukkan satu software yang jarang orang share.

00:00:08 Nama dia adalah Figma.

00:00:10 Macam mana cara nak install Figma Free Software.

00:00:12–00:00:21

00:00:10 Macam mana cara nak install Figma Free Software.

00:00:15 Tanpa buang masa, jom kita mulakan.

00:00:17 Ok, step pertama, tolong buka dekat Google macam ni.

00:00:20 Type je dekat dalam ni, F-I-G-M-A.

00:00:21–00:00:27

00:00:20 Type je dekat dalam ni, F-I-G-M-A.

00:00:22 Figma, tekan Enter.

00:00:25 Lepas tu anda akan nampak belah atas sekali.

00:00:27–00:00:36

00:00:25 Lepas tu anda akan nampak belah atas sekali.

00:00:27 Figma The Collaboration Interface Design Tools

00:00:31 Tekan yang ni

00:00:33 Ok lepas tu kita akan masuk ke dalam Figma

00:00:35 Tapi sebab saya dah terlog out

00:00:36–00:00:39

00:00:35 Tapi sebab saya dah terlog out

00:00:37 Terlog in

00:00:37 Saya log out balik lah eh

00:00:39–00:00:42

00:00:39 Sekejap

00:00:39 Saya log keluar balik

00:00:40 Ok saya tekan sekali lagi

00:00:41 Haa sorry sorry

00:00:42–00:00:45

00:00:41 Haa sorry sorry

00:00:43 Sorry sorry sorry

00:00:44 So kalau kita tekan balik Figma

00:00:48–00:00:51

00:00:47 Tekan enter

00:00:49 Masuk

00:00:50 Masuk dekat sini

00:00:51–00:00:54

00:00:50 Masuk dekat sini

00:00:51 Haa inilah muka depan dia

00:00:53 Dan Figma ni guys dia percuma

00:00:54–00:00:57

00:00:53 Dan Figma ni guys dia percuma

00:00:55 Sesuai lah untuk kita yang nak main-main

00:00:57–00:01:00

00:00:55 Sesuai lah untuk kita yang nak main-main

00:00:57 Desain-desain free ni

00:00:58 Tapi dia ada versi yang berbayar

00:01:00–00:01:03

00:00:58 Tapi dia ada versi yang berbayar

00:01:00 Kalau nak bayar dia ni

00:01:01 Mahal lah

00:01:02 Saya pun tak bayar

00:01:02 Saya pun pakai yang free je

00:01:03–00:01:06

00:01:02 Saya pun pakai yang free je

00:01:04 So, pakai je yang free

00:01:05 Serius

00:01:06–00:01:09

00:01:05 Serius

00:01:06 Free ni pun dah sangat mencukupi

00:01:07 Setakat saya pakai

00:01:08 Setahun baru saya kena bayar

00:01:09–00:01:15

00:01:08 Setahun baru saya kena bayar

00:01:10 Sebab

00:01:11 Features free dia pun dah ok lah

00:01:12 Dan apa itu Figma

00:01:14 Figma ni

00:01:14 Tujuan dia adalah

00:01:15–00:01:18

00:01:14 Tujuan dia adalah

00:01:15 Untuk buat design

00:01:16 Design website

00:01:18–00:01:21

00:01:16 Design website

00:01:18 Macam ni kan

00:01:18 Kita nak buat

00:01:21–00:01:24

00:01:21 To prom lah

00:01:22 Ni design

00:01:23 Kita nak design website

00:01:24–00:01:27

00:01:23 Kita nak design website

00:01:24 Kita nak draw

00:01:25 Dia macam-macam

00:01:26 build, publish, nak buat mockup

00:01:33–00:01:36

00:01:31 yang kita boleh buat dekat dalam Figma ni

00:01:33 tapi especially paling penting dia design

00:01:35 dan design dia ni bukan macam design

00:01:36–00:01:39

00:01:35 dan design dia ni bukan macam design

00:01:37 Canva apa semua, dia design

00:01:42–00:01:45

00:01:40 dia adalah pembunuh Adobe XD

00:01:43 sebab Adobe pun banyak

00:01:44 seraga sekarang ni sebab Figma ni dah macam-macam

00:01:45–00:01:48

00:01:44 seraga sekarang ni sebab Figma ni dah macam-macam

00:01:46 template Figma dia, dia online

00:01:48–00:01:51

00:01:46 template Figma dia, dia online

00:01:48 website bila tu, jadi dia tak payah nak install

00:01:50 dia hidup dalam browser

00:01:51–00:01:54

00:01:50 dia hidup dalam browser

00:01:52 macam kita buka YouTube tu secara online macam tu

00:01:54–00:01:57

00:01:52 macam kita buka YouTube tu secara online macam tu

00:01:54 macam tu lah dia

00:01:55 so banyak lah fungsi-fungsi

00:01:57–00:02:00

00:01:55 so banyak lah fungsi-fungsi

00:01:57 Figma ni

00:01:58 jadi jom kita

00:01:59 explore sama-sama

00:02:00–00:02:03

00:01:59 explore sama-sama

00:02:00 Figma

00:02:00 kalau anda yang zero

00:02:01 boleh follow

00:02:02 dan ni nampak lah

00:02:03–00:02:09

00:02:02 dan ni nampak lah

00:02:03 boleh design website

00:02:04 social media

00:02:05 mobile app

00:02:06 presentation

00:02:06 invitation

00:02:06 tapi mostly orang design

00:02:08 untuk website lah

00:02:08 Figma ni

00:02:09–00:02:12

00:02:08 Figma ni

00:02:10 jadi jom tekan button

00:02:11 get started for free

00:02:12–00:02:15

00:02:11 get started for free

00:02:13 3, 2, 1

00:02:14 tekan

00:02:14 get started for free

00:02:15–00:02:18

00:02:14 get started for free

00:02:15 tekan sahaja

00:02:17 continue with google

00:02:18–00:02:21

00:02:17 continue with google

00:02:18 dan saya akan gunakan

00:02:19 satu email saya

00:02:20 yang fresh

00:02:21–00:02:24

00:02:20 yang fresh

00:02:21 from oven

00:02:22 saya guna email ni lah

00:02:23 contohnya

00:02:24–00:02:27

00:02:23 contohnya

00:02:24 Email yang saya tak pakai

00:02:25 So tekan sahaja button continue

00:02:27–00:02:30

00:02:25 So tekan sahaja button continue

00:02:27 Pilih lah mana-mana email

00:02:29 Tekan, patut tekan dia proceed continue

00:02:30–00:02:33

00:02:29 Tekan, patut tekan dia proceed continue

00:02:31 Dan automatically dia akan

00:02:33–00:02:36

00:02:31 Dan automatically dia akan

00:02:33 Buat pendaftaran

00:02:34 Tapi kita tengok jap

00:02:35 Apa yang dia tanya ni

00:02:39–00:02:42

00:02:36 Oh terus masuk ke dalam guys

00:02:39 Jadi kita namakan

00:02:41 Nama saya Adib

00:02:45–00:02:51

00:02:43 Tekan continue

00:02:45 Yang ni bantai je lah apa-apa

00:02:47 Kerja

00:02:48 Okay continue

00:02:49 Kenapa ni

00:02:51–00:03:00

00:02:49 Kenapa ni

00:02:53 dia lebih bagus daripada Canva

00:02:55 sebab Canva

00:02:56 Canva bagus

00:02:57 banyak template

00:02:58 tapi issue dengan Canva ni

00:02:59 dia frame dia tu

00:03:00–00:03:06

00:02:59 dia frame dia tu

00:03:01 kalau dah petak-petak je

00:03:02 dia susah nak duplicate design

00:03:04 ada lah benda-benda yang saya tak suka

00:03:05 pasal Canva

00:03:05 Canva tak boleh nak buat design

00:03:06–00:03:09

00:03:05 Canva tak boleh nak buat design

00:03:07 yang continuous untuk website

00:03:08 so dia macam Canva

00:03:09–00:03:12

00:03:08 so dia macam Canva

00:03:10 betul

00:03:10 tapi dia lebih advance sikit

00:03:12–00:03:18

00:03:10 tapi dia lebih advance sikit

00:03:12 daripada Canva

00:03:12 sebab tu lah kalau awak pakai yang ni

00:03:14 awak rasa macam advance je

00:03:15 Canva kan simple-simple je kan

00:03:18–00:03:21

00:03:18 so jom

00:03:19 kita tengok

00:03:19 kita explore sama-sama

00:03:24–00:03:27

00:03:24 Jawab je lah apa-apa

00:03:25 Boleh skip ke?

00:03:26 Tak boleh

00:03:26 Oh boleh skip

00:03:30–00:03:33

00:03:29 You speak on before

00:03:30 A few times

00:03:32 Okay

00:03:32 Layan je lah

00:03:33–00:03:36

00:03:32 Layan je lah

00:03:34 Yang ni

00:03:35 Kita pakai yang free

00:03:36–00:03:39

00:03:35 Kita pakai yang free

00:03:37 Ini ya

00:03:38 Tekan starter

00:03:38 Sebab dia adalah free

00:03:39–00:03:48

00:03:38 Sebab dia adalah free

00:03:39 Limited

00:03:40 3 file

00:03:41 Okay sangat lah tu

00:03:42 Kita pakai satu file pun dah cukup sebenarnya

00:03:44 Tekan button

00:03:45 Continue

00:03:48–00:03:51

00:03:48 Lepas tu

00:03:49 Ni skip je lah

00:03:50 ok, kita dah selamat

00:03:51–00:03:57

00:03:50 ok, kita dah selamat

00:03:53 masuk ke dalam Figma guys

00:03:55 jadi, berjaya tak follow saya

00:03:56 kalau belum berjaya, masuk balik

00:04:00–00:04:15

00:03:59 daripada mula

00:04:00 jadi, apa yang ada kat sini, kita ada

00:04:02 Fik Jam Basic, Figma Basic

00:04:05 Adib Afifi Hassan

00:04:07 Team Library, ok, saya nak

00:04:08 awak tekan dekat Figma Basic

00:04:10 jom kita masuk dekat bahagian

00:04:12 Figma Basic, 3, 2, 1, let's go

00:04:14 bila awak tekan, dia double click

00:04:21–00:04:30

00:04:20 Figma punya design

00:04:21 So, bagus lah kita nak belajar kat sini

00:04:23 Kita boleh scroll eh, boleh zoom

00:04:25 Untuk zoom ni, awak boleh

00:04:27 Macam saya, sebab saya pakai

00:04:29 Macbook, saya boleh macam tu je lah

00:04:30–00:04:33

00:04:29 Macbook, saya boleh macam tu je lah

00:04:31 Macam ni lah, tapi kalau awak pakai

00:04:33–00:04:36

00:04:31 Macam ni lah, tapi kalau awak pakai

00:04:34 Window, awak boleh tekan

00:04:35 Control plus

00:04:36–00:04:42

00:04:35 Control plus

00:04:37 Control minus, jadi zoom out

00:04:38 Control plus, jadi zoom in

00:04:40 So, macam ni saya boleh zoom in macam ni lah

00:04:42–00:04:45

00:04:40 So, macam ni saya boleh zoom in macam ni lah

00:04:42 Jadi, Figma ni, dia adalah software

00:04:45–00:04:48

00:04:42 Jadi, Figma ni, dia adalah software

00:04:45 Untuk kita design

00:04:47 Macam ni, dia boleh design-design

00:04:48–00:04:51

00:04:47 Macam ni, dia boleh design-design

00:04:50 dan

00:04:50 Figma ni bagus lah untuk kita nak

00:04:54–00:04:57

00:04:53 tukar apa-apa dan dia ada

00:04:55 kotak-kotak macam ni nampak dia boleh design website

00:04:57–00:05:00

00:04:55 kotak-kotak macam ni nampak dia boleh design website

00:04:58 macam ni lah

00:04:58 practice design kita boleh tengok

00:05:00–00:05:03

00:04:58 practice design kita boleh tengok

00:05:00 ni semua ni di design bagi Figma ni

00:05:02 saya boleh tukar ni

00:05:03–00:05:06

00:05:02 saya boleh tukar ni

00:05:05 saya

00:05:05 eh hilang tak lah

00:05:18–00:05:27

00:05:17 benda ni semua boleh tukar

00:05:19 jadi dia macam konsep design lah

00:05:21 Kita nak tukar apa-apa kat sini pun boleh

00:05:23 Dan macam gambar ni ke nak buat keluar ke

00:05:25 Jadi kalau Canva

00:05:27–00:05:30

00:05:25 Jadi kalau Canva

00:05:27 Dia tak boleh nak buat design continuous

00:05:29 Katalah kita nak tambah panjangan dia

00:05:30–00:05:33

00:05:29 Katalah kita nak tambah panjangan dia

00:05:30 Kita boleh select dekat sini

00:05:32 Kita boleh panjangkan lagi

00:05:48–00:05:51

00:05:46 Masalah dengan Canva

00:05:48 Dia tak boleh tiba-tiba kita nak panjangkan website kita

00:05:50 Lepas tu nak scroll

00:05:51–00:05:54

00:05:50 Lepas tu nak scroll

00:05:52 Macam ni kan

00:05:53 So kalau katalah saya nak tengok view dia yang betul

00:05:54–00:05:57

00:05:53 So kalau katalah saya nak tengok view dia yang betul

00:05:55 Saya boleh tekan select ni

00:05:56 Saya boleh tekan button play kat sini

00:05:57–00:06:00

00:05:56 Saya boleh tekan button play kat sini

00:05:58 Button play ni

00:05:59 Dia akan buat macam website tu real

00:06:03–00:06:09

00:06:02 Jadi kita dapat view

00:06:03 Macam view telefon boleh

00:06:05 Kita nak view laptop boleh

00:06:06 Desktop boleh

00:06:07 Jadi kita nampak lah macam ni

00:06:08 Nampak

00:06:09–00:06:12

00:06:08 Nampak

00:06:09 Saya dapat scroll

00:06:11 Dapatlah perasaan ibarat macam kita

00:06:12–00:06:15

00:06:11 Dapatlah perasaan ibarat macam kita

00:06:13 Tengah buka website sebenar

00:06:14 Contoh macam ni

00:06:15–00:06:18

00:06:14 Contoh macam ni

00:06:15 Ni sebab saya sedang halis tadi tu

00:06:17 Terasa letak balik

00:06:21–00:06:24

00:06:21 ok, so saya tekan

00:06:22 sini, saya tekan button play, ni saya tunjuk just

00:06:24–00:06:27

00:06:22 sini, saya tekan button play, ni saya tunjuk just

00:06:24 features-features yang ada je, jadi so awak tahu

00:06:26 oh ni ke function dia, yes, dia boleh

00:06:30–00:06:33

00:06:28 buat mockup macam ni

00:06:30 kita nak experience macam mana eh, kalau kita buka

00:06:32 website

00:06:36–00:06:45

00:06:34 boleh, kalau kita nak tekan dia, kita boleh link

00:06:36 kan ke page lain, nak tekan

00:06:38 boleh, nak ni boleh, nak buat dia bergerak

00:06:40 boleh, jadi dia mockup lah, dia

00:06:42 bukanlah buat ni, inilah website kita dah siap tak

00:06:44 ini just macam satu mockup je

00:06:45–00:06:48

00:06:44 ini just macam satu mockup je

00:06:46 sebab tu lah, dalam panduan ni saya

00:06:48–00:06:51

00:06:46 sebab tu lah, dalam panduan ni saya

00:06:48 ajar awak bukan design biasa-biasa. Saya nak ajar awak

00:06:50 design professional. Macam mana kami buat

00:06:51–00:06:54

00:06:50 design professional. Macam mana kami buat

00:06:52 design wala-wala tu. Ha, kat sini lah.

00:06:54–00:06:57

00:06:52 design wala-wala tu. Ha, kat sini lah.

00:06:54 Okay. So, kita dah cover basic

00:06:56 fitma. Jadi, saya explain lah

00:06:57–00:07:00

00:06:56 fitma. Jadi, saya explain lah

00:06:58 tentang features-features yang ada kat sini.

00:07:00–00:07:03

00:06:58 tentang features-features yang ada kat sini.

00:07:01 Tapi untuk explain ni, saya patah

00:07:02 balik keluar eh. So, awak tekan balik dekat huruf

00:07:03–00:07:09

00:07:02 balik keluar eh. So, awak tekan balik dekat huruf

00:07:04 F ni. Kita tekan back to file.

00:07:06 Kita nak keluar balik ke depan. Okay.

00:07:08 Jadi, sekarang ni, saya nak awak

00:07:12–00:07:18

00:07:10 buat satu file pertama.

00:07:12 Okay. Tekan dekat design.

00:07:14 Nampak design ni. Okay. Kita tekan

00:07:16 dekat design.

00:07:21–00:07:33

00:07:20 Melahirkan

00:07:21 File kita yang pertama

00:07:23 Jadi file ni dia kosong lah

00:07:24 Dia tak ada apa-apa

00:07:26 Dan

00:07:27 Dalam file ni

00:07:28 Kita ada beberapa benda

00:07:30 Kita tengok sini

00:07:31 Nak buat website ke

00:07:32 Moba apps ke desktop

00:07:33–00:07:36

00:07:32 Moba apps ke desktop

00:07:33 Saya tekan pangkah je lah

00:07:35 Tekan pangkah je

00:07:36–00:07:42

00:07:35 Tekan pangkah je

00:07:36 Kita biar je dia kosong

00:07:37 Okay

00:07:38 So

00:07:41 Kita nak namakan dulu file kita ni

00:07:42–00:07:45

00:07:41 Kita nak namakan dulu file kita ni

00:07:42 Contohnya

00:07:43 Sales page

00:07:45–00:07:48

00:07:45 Kosong satu

00:07:46 Okay

00:07:46 Saya nak explain

00:07:47 Basic features yang ada daripada kiri ke kanan

00:07:48–00:07:51

00:07:47 Basic features yang ada daripada kiri ke kanan

00:07:50 Kita start dengan bawah sekali

00:07:51–00:08:00

00:07:50 Kita start dengan bawah sekali

00:07:52 Okay, daripada kiri ni

00:07:54 Ini adalah kalau kita nak gerakkan dia

00:07:56 Kalau hand ni, dia boleh bergerak macam ni

00:07:58 Sekejap tak nampak eh, saya buat kotak dulu lah

00:08:00–00:08:15

00:07:58 Sekejap tak nampak eh, saya buat kotak dulu lah

00:08:00 Okay, ni kena buat kotak

00:08:02 Kita boleh buat kotak

00:08:03 Kalau kita tekan ni, kita boleh buat macam-macam lah

00:08:05 Arrow line lah lah

00:08:06 Benda-benda basic

00:08:08 Yang ada arrow ni, tapi kita kena zoom pun nampak

00:08:11 Ada arrow semua kat situ

00:08:14 Haa, sama je lah

00:08:15–00:08:24

00:08:14 Haa, sama je lah

00:08:15 Benda-benda basic

00:08:15 Tapi dengan basic ni pun dah boleh buat website lawa

00:08:18 Yang kelakar tu

00:08:19 Tak banyak sangat benda

00:08:20 So kita boleh gerak-gerakkan dia

00:08:23 Contoh kita ambil tangan ni kan

00:08:24–00:08:30

00:08:23 Contoh kita ambil tangan ni kan

00:08:25 Ambil tangan

00:08:26 Kita boleh macam ni

00:08:28 Macam grab dia

00:08:29 Tapi kalau kita nak tarik ni tak boleh lah

00:08:30–00:08:33

00:08:29 Tapi kalau kita nak tarik ni tak boleh lah

00:08:32 Kita kena tukar balik kepada move

00:08:33–00:08:45

00:08:32 Kita kena tukar balik kepada move

00:08:36 Macam ni

00:08:36 Macam ni kalau kita nak

00:08:38 Katalah kita ada tulisan

00:08:39 Tulisan kita boleh tekan kat sini

00:08:41 Tulisan

00:08:43 Saya suka makan

00:08:48–00:09:00

00:08:46 Macam mana kalau saya nak besarkan dia

00:08:48 Kalau saya tarik macam ni

00:08:50 Dia tak membesar je dia kotak

00:08:54 So macam mana kita nak membesarkan dia

00:08:56 Adalah saya boleh undo balik

00:08:58 Tekan control Z

00:08:58 Ataupun right click

00:09:00–00:09:09

00:08:58 Ataupun right click

00:09:00 Boleh undo kat mana

00:09:02 Tapi biasanya

00:09:05 Command Z ataupun control Z

00:09:07 Ni saya undo balik

00:09:18–00:09:30

00:09:17 Yang ni pula untuk kita

00:09:19 Scale kan, contoh macam ni, saya tekan dia

00:09:21 Saya tekan dia ni

00:09:22 Saya tarik je

00:09:25 So katalah saya susun serentak

00:09:27 Saya nak semua scale serentak

00:09:28 Dan semua ni akan scale serentak

00:09:30–00:09:36

00:09:28 Dan semua ni akan scale serentak

00:09:31 Saya select semua ni

00:09:34 Saya tarik je

00:09:35 Nampak

00:09:36–00:09:39

00:09:35 Nampak

00:09:37 Itulah function bendalah ni

00:09:38 Dia untuk resize, untuk scale

00:09:39–00:09:45

00:09:38 Dia untuk resize, untuk scale

00:09:40 So kita dapat resize semua sekali

00:09:42 Katalah kita nak semua ni resize dengan konsisten

00:09:45–00:09:48

00:09:42 Katalah kita nak semua ni resize dengan konsisten

00:09:46 Kita dah pilih tu

00:09:47 Tarik je

00:09:48–00:09:51

00:09:47 Tarik je

00:09:48 Semua akan resize

00:09:49 Jadi itulah function bendalah ni

00:09:51–00:09:54

00:09:49 Jadi itulah function bendalah ni

00:09:52 Dia sangat function bila kita ada banyak design lah

00:09:53 Tapi sebelum kita buat design apa-apa

00:09:54–00:09:57

00:09:53 Tapi sebelum kita buat design apa-apa

00:09:56 Yang ni paling penting bendalah ni

00:09:57–00:10:00

00:09:56 Yang ni paling penting bendalah ni

00:09:57 Ini nama dia frame

00:09:59 Dalam ni ada banyak lah section slice

00:10:00–00:10:03

00:09:59 Dalam ni ada banyak lah section slice

00:10:00 Tapi yang kita memang pakai frame

00:10:02 Saya nak buat tekan dekat frame

00:10:06–00:10:18

00:10:06 Tekan dekat frame

00:10:07 Cuba tarik macam ni

00:10:08 Ini frame

00:10:12 Frame ni, kita boleh tarik saiz besar, saiz kecil

00:10:15 Dan bila kita buat frame

00:10:16 Kita sebenarnya boleh tekan dekat frame

00:10:18–00:10:21

00:10:16 Kita sebenarnya boleh tekan dekat frame

00:10:18 Dan pilih saiz dia

00:10:20 Dia ada saiz iPhone 16

00:10:27–00:10:30

00:10:27 Saiz, satu saya tekan sini

00:10:28 Kita nak buat saiz iPhone 16, Android, iPad, MacBook Air, MacBook 14

00:10:30–00:10:36

00:10:28 Kita nak buat saiz iPhone 16, Android, iPad, MacBook Air, MacBook 14

00:10:33 Ni kira, ini saiz untuk MacBook 14

00:10:39–00:10:45

00:10:38 Dia akan ikut saiz ni lah

00:10:41 Sebab itulah dia beza dengan

00:10:43 Canva tak boleh nak buat macam ni

00:10:45–00:10:48

00:10:43 Canva tak boleh nak buat macam ni

00:10:45 Nak buat F4 pun boleh

00:10:46 Kadang-kadang saya punya lah banyak pasang nak pakai

00:10:48–00:10:51

00:10:46 Kadang-kadang saya punya lah banyak pasang nak pakai

00:10:49 Canva Figma ni

00:10:54–00:10:57

00:10:53 Saya pilih je frame ni

00:10:54 Saya pilih size F4

00:10:55 Saya buat design dalam ni terus

00:11:03–00:11:09

00:11:03 Template-template dia dah ada dah

00:11:05 Tapi ni saya jalan basic dululah

00:11:06 So kenapa apa masuk frame

00:11:07 Sebab kita nak design dalam ni lah

00:11:09–00:11:12

00:11:07 Sebab kita nak design dalam ni lah

00:11:09 Contohlah ni website kita

00:11:11 Ini kan versi

00:11:12–00:11:15

00:11:11 Ini kan versi

00:11:12 iPhone

00:11:13 Kita buat iPhone 14

00:11:18–00:11:21

00:11:15 iPhone 14

00:11:18 So, bila kita design

00:11:20 Kita akan letak tulisan kat sini

00:11:21–00:11:27

00:11:20 Kita akan letak tulisan kat sini

00:11:22 Contoh, kita letak tulisan

00:11:25 Penat

00:11:27–00:11:36

00:11:27 Risau

00:11:28 Anak

00:11:29 Speech

00:11:33 Delay

00:11:34 Tanda soal

00:11:35 So, ni kita boleh centerkan dia

00:11:36–00:11:39

00:11:35 So, ni kita boleh centerkan dia

00:11:37 Boleh tekan kat sini

00:11:38 Ni dia punya control je lah

00:11:39–00:11:48

00:11:38 Ni dia punya control je lah

00:11:39 Boleh centerkan dia

00:11:40 Lepas tu, kita boleh kecikkan

00:11:42 Ni font dia

00:11:43 Kita boleh kecikkan

00:11:44 Kita nak ambil 26

00:11:46 Lagi kecil sikit

00:11:47 Kita boleh center kan kat sini

00:11:48–00:12:00

00:11:47 Kita boleh center kan kat sini

00:11:49 Kita boleh alignment center

00:11:51 Ataupun saya lagi suka pakai

00:11:54 Pakai benda ni lah

00:11:55 Benda ni sedang sikit

00:11:57 Untuk kita nak adjust sebetul kan

00:11:58 Kita center kan dia macam ni

00:12:00–00:12:06

00:11:58 Kita center kan dia macam ni

00:12:00 Resalt nak speech delay

00:12:02 Lepas tu kita boleh letak gambar

00:12:05 Gambar katalah kita ada gambar nak masukkan

00:12:06–00:12:09

00:12:05 Gambar katalah kita ada gambar nak masukkan

00:12:07 Pergi je dekat mana-mana gambar kita

00:12:09–00:12:12

00:12:07 Pergi je dekat mana-mana gambar kita

00:12:10 Katalah ni

00:12:11 Sedat je sini

00:12:12–00:12:15

00:12:11 Sedat je sini

00:12:12 Boom

00:12:13 Terus saya kecilkan sikit

00:12:14 Sebab dia dah terkeluar

00:12:15–00:12:18

00:12:14 Sebab dia dah terkeluar

00:12:15 Dia masuk dalam frame

00:12:17 Ok

00:12:17 Macam ni

00:12:21–00:12:27

00:12:21 Lepas tu

00:12:21 Untuk kawak ruang ni

00:12:23 Saya boleh buat

00:12:25 Satu

00:12:26 Petak

00:12:26 Setelah saya buat satu petak

00:12:33–00:12:39

00:12:33 Saya right click

00:12:34 Saya bring send to back

00:12:36 Saya nak letak dia kat belakang

00:12:37 Lepas tu saya nak buat

00:12:39–00:12:42

00:12:39 Color petak ni

00:12:40 Background dia

00:12:40 Warna

00:12:48–00:12:51

00:12:47 warna biru

00:12:49 biru gelap

00:12:50 ok

00:12:50 so yang ni saya buat

00:12:54–00:12:57

00:12:50 so yang ni saya buat

00:12:54 warna hitam

00:12:55 so itulah function dia

00:12:57–00:13:00

00:12:55 so itulah function dia

00:12:57 kita boleh pilih pula

00:12:59 yang ni bold

00:13:03–00:13:12

00:13:03 tu kita boleh copy

00:13:05 tepis

00:13:06 so saya tarik jadi dua

00:13:07 so bolehlah tulis apa-apa

00:13:09 ingat bawah-bawah ni

00:13:10 so inilah cara dia

00:13:11 jadi bila kita dah design

00:13:12–00:13:15

00:13:11 jadi bila kita dah design

00:13:13 macam-macam benda

00:13:13 katalah saya tunjuk

00:13:14 Design saya dah siap

00:13:27–00:13:30

00:13:25 Satu lagi tempat yang banyak design

00:13:27 Jangan kita tengok

00:13:29 Semua design-design dah dibuat

00:13:33–00:13:36

00:13:31 Dia menggunakan

00:13:33 Canva

00:13:35 Eh

00:13:39–00:13:48

00:13:39 Contohnya macam

00:13:41 Dalam ni

00:13:41 Design-design kita buat ni

00:13:43 Memang nampak macam bodoh-bodoh

00:13:45 Macam jatuh ke jadi

00:13:46 Okey ke ni kan

00:13:48–00:13:51

00:13:46 Okey ke ni kan

00:13:48 Tapi, bila kau buat belajar lagi detail

00:13:50 Last kali, kita memang buat design-design macam ni

00:13:51–00:13:54

00:13:50 Last kali, kita memang buat design-design macam ni

00:13:53 Haa, macam ni

00:13:54–00:13:57

00:13:53 Haa, macam ni

00:13:54 Kita buat

00:13:56 Ni, tulisan, ni semua

00:14:00–00:14:03

00:13:59 Dalam satu page je

00:14:01 So, kita boleh play

00:14:02 Kita boleh play daripada atas macam ni

00:14:03–00:14:06

00:14:02 Kita boleh play daripada atas macam ni

00:14:05 Jangan sedih sudah masuk gue

00:14:06–00:14:09

00:14:05 Jangan sedih sudah masuk gue

00:14:07 Walaupun program aku tak habis, setoran datang lagi

00:14:09–00:14:12

00:14:07 Walaupun program aku tak habis, setoran datang lagi

00:14:10 Haa, ni zaman-zaman dululah

00:14:11 Sedih pula tengok

00:14:15–00:14:18

00:14:13 So, tekan kat sini, kita boleh play

00:14:15 Boleh tekan play

00:14:16 Play ni maksudnya kita nak experience

00:14:18–00:14:27

00:14:16 Play ni maksudnya kita nak experience

00:14:18 Macam mana kalau kita buka kat phone

00:14:20 Itulah kelebihan dia

00:14:21 Maksudnya kalau nak buat canva

00:14:24 Boat ni nak buka sebelah punya design

00:14:26 Sebelah punya design yang ni semua dalam satu

00:14:27–00:14:30

00:14:26 Sebelah punya design yang ni semua dalam satu

00:14:28 Cuma

00:14:28 Dia tak

00:14:30–00:14:36

00:14:28 Dia tak

00:14:31 Ini ada setting dia lah

00:14:33 Dia tak centre pula

00:14:34 Tapi ada setting dia ni kita boleh centrekan dia nanti

00:14:36–00:14:39

00:14:34 Tapi ada setting dia ni kita boleh centrekan dia nanti

00:14:37 Yang mana bila kita centrekan dia

00:14:39–00:14:48

00:14:37 Yang mana bila kita centrekan dia

00:14:39 Kita saksikan kat sini

00:14:40 Prototype

00:14:42 Scrolling vertical

00:14:44 Prototype setting

00:14:47 iPhone Pro Max

00:14:48–00:14:51

00:14:47 iPhone Pro Max

00:14:48 Ok, saya try

00:14:50 Tekan play up

00:15:00–00:15:03

00:14:51 Tak lebih pula dah

00:15:01 Eh, salah

00:15:02 Oh, saya lupa nak select dia

00:15:06–00:15:09

00:15:02 Oh, saya lupa nak select dia

00:15:07 Ok, saya play sini

00:15:08 Tak, dia ada setting dia ni

00:15:15–00:15:18

00:15:14 Nanti saya ajar

00:15:15 Ni ada setting dia, sebab saya pun

00:15:17 Lupa ni, dia select sini

00:15:18–00:15:24

00:15:17 Lupa ni, dia select sini

00:15:19 Sekejap eh

00:15:22 iPhone

00:15:27–00:15:48

00:15:26 photo type

00:15:28 so kita tak setting vertical

00:15:33 vertical

00:15:37 phone 16

00:15:41 ok try sekali

00:15:42 macam tak jadi

00:15:51–00:15:54

00:15:50 ok dia sebelum ni jadi

00:15:52 cuma mungkin setting kat sini kot

00:15:53 zoom to fit screen

00:16:00–00:16:06

00:15:58 kita boleh berubah

00:16:00 lepas setting

00:16:01 Kita kena check balik lah

00:16:03 Terus saya buat video tambahan lah

00:16:04 Kat hujung

00:16:05 Saya dah discover

00:16:05 Kenapa dia lari sikit

00:16:06–00:16:09

00:16:05 Kenapa dia lari sikit

00:16:07 Tapi point dia

00:16:08 Bila kita play ni

00:16:09–00:16:12

00:16:08 Bila kita play ni

00:16:09 Ataupun kalau kita tak nak play

00:16:10 Macam tu pun

00:16:11 Kita boleh just scroll manually

00:16:12–00:16:15

00:16:11 Kita boleh just scroll manually

00:16:12 Kita dapat rasa dah

00:16:13 Oh macam ni

00:16:14 Kita patut nampak ni

00:16:15–00:16:18

00:16:14 Kita patut nampak ni

00:16:15 Patut nampak ni

00:16:16 Patut nampak ni

00:16:17 Dia design yang continuous

00:16:18–00:16:21

00:16:17 Dia design yang continuous

00:16:18 Jadi sama kan macam-macam benda

00:16:20 Kita dah design kat sini

00:16:21–00:16:24

00:16:20 Kita dah design kat sini

00:16:21 Yang ni sana

00:16:23 Ni 7 start hiring

00:16:27–00:16:30

00:16:26 Di atas

00:16:27 Ni dulu

00:16:27 Ini sales page

00:16:29 Kita jual promo sales page dulu

00:16:30–00:16:33

00:16:29 Kita jual promo sales page dulu

00:16:31 Dan macam-macam benda lah yang kita dah buat

00:16:33–00:16:36

00:16:31 Dan macam-macam benda lah yang kita dah buat

00:16:33 Dan benda ni semua memang kita buat dalam

00:16:35 Figma. Kenapa tak buat dalam Canva? Sebab

00:16:36–00:16:39

00:16:35 Figma. Kenapa tak buat dalam Canva? Sebab

00:16:37 Susah nak, kita nak compare kiri kanan

00:16:39–00:16:42

00:16:37 Susah nak, kita nak compare kiri kanan

00:16:39 Susah kan. Contoh

00:16:41 Ada projek yang

00:16:51–00:16:54

00:16:50 Sini. Kan tengok

00:16:51 Jadi barang-barang dia macam ni

00:16:53 Saya design. Ni saya design sendiri

00:16:54–00:16:57

00:16:53 Saya design. Ni saya design sendiri

00:16:55 Letak kat sini. Lepas tu kalau kita

00:16:57–00:17:00

00:16:55 Letak kat sini. Lepas tu kalau kita

00:16:57 Play, kita tengok jadi ke tak jadi

00:16:59 So dia gila juga

00:17:03–00:17:09

00:17:02 Kadang-kadang setting dia dah terkacau

00:17:03 Haa, ni elok pula

00:17:05 Haa, sebab

00:17:06 Barat ni macam tu lah, scroll

00:17:21–00:17:24

00:17:19 Jadi, benda ni semua ni boleh, boleh kacau ni

00:17:22 Haa, ni

00:17:22 Ni takkan apa ni, buat satu-satu

00:17:24–00:17:27

00:17:22 Ni takkan apa ni, buat satu-satu

00:17:25 Semua benda ni, tak ada apa pun

00:17:27–00:17:30

00:17:25 Semua benda ni, tak ada apa pun

00:17:27 Gambar-gambar seketul-seketul

00:17:29 Haa, ni semua, sebab

00:17:36–00:17:39

00:17:35 ni semua boleh alih

00:17:36 jadi semua ni hanyalah design je

00:17:38 memang tak ada apa

00:17:51–00:17:54

00:17:49 semua benda ni hanyalah design

00:17:51 bukannya template yang kita

00:17:52 memang daripada design kotak-kotak tu

00:17:54–00:17:57

00:17:52 memang daripada design kotak-kotak tu

00:17:55 tercampak masuk sini dan siap

00:17:57–00:18:00

00:17:55 tercampak masuk sini dan siap

00:17:57 jadilah sebagai design

00:17:59 so

00:18:00–00:18:03

00:17:59 so

00:18:01 kita patah balik kat basic tadi tu

00:18:02 saya nak habiskan

00:18:03–00:18:06

00:18:02 saya nak habiskan

00:18:03 sikit je lagi

00:18:04 so bawah ni ada fungsi-fungsi dia

00:18:06–00:18:09

00:18:04 so bawah ni ada fungsi-fungsi dia

00:18:06 frame sebab dah faham dah

00:18:07 frame ni untuk apa

00:18:07 untuk buat design

00:18:08 kita nak buat design website

00:18:09–00:18:12

00:18:08 kita nak buat design website

00:18:10 contohlah last lah

00:18:11 saya tunjuk design website

00:18:12–00:18:15

00:18:11 saya tunjuk design website

00:18:12 yang kita buat

00:18:14 design website

00:18:15–00:18:18

00:18:14 design website

00:18:15 tadi abang tengok design mobile kan

00:18:16 saya tunjuk pula design

00:18:18–00:18:21

00:18:16 saya tunjuk pula design

00:18:18 kalau kita design website

00:18:19 secara horizontal

00:18:24–00:18:27

00:18:24 ni

00:18:25 website madat pun

00:18:26 dulu saya buat website madat

00:18:36–00:18:39

00:18:34 so kita design kat sini

00:18:36 properly

00:18:37 Haa ni

00:18:38 Sekejap

00:18:39–00:18:42

00:18:38 Sekejap

00:18:40 Loading pula

00:18:41 Haa ni ada gambar ni

00:18:42–00:18:45

00:18:41 Haa ni ada gambar ni

00:18:42 Loading loading

00:18:43 Sebab ni ni browser tau

00:18:45–00:18:48

00:18:43 Sebab ni ni browser tau

00:18:45 Dia berat sikit

00:18:46 Haa

00:18:47 Sebab

00:18:47 Haa ni tak apa nak cantik lah

00:18:51–00:18:54

00:18:51 So ni

00:18:51 Kalau kita tekan

00:18:52 Dan kita boleh play

00:18:53 So inilah kelebihan dia

00:18:54–00:18:57

00:18:53 So inilah kelebihan dia

00:18:54 Sebab tu professional designer

00:18:56 Pakai benda ni

00:19:00–00:19:03

00:18:59 Biasa-biasa je

00:19:00 Haa macam ni

00:19:01 So kita design dia

00:19:03–00:19:06

00:19:01 So kita design dia

00:19:03 Macam mana dia flow dia kan

00:19:04 Jadi kalau awak nak

00:19:06–00:19:09

00:19:04 Jadi kalau awak nak

00:19:06 Belajar design ni

00:19:07 Memang wajib kena pakai firma

00:19:09–00:19:12

00:19:09 Dan

00:19:09 Bermula daripada basic

00:19:10 Yang saya cakap tadi tu

00:19:12–00:19:15

00:19:12 Okay

00:19:12 So kita sama balik

00:19:13 Sebab tu ada frame

00:19:14 Kita boleh pilih

00:19:15–00:19:18

00:19:14 Kita boleh pilih

00:19:15 Lepas tu ni adalah

00:19:16 Benda-benda star-star apa semua ni

00:19:18–00:19:24

00:19:16 Benda-benda star-star apa semua ni

00:19:18 Awak pilih lah sendiri

00:19:19 Gambar ni tak payah pakai pun

00:19:20 Placeholder ni

00:19:21 Awak drag and drop je

00:19:22 Kalau awak ada gambar kan

00:19:23 Sebab apa gambar pun

00:19:24–00:19:27

00:19:23 Sebab apa gambar pun

00:19:24 Awak tarik je

00:19:25 Macam ni ha

00:19:26 Tarik je gambar

00:19:27–00:19:30

00:19:26 Tarik je gambar

00:19:27 Dah masuk

00:19:28 Settle

00:19:28 Okay

00:19:29 Lepas tu next

00:19:30–00:19:36

00:19:29 Lepas tu next

00:19:30 Yang ni pula adalah pen

00:19:31 Pen ni kalau awak just nak macam

00:19:33 Not draw

00:19:35 Draw macam ni

00:19:36–00:19:42

00:19:35 Draw macam ni

00:19:36 ni awak boleh explore sendirilah

00:19:38 kita tekan pangkah

00:19:41 jadilah fill tu kita boleh masukkan

00:19:42–00:19:45

00:19:41 jadilah fill tu kita boleh masukkan

00:19:42 dia punya stroke ni

00:19:44 luaran dia, fill ni kita boleh tekan

00:19:45–00:19:48

00:19:44 luaran dia, fill ni kita boleh tekan

00:19:46 plus, kita boleh masukkan colour

00:19:48–00:19:51

00:19:46 plus, kita boleh masukkan colour

00:19:48 macam ni contohnya

00:19:50 next pula kita ada apa, kita ada tulisan

00:19:51–00:19:54

00:19:50 next pula kita ada apa, kita ada tulisan

00:19:52 tulisan kita boleh tulis

00:19:54–00:19:57

00:19:55 tulisan, ataupun kita boleh

00:19:56 tekan tulisan, kita boleh tarik macam ni

00:19:57–00:20:18

00:19:56 tekan tulisan, kita boleh tarik macam ni

00:19:58 jadi kotak besar pula, tu pun satu benda

00:20:00 juga, lepas tu ni tak pakai

00:20:02 ni pun saya tak pakai, ni pun saya tak pakai, ni pun saya tak pakai

00:20:04 Ni jarang lah draw ni pun

00:20:06 Jarang lah saya pakai

00:20:09 Untuk draw kan

00:20:12 Jarang lah

00:20:12 Saya tak pakai lah biasanya draw ni

00:20:14 Tapi kalau nak pakai boleh je

00:20:16 Tak ada masalah pun

00:20:18–00:20:36

00:20:18 Saya pakai mouse

00:20:20 Untuk draw

00:20:21 So ni kalau nak draw pun boleh draw sini

00:20:23 Tapi biasanya lah kalau atas saya

00:20:25 Yang kita memang confirm akan pakai

00:20:27 Adalah yang ni

00:20:33 Saya tekan balik yang ni

00:20:34 Sebab ni untuk rukis

00:20:35 Yang ni untuk

00:20:36–00:20:39

00:20:35 Yang ni untuk

00:20:36 Mata balik dekat yang tadi

00:20:37 Kita memang confirm

00:20:39–00:20:42

00:20:37 Kita memang confirm

00:20:39 Akan pakai

00:20:39 Yang pangan ni

00:20:40 Lepas tu kita confirm

00:20:41 Akan pakai frame ni

00:20:42–00:20:45

00:20:41 Akan pakai frame ni

00:20:43 Lepas tu kita confirm

00:20:44 Akan pakai kotak-kotak ni

00:20:45–00:20:48

00:20:44 Akan pakai kotak-kotak ni

00:20:45 Lepas tu kita confirm

00:20:47 Akan pakai pen

00:20:48–00:21:00

00:20:47 Akan pakai pen

00:20:48 Pen banyak kita pakai

00:20:49 Pen

00:20:49 Lepas tu dengan text

00:20:50 Ok

00:20:51 Belah kanan ni pula adalah

00:20:56 Belah kanan ni pula adalah

00:20:57 Dia punya

00:20:58 Setting je lah

00:20:59 Want to actualize

00:21:00–00:21:03

00:20:59 Want to actualize

00:21:00 Ni semua belah kanan ni

00:21:01 Setting dia

00:21:02 Ok

00:21:02 Belah kiri ni pula

00:21:03–00:21:06

00:21:02 Belah kiri ni pula

00:21:03 Adalah layer dia

00:21:04 Contoh kalau saya tepek ni

00:21:06–00:21:09

00:21:04 Contoh kalau saya tepek ni

00:21:07 Perasan tak

00:21:07 Line ni di atas

00:21:08 So

00:21:09–00:21:24

00:21:08 So

00:21:09 Mana benda ni

00:21:10 Benda ni dekat sini

00:21:11 Yang ni dekat atas

00:21:13 So kalau saya alih ni

00:21:14 Naikkan ke atas

00:21:16 Tertimbus ada

00:21:17 So ini adalah layer sahaja

00:21:18 Lepas tu

00:21:19 Ini page 1

00:21:20 Awak boleh buat satu lagi page

00:21:22 Plus

00:21:22 Boleh buat page 2

00:21:24–00:21:30

00:21:24 So ni line-line page ni

00:21:25 Sebab tu dia ada banyak page

00:21:27 So kita boleh buat page 1

00:21:28 Page 2

00:21:29 Page 3

00:21:29 Page 4

00:21:33–00:21:36

00:21:31 Boleh buat banyak-banyak page kat sini

00:21:33 Dan dia auto save

00:21:34 Awak tak perlu risau

00:21:35 Ok jadi

00:21:36–00:21:39

00:21:35 Ok jadi

00:21:36 Kalau awak nak belajar lagi detail

00:21:37 Saya memang tak dapat nak cover advance lah

00:21:39–00:21:42

00:21:37 Saya memang tak dapat nak cover advance lah

00:21:40 Ini just memang purely basic sahaja

00:21:41 Sebab kita nak pergi pada video yang seterusnya

00:21:42–00:21:45

00:21:41 Sebab kita nak pergi pada video yang seterusnya

00:21:43 Awak kena tengok video dekat YouTube

00:21:45–00:21:48

00:21:43 Awak kena tengok video dekat YouTube

00:21:46 Okay pergi dekat YouTube

00:21:47 Type je Figma tutorial

00:21:51–00:21:54

00:21:48 Dan awak kena tengok simple video

00:21:52 Macam ni

00:21:52 Ni bagus juga ni

00:21:54–00:21:57

00:21:52 Ni bagus juga ni

00:21:54 Flux ni

00:21:54 13 minit crash course

00:21:56 Tapi Yahudi pula amat ni

00:22:03–00:22:06

00:22:02 Contoh macam ni

00:22:03 Oh ni sejam pula dah

00:22:04 Sejam lah

00:22:05 Tak nak belajar boleh ha ni

00:22:06–00:22:09

00:22:05 Tak nak belajar boleh ha ni

00:22:06 Bagus ha ni

00:22:06 Sejam belajar

00:22:07 Fikmah, apa salah ni lah hidup

00:22:09–00:22:12

00:22:07 Fikmah, apa salah ni lah hidup

00:22:09 Nak pakai 10 tahun, ajar je lah

00:22:11 Fikmah sejam, apa salah ni

00:22:15–00:22:18

00:22:13 Tu tengok benda-benda lain

00:22:15 Ataupun awak nak buat, yang ni

00:22:17 24 minit, so macam-macam

00:22:30–00:22:36

00:22:21 So dia explain lebih detail

00:22:30 Jadi saya nak awak bermula je dengan

00:22:32 Saya, tapi awak kena habiskan dengan video-video

00:22:34 Dekat YouTube, saya memang takkan sempat

00:22:35 Untuk buat apa-apa video-video tambahan detail untuk

00:22:36–00:22:42

00:22:35 Untuk buat apa-apa video-video tambahan detail untuk

00:22:37 Fikmah ni, so tolong discover

00:22:40 Sendiri, ok

00:22:41 Jadi kalau kita patah balik, apa yang kita nak capai

00:22:42–00:22:45

00:22:41 Jadi kalau kita patah balik, apa yang kita nak capai

00:22:44 sebenarnya saya nak awak install je Figma ni

00:22:45–00:22:51

00:22:44 sebenarnya saya nak awak install je Figma ni

00:22:46 free software dan boleh gunakan dia

00:22:48 pada bila-bila masa awak berada

00:22:49 dan next dalam video yang

00:22:51–00:22:57

00:22:49 dan next dalam video yang

00:22:52 selanjutnya, kita nak pergi kepada asas

00:22:53 web design, saya nak tunjukkan awak

00:22:55 daripada skeleton

00:22:56 menjadi first draft, low fidelity

00:22:57–00:23:03