Install Figma Free Software
Source: https://coachadib.com/module/6ac033f2c9df5ee2bec8f922
Automatic full-length draft. Uncertain wording and figures require review.

[00:00:00.000 – 00:00:03.600] Video seterusnya saya nak share tentang rahsia desain yang convert.

[00:00:03.800 – 00:00:08.200] Dan dalam ni saya nak tunjukkan satu software yang jarang orang share.

[00:00:08.540 – 00:00:10.160] Nama dia adalah Figma.

[00:00:10.480 – 00:00:14.620] Macam mana cara nak install Figma Free Software.

[00:00:15.100 – 00:00:17.240] Tanpa buang masa, jom kita mulakan.

[00:00:17.460 – 00:00:20.240] Ok, step pertama, tolong buka dekat Google macam ni.

[00:00:20.420 – 00:00:22.360] Type je dekat dalam ni, F-I-G-M-A.

[00:00:22.780 – 00:00:24.240] Figma, tekan Enter.

[00:00:25.700 – 00:00:27.800] Lepas tu anda akan nampak belah atas sekali.

[00:00:27.800 – 00:00:31.240] Figma The Collaboration Interface Design Tools

[00:00:31.240 – 00:00:32.500] Tekan yang ni

[00:00:33.400 – 00:00:35.520] Ok lepas tu kita akan masuk ke dalam Figma

[00:00:35.520 – 00:00:37.000] Tapi sebab saya dah terlog out

[00:00:37.000 – 00:00:37.740] Terlog in

[00:00:37.740 – 00:00:38.740] Saya log out balik lah eh

[00:00:39.240 – 00:00:39.720] Sekejap

[00:00:39.720 – 00:00:40.840] Saya log keluar balik

[00:00:40.840 – 00:00:41.820] Ok saya tekan sekali lagi

[00:00:41.820 – 00:00:42.700] Haa sorry sorry

[00:00:43.460 – 00:00:44.800] Sorry sorry sorry

[00:00:44.800 – 00:00:46.820] So kalau kita tekan balik Figma

[00:00:47.800 – 00:00:48.680] Tekan enter

[00:00:49.200 – 00:00:49.680] Masuk

[00:00:50.700 – 00:00:51.680] Masuk dekat sini

[00:00:51.680 – 00:00:53.120] Haa inilah muka depan dia

[00:00:53.120 – 00:00:54.680] Dan Figma ni guys dia percuma

[00:00:55.320 – 00:00:57.160] Sesuai lah untuk kita yang nak main-main

[00:00:57.160 – 00:00:58.280] Desain-desain free ni

[00:00:58.280 – 00:01:00.260] Tapi dia ada versi yang berbayar

[00:01:00.260 – 00:01:01.460] Kalau nak bayar dia ni

[00:01:01.460 – 00:01:02.020] Mahal lah

[00:01:02.020 – 00:01:02.940] Saya pun tak bayar

[00:01:02.940 – 00:01:04.480] Saya pun pakai yang free je

[00:01:04.480 – 00:01:05.780] So, pakai je yang free

[00:01:05.780 – 00:01:06.140] Serius

[00:01:06.140 – 00:01:07.680] Free ni pun dah sangat mencukupi

[00:01:07.680 – 00:01:08.980] Setakat saya pakai

[00:01:08.980 – 00:01:10.340] Setahun baru saya kena bayar

[00:01:10.340 – 00:01:11.200] Sebab

[00:01:11.200 – 00:01:12.720] Features free dia pun dah ok lah

[00:01:12.720 – 00:01:13.700] Dan apa itu Figma

[00:01:14.260 – 00:01:14.900] Figma ni

[00:01:14.900 – 00:01:15.760] Tujuan dia adalah

[00:01:15.760 – 00:01:16.800] Untuk buat design

[00:01:16.800 – 00:01:18.220] Design website

[00:01:18.220 – 00:01:18.920] Macam ni kan

[00:01:18.920 – 00:01:19.700] Kita nak buat

[00:01:21.580 – 00:01:22.480] To prom lah

[00:01:22.480 – 00:01:23.080] Ni design

[00:01:23.080 – 00:01:24.400] Kita nak design website

[00:01:24.400 – 00:01:25.280] Kita nak draw

[00:01:25.760 – 00:01:26.760] Dia macam-macam

[00:01:26.760 – 00:01:29.020] build, publish, nak buat mockup

[00:01:29.960 – 00:01:31.440] jadi macam-macam lah

[00:01:31.440 – 00:01:33.080] yang kita boleh buat dekat dalam Figma ni

[00:01:33.080 – 00:01:35.080] tapi especially paling penting dia design

[00:01:35.080 – 00:01:37.080] dan design dia ni bukan macam design

[00:01:37.080 – 00:01:38.780] Canva apa semua, dia design

[00:01:39.440 – 00:01:40.380] untuk website

[00:01:40.380 – 00:01:43.200] dia adalah pembunuh Adobe XD

[00:01:43.200 – 00:01:44.900] sebab Adobe pun banyak

[00:01:44.900 – 00:01:46.820] seraga sekarang ni sebab Figma ni dah macam-macam

[00:01:46.820 – 00:01:48.800] template Figma dia, dia online

[00:01:48.800 – 00:01:50.880] website bila tu, jadi dia tak payah nak install

[00:01:50.880 – 00:01:52.200] dia hidup dalam browser

[00:01:52.200 – 00:01:54.900] macam kita buka YouTube tu secara online macam tu

[00:01:54.900 – 00:01:55.620] macam tu lah dia

[00:01:55.620 – 00:01:57.540] so banyak lah fungsi-fungsi

[00:01:57.540 – 00:01:58.040] Figma ni

[00:01:58.040 – 00:01:59.400] jadi jom kita

[00:01:59.400 – 00:02:00.280] explore sama-sama

[00:02:00.280 – 00:02:00.620] Figma

[00:02:00.620 – 00:02:01.700] kalau anda yang zero

[00:02:01.700 – 00:02:02.560] boleh follow

[00:02:02.560 – 00:02:03.700] dan ni nampak lah

[00:02:03.700 – 00:02:04.600] boleh design website

[00:02:04.600 – 00:02:05.480] social media

[00:02:05.480 – 00:02:06.040] mobile app

[00:02:06.040 – 00:02:06.400] presentation

[00:02:06.400 – 00:02:06.740] invitation

[00:02:06.740 – 00:02:08.280] tapi mostly orang design

[00:02:08.280 – 00:02:08.940] untuk website lah

[00:02:08.940 – 00:02:09.660] Figma ni

[00:02:10.460 – 00:02:11.980] jadi jom tekan button

[00:02:11.980 – 00:02:13.260] get started for free

[00:02:13.260 – 00:02:14.120] 3, 2, 1

[00:02:14.120 – 00:02:14.740] tekan

[00:02:14.740 – 00:02:15.900] get started for free

[00:02:15.900 – 00:02:17.040] tekan sahaja

[00:02:17.040 – 00:02:18.460] continue with google

[00:02:18.460 – 00:02:19.460] dan saya akan gunakan

[00:02:19.460 – 00:02:20.420] satu email saya

[00:02:20.420 – 00:02:21.200] yang fresh

[00:02:21.200 – 00:02:22.040] from oven

[00:02:22.040 – 00:02:23.620] saya guna email ni lah

[00:02:23.620 – 00:02:24.060] contohnya

[00:02:24.060 – 00:02:25.000] Email yang saya tak pakai

[00:02:25.000 – 00:02:27.800] So tekan sahaja button continue

[00:02:27.800 – 00:02:29.500] Pilih lah mana-mana email

[00:02:29.500 – 00:02:31.580] Tekan, patut tekan dia proceed continue

[00:02:31.580 – 00:02:33.460] Dan automatically dia akan

[00:02:33.460 – 00:02:34.840] Buat pendaftaran

[00:02:34.840 – 00:02:35.740] Tapi kita tengok jap

[00:02:35.740 – 00:02:36.700] Apa yang dia tanya ni

[00:02:36.700 – 00:02:39.160] Oh terus masuk ke dalam guys

[00:02:39.160 – 00:02:41.760] Jadi kita namakan

[00:02:41.760 – 00:02:43.080] Nama saya Adib

[00:02:43.860 – 00:02:45.300] Tekan continue

[00:02:45.300 – 00:02:47.680] Yang ni bantai je lah apa-apa

[00:02:47.680 – 00:02:48.960] Kerja

[00:02:48.960 – 00:02:49.900] Okay continue

[00:02:49.900 – 00:02:51.380] Kenapa ni

[00:02:53.060 – 00:02:55.360] dia lebih bagus daripada Canva

[00:02:55.360 – 00:02:56.720] sebab Canva

[00:02:56.720 – 00:02:57.560] Canva bagus

[00:02:57.560 – 00:02:58.180] banyak template

[00:02:58.180 – 00:02:59.320] tapi issue dengan Canva ni

[00:02:59.320 – 00:03:01.080] dia frame dia tu

[00:03:01.080 – 00:03:02.100] kalau dah petak-petak je

[00:03:02.100 – 00:03:04.100] dia susah nak duplicate design

[00:03:04.100 – 00:03:05.460] ada lah benda-benda yang saya tak suka

[00:03:05.460 – 00:03:05.940] pasal Canva

[00:03:05.940 – 00:03:07.560] Canva tak boleh nak buat design

[00:03:07.560 – 00:03:08.600] yang continuous untuk website

[00:03:08.600 – 00:03:10.340] so dia macam Canva

[00:03:10.340 – 00:03:10.880] betul

[00:03:10.880 – 00:03:12.160] tapi dia lebih advance sikit

[00:03:12.160 – 00:03:12.700] daripada Canva

[00:03:12.700 – 00:03:14.200] sebab tu lah kalau awak pakai yang ni

[00:03:14.200 – 00:03:15.740] awak rasa macam advance je

[00:03:15.740 – 00:03:17.480] Canva kan simple-simple je kan

[00:03:18.180 – 00:03:19.180] so jom

[00:03:19.180 – 00:03:19.680] kita tengok

[00:03:19.680 – 00:03:20.500] kita explore sama-sama

[00:03:21.280 – 00:03:22.320] Pantai je lah apa-apa eh

[00:03:22.320 – 00:03:23.300] Jawab je lah ambil ni

[00:03:24.060 – 00:03:25.040] Jawab je lah apa-apa

[00:03:25.040 – 00:03:25.880] Boleh skip ke?

[00:03:26.040 – 00:03:26.300] Tak boleh

[00:03:26.300 – 00:03:27.000] Oh boleh skip

[00:03:27.840 – 00:03:28.780] Tekan je lah skip

[00:03:29.840 – 00:03:30.880] You speak on before

[00:03:30.880 – 00:03:32.440] A few times

[00:03:32.440 – 00:03:32.700] Okay

[00:03:32.700 – 00:03:33.400] Layan je lah

[00:03:34.140 – 00:03:34.860] Yang ni

[00:03:35.700 – 00:03:37.460] Kita pakai yang free

[00:03:37.460 – 00:03:38.080] Ini ya

[00:03:38.080 – 00:03:38.780] Tekan starter

[00:03:38.780 – 00:03:39.900] Sebab dia adalah free

[00:03:39.900 – 00:03:40.800] Limited

[00:03:40.800 – 00:03:41.760] 3 file

[00:03:41.760 – 00:03:42.700] Okay sangat lah tu

[00:03:42.700 – 00:03:44.500] Kita pakai satu file pun dah cukup sebenarnya

[00:03:44.500 – 00:03:45.840] Tekan button

[00:03:45.840 – 00:03:46.780] Continue

[00:03:48.580 – 00:03:49.320] Lepas tu

[00:03:49.320 – 00:03:50.400] Ni skip je lah

[00:03:50.400 – 00:03:53.260] ok, kita dah selamat

[00:03:53.260 – 00:03:55.100] masuk ke dalam Figma guys

[00:03:55.100 – 00:03:56.760] jadi, berjaya tak follow saya

[00:03:56.760 – 00:03:59.320] kalau belum berjaya, masuk balik

[00:03:59.320 – 00:04:00.480] daripada mula

[00:04:00.480 – 00:04:02.560] jadi, apa yang ada kat sini, kita ada

[00:04:02.560 – 00:04:05.000] Fik Jam Basic, Figma Basic

[00:04:05.700 – 00:04:07.020] Adib Afifi Hassan

[00:04:07.020 – 00:04:08.640] Team Library, ok, saya nak

[00:04:08.640 – 00:04:10.740] awak tekan dekat Figma Basic

[00:04:10.740 – 00:04:12.000] jom kita masuk dekat bahagian

[00:04:12.000 – 00:04:14.140] Figma Basic, 3, 2, 1, let's go

[00:04:14.140 – 00:04:16.140] bila awak tekan, dia double click

[00:04:16.140 – 00:04:17.120] dekat Figma Basic

[00:04:18.120 – 00:04:19.500] kita akan masuk ke dalam

[00:04:20.260 – 00:04:21.780] Figma punya design

[00:04:21.780 – 00:04:23.380] So, bagus lah kita nak belajar kat sini

[00:04:23.380 – 00:04:25.120] Kita boleh scroll eh, boleh zoom

[00:04:25.600 – 00:04:27.040] Untuk zoom ni, awak boleh

[00:04:27.740 – 00:04:29.220] Macam saya, sebab saya pakai

[00:04:29.220 – 00:04:31.680] Macbook, saya boleh macam tu je lah

[00:04:31.680 – 00:04:33.620] Macam ni lah, tapi kalau awak pakai

[00:04:34.060 – 00:04:35.220] Window, awak boleh tekan

[00:04:35.220 – 00:04:36.080] Control plus

[00:04:37.300 – 00:04:38.820] Control minus, jadi zoom out

[00:04:38.820 – 00:04:40.520] Control plus, jadi zoom in

[00:04:40.520 – 00:04:42.660] So, macam ni saya boleh zoom in macam ni lah

[00:04:42.660 – 00:04:45.360] Jadi, Figma ni, dia adalah software

[00:04:45.360 – 00:04:47.080] Untuk kita design

[00:04:47.080 – 00:04:48.980] Macam ni, dia boleh design-design

[00:04:50.340 – 00:04:50.820] dan

[00:04:50.820 – 00:04:53.160] Figma ni bagus lah untuk kita nak

[00:04:53.160 – 00:04:55.100] tukar apa-apa dan dia ada

[00:04:55.100 – 00:04:57.300] kotak-kotak macam ni nampak dia boleh design website

[00:04:58.100 – 00:04:58.860] macam ni lah

[00:04:58.860 – 00:05:00.340] practice design kita boleh tengok

[00:05:00.340 – 00:05:02.480] ni semua ni di design bagi Figma ni

[00:05:02.480 – 00:05:03.360] saya boleh tukar ni

[00:05:05.500 – 00:05:05.980] saya

[00:05:05.980 – 00:05:07.420] eh hilang tak lah

[00:05:08.860 – 00:05:09.820] we are

[00:05:13.650 – 00:05:14.610] anak ibu

[00:05:16.670 – 00:05:17.790] ni boleh tukar ni

[00:05:17.790 – 00:05:18.830] benda ni semua boleh tukar

[00:05:19.950 – 00:05:21.590] jadi dia macam konsep design lah

[00:05:21.590 – 00:05:23.350] Kita nak tukar apa-apa kat sini pun boleh

[00:05:23.350 – 00:05:25.970] Dan macam gambar ni ke nak buat keluar ke

[00:05:25.970 – 00:05:27.610] Jadi kalau Canva

[00:05:27.610 – 00:05:29.010] Dia tak boleh nak buat design continuous

[00:05:29.010 – 00:05:30.990] Katalah kita nak tambah panjangan dia

[00:05:30.990 – 00:05:32.030] Kita boleh select dekat sini

[00:05:32.030 – 00:05:33.850] Kita boleh panjangkan lagi

[00:05:35.330 – 00:05:36.830] Oh ni bukan frame

[00:05:37.410 – 00:05:38.550] Sekejap ni bukan frame

[00:05:39.530 – 00:05:40.010] Sekejap

[00:05:43.340 – 00:05:44.960] Saya boleh panjangkan dia

[00:05:44.960 – 00:05:46.480] So saya boleh design lagi

[00:05:46.480 – 00:05:48.520] Masalah dengan Canva

[00:05:48.520 – 00:05:50.820] Dia tak boleh tiba-tiba kita nak panjangkan website kita

[00:05:50.820 – 00:05:51.640] Lepas tu nak scroll

[00:05:52.500 – 00:05:53.320] Macam ni kan

[00:05:53.320 – 00:05:55.440] So kalau katalah saya nak tengok view dia yang betul

[00:05:55.440 – 00:05:56.760] Saya boleh tekan select ni

[00:05:56.760 – 00:05:58.480] Saya boleh tekan button play kat sini

[00:05:58.480 – 00:05:59.360] Button play ni

[00:05:59.360 – 00:06:01.860] Dia akan buat macam website tu real

[00:06:02.400 – 00:06:03.680] Jadi kita dapat view

[00:06:03.680 – 00:06:05.020] Macam view telefon boleh

[00:06:05.020 – 00:06:06.380] Kita nak view laptop boleh

[00:06:06.380 – 00:06:07.040] Desktop boleh

[00:06:07.040 – 00:06:08.940] Jadi kita nampak lah macam ni

[00:06:08.940 – 00:06:09.460] Nampak

[00:06:09.460 – 00:06:10.300] Saya dapat scroll

[00:06:11.140 – 00:06:13.040] Dapatlah perasaan ibarat macam kita

[00:06:13.040 – 00:06:14.220] Tengah buka website sebenar

[00:06:14.900 – 00:06:15.940] Contoh macam ni

[00:06:15.940 – 00:06:17.400] Ni sebab saya sedang halis tadi tu

[00:06:17.400 – 00:06:18.940] Terasa letak balik

[00:06:18.940 – 00:06:19.840] Cun sikit

[00:06:21.680 – 00:06:22.880] ok, so saya tekan

[00:06:22.880 – 00:06:24.740] sini, saya tekan button play, ni saya tunjuk just

[00:06:24.740 – 00:06:26.860] features-features yang ada je, jadi so awak tahu

[00:06:26.860 – 00:06:28.740] oh ni ke function dia, yes, dia boleh

[00:06:28.740 – 00:06:30.580] buat mockup macam ni

[00:06:30.580 – 00:06:32.700] kita nak experience macam mana eh, kalau kita buka

[00:06:32.700 – 00:06:33.040] website

[00:06:34.840 – 00:06:36.820] boleh, kalau kita nak tekan dia, kita boleh link

[00:06:36.820 – 00:06:38.960] kan ke page lain, nak tekan

[00:06:38.960 – 00:06:40.880] boleh, nak ni boleh, nak buat dia bergerak

[00:06:40.880 – 00:06:42.760] boleh, jadi dia mockup lah, dia

[00:06:42.760 – 00:06:44.820] bukanlah buat ni, inilah website kita dah siap tak

[00:06:44.820 – 00:06:46.500] ini just macam satu mockup je

[00:06:46.500 – 00:06:48.680] sebab tu lah, dalam panduan ni saya

[00:06:48.680 – 00:06:50.520] ajar awak bukan design biasa-biasa. Saya nak ajar awak

[00:06:50.520 – 00:06:52.620] design professional. Macam mana kami buat

[00:06:52.620 – 00:06:54.120] design wala-wala tu. Ha, kat sini lah.

[00:06:54.740 – 00:06:56.400] Okay. So, kita dah cover basic

[00:06:56.400 – 00:06:58.500] fitma. Jadi, saya explain lah

[00:06:58.500 – 00:07:00.660] tentang features-features yang ada kat sini.

[00:07:01.240 – 00:07:02.520] Tapi untuk explain ni, saya patah

[00:07:02.520 – 00:07:04.500] balik keluar eh. So, awak tekan balik dekat huruf

[00:07:04.500 – 00:07:06.660] F ni. Kita tekan back to file.

[00:07:06.760 – 00:07:08.340] Kita nak keluar balik ke depan. Okay.

[00:07:08.720 – 00:07:10.400] Jadi, sekarang ni, saya nak awak

[00:07:10.400 – 00:07:12.220] buat satu file pertama.

[00:07:12.940 – 00:07:14.340] Okay. Tekan dekat design.

[00:07:14.580 – 00:07:16.520] Nampak design ni. Okay. Kita tekan

[00:07:16.520 – 00:07:17.140] dekat design.

[00:07:18.820 – 00:07:20.160] So kita telah pun

[00:07:20.980 – 00:07:21.520] Melahirkan

[00:07:21.520 – 00:07:23.100] File kita yang pertama

[00:07:23.100 – 00:07:24.980] Jadi file ni dia kosong lah

[00:07:24.980 – 00:07:26.020] Dia tak ada apa-apa

[00:07:26.660 – 00:07:27.200] Dan

[00:07:27.800 – 00:07:28.760] Dalam file ni

[00:07:28.760 – 00:07:30.460] Kita ada beberapa benda

[00:07:30.460 – 00:07:31.120] Kita tengok sini

[00:07:31.120 – 00:07:32.760] Nak buat website ke

[00:07:32.760 – 00:07:33.780] Moba apps ke desktop

[00:07:33.780 – 00:07:35.600] Saya tekan pangkah je lah

[00:07:35.600 – 00:07:36.240] Tekan pangkah je

[00:07:36.240 – 00:07:37.940] Kita biar je dia kosong

[00:07:37.940 – 00:07:38.800] Okay

[00:07:38.800 – 00:07:39.480] So

[00:07:41.140 – 00:07:42.860] Kita nak namakan dulu file kita ni

[00:07:42.860 – 00:07:43.660] Contohnya

[00:07:43.660 – 00:07:44.620] Sales page

[00:07:45.240 – 00:07:46.080] Kosong satu

[00:07:46.080 – 00:07:46.800] Okay

[00:07:46.800 – 00:07:47.560] Saya nak explain

[00:07:47.560 – 00:07:50.020] Basic features yang ada daripada kiri ke kanan

[00:07:50.900 – 00:07:52.080] Kita start dengan bawah sekali

[00:07:52.080 – 00:07:53.820] Okay, daripada kiri ni

[00:07:54.280 – 00:07:56.220] Ini adalah kalau kita nak gerakkan dia

[00:07:56.220 – 00:07:58.440] Kalau hand ni, dia boleh bergerak macam ni

[00:07:58.440 – 00:08:00.200] Sekejap tak nampak eh, saya buat kotak dulu lah

[00:08:00.200 – 00:08:01.960] Okay, ni kena buat kotak

[00:08:02.560 – 00:08:03.700] Kita boleh buat kotak

[00:08:03.700 – 00:08:05.600] Kalau kita tekan ni, kita boleh buat macam-macam lah

[00:08:05.600 – 00:08:06.780] Arrow line lah lah

[00:08:06.780 – 00:08:07.980] Benda-benda basic

[00:08:08.760 – 00:08:11.020] Yang ada arrow ni, tapi kita kena zoom pun nampak

[00:08:11.020 – 00:08:12.300] Ada arrow semua kat situ

[00:08:14.020 – 00:08:15.140] Haa, sama je lah

[00:08:15.140 – 00:08:15.980] Benda-benda basic

[00:08:15.980 – 00:08:18.400] Tapi dengan basic ni pun dah boleh buat website lawa

[00:08:18.400 – 00:08:19.220] Yang kelakar tu

[00:08:19.220 – 00:08:20.260] Tak banyak sangat benda

[00:08:20.260 – 00:08:23.640] So kita boleh gerak-gerakkan dia

[00:08:23.640 – 00:08:25.360] Contoh kita ambil tangan ni kan

[00:08:25.360 – 00:08:26.140] Ambil tangan

[00:08:26.140 – 00:08:28.260] Kita boleh macam ni

[00:08:28.260 – 00:08:29.720] Macam grab dia

[00:08:29.720 – 00:08:32.880] Tapi kalau kita nak tarik ni tak boleh lah

[00:08:32.880 – 00:08:35.540] Kita kena tukar balik kepada move

[00:08:36.240 – 00:08:36.900] Macam ni

[00:08:36.900 – 00:08:38.180] Macam ni kalau kita nak

[00:08:38.180 – 00:08:39.440] Katalah kita ada tulisan

[00:08:39.440 – 00:08:40.900] Tulisan kita boleh tekan kat sini

[00:08:41.560 – 00:08:42.100] Tulisan

[00:08:43.300 – 00:08:45.220] Saya suka makan

[00:08:46.200 – 00:08:48.440] Macam mana kalau saya nak besarkan dia

[00:08:48.440 – 00:08:50.400] Kalau saya tarik macam ni

[00:08:50.400 – 00:08:54.440] Dia tak membesar je dia kotak

[00:08:54.440 – 00:08:56.440] So macam mana kita nak membesarkan dia

[00:08:56.440 – 00:08:58.020] Adalah saya boleh undo balik

[00:08:58.020 – 00:08:58.980] Tekan control Z

[00:08:58.980 – 00:09:00.200] Ataupun right click

[00:09:00.900 – 00:09:02.340] Boleh undo kat mana

[00:09:02.340 – 00:09:05.220] Tapi biasanya

[00:09:05.220 – 00:09:07.740] Command Z ataupun control Z

[00:09:07.740 – 00:09:08.500] Ni saya undo balik

[00:09:10.300 – 00:09:11.340] Cara dia

[00:09:11.340 – 00:09:12.120] Perasaan tak kat sini

[00:09:12.120 – 00:09:14.180] Ini untuk gerakkan benda

[00:09:15.100 – 00:09:17.320] Yang ni untuk kita gerak macam ni

[00:09:17.320 – 00:09:19.280] Yang ni pula untuk kita

[00:09:19.280 – 00:09:21.340] Scale kan, contoh macam ni, saya tekan dia

[00:09:21.340 – 00:09:22.720] Saya tekan dia ni

[00:09:22.720 – 00:09:24.540] Saya tarik je

[00:09:25.380 – 00:09:27.340] So katalah saya susun serentak

[00:09:27.340 – 00:09:28.900] Saya nak semua scale serentak

[00:09:28.900 – 00:09:31.520] Dan semua ni akan scale serentak

[00:09:31.520 – 00:09:32.460] Saya select semua ni

[00:09:34.700 – 00:09:35.960] Saya tarik je

[00:09:35.960 – 00:09:36.440] Nampak

[00:09:37.140 – 00:09:38.780] Itulah function bendalah ni

[00:09:38.780 – 00:09:40.380] Dia untuk resize, untuk scale

[00:09:40.380 – 00:09:42.700] So kita dapat resize semua sekali

[00:09:42.700 – 00:09:45.520] Katalah kita nak semua ni resize dengan konsisten

[00:09:46.040 – 00:09:47.100] Kita dah pilih tu

[00:09:47.680 – 00:09:48.260] Tarik je

[00:09:48.260 – 00:09:49.680] Semua akan resize

[00:09:49.680 – 00:09:52.080] Jadi itulah function bendalah ni

[00:09:52.080 – 00:09:53.680] Dia sangat function bila kita ada banyak design lah

[00:09:53.680 – 00:09:56.000] Tapi sebelum kita buat design apa-apa

[00:09:56.000 – 00:09:57.760] Yang ni paling penting bendalah ni

[00:09:57.760 – 00:09:59.020] Ini nama dia frame

[00:09:59.020 – 00:10:00.940] Dalam ni ada banyak lah section slice

[00:10:00.940 – 00:10:02.380] Tapi yang kita memang pakai frame

[00:10:02.380 – 00:10:04.100] Saya nak buat tekan dekat frame

[00:10:04.100 – 00:10:05.260] Kita nak buat frame pertama

[00:10:06.220 – 00:10:07.220] Tekan dekat frame

[00:10:07.220 – 00:10:08.400] Cuba tarik macam ni

[00:10:08.400 – 00:10:12.840] Ini frame

[00:10:12.840 – 00:10:15.320] Frame ni, kita boleh tarik saiz besar, saiz kecil

[00:10:15.320 – 00:10:16.880] Dan bila kita buat frame

[00:10:16.880 – 00:10:18.640] Kita sebenarnya boleh tekan dekat frame

[00:10:18.640 – 00:10:20.640] Dan pilih saiz dia

[00:10:20.640 – 00:10:22.520] Dia ada saiz iPhone 16

[00:10:23.980 – 00:10:25.060] Dia ada banyak saiz lah

[00:10:25.060 – 00:10:26.520] Kita nak buat saiz apa

[00:10:27.100 – 00:10:28.380] Saiz, satu saya tekan sini

[00:10:28.380 – 00:10:33.840] Kita nak buat saiz iPhone 16, Android, iPad, MacBook Air, MacBook 14

[00:10:33.840 – 00:10:36.800] Ni kira, ini saiz untuk MacBook 14

[00:10:38.780 – 00:10:41.860] Dia akan ikut saiz ni lah

[00:10:41.860 – 00:10:43.700] Sebab itulah dia beza dengan

[00:10:43.700 – 00:10:45.240] Canva tak boleh nak buat macam ni

[00:10:45.240 – 00:10:46.840] Nak buat F4 pun boleh

[00:10:46.840 – 00:10:49.220] Kadang-kadang saya punya lah banyak pasang nak pakai

[00:10:49.220 – 00:10:50.540] Canva Figma ni

[00:10:51.320 – 00:10:53.000] Sampai design pun saya buat dalam ni

[00:10:53.000 – 00:10:54.240] Saya pilih je frame ni

[00:10:54.240 – 00:10:55.940] Saya pilih size F4

[00:10:55.940 – 00:10:57.940] Saya buat design dalam ni terus

[00:10:57.940 – 00:11:00.740] Dan benda ni semua sebenarnya

[00:11:00.740 – 00:11:02.800] Ada dah template-template dia

[00:11:03.760 – 00:11:05.000] Template-template dia dah ada dah

[00:11:05.000 – 00:11:06.300] Tapi ni saya jalan basic dululah

[00:11:06.300 – 00:11:07.960] So kenapa apa masuk frame

[00:11:07.960 – 00:11:09.560] Sebab kita nak design dalam ni lah

[00:11:09.560 – 00:11:11.280] Contohlah ni website kita

[00:11:11.280 – 00:11:12.780] Ini kan versi

[00:11:12.780 – 00:11:13.680] iPhone

[00:11:13.680 – 00:11:15.420] Kita buat iPhone 14

[00:11:15.420 – 00:11:18.950] iPhone 14

[00:11:18.950 – 00:11:20.710] So, bila kita design

[00:11:20.710 – 00:11:22.350] Kita akan letak tulisan kat sini

[00:11:22.350 – 00:11:24.230] Contoh, kita letak tulisan

[00:11:25.990 – 00:11:26.550] Penat

[00:11:27.110 – 00:11:27.670] Risau

[00:11:28.370 – 00:11:28.930] Anak

[00:11:29.490 – 00:11:30.050] Speech

[00:11:33.680 – 00:11:34.240] Delay

[00:11:34.240 – 00:11:35.320] Tanda soal

[00:11:35.960 – 00:11:37.580] So, ni kita boleh centerkan dia

[00:11:37.580 – 00:11:38.500] Boleh tekan kat sini

[00:11:38.500 – 00:11:39.660] Ni dia punya control je lah

[00:11:39.660 – 00:11:40.520] Boleh centerkan dia

[00:11:40.520 – 00:11:42.400] Lepas tu, kita boleh kecikkan

[00:11:42.400 – 00:11:43.200] Ni font dia

[00:11:43.200 – 00:11:44.540] Kita boleh kecikkan

[00:11:44.540 – 00:11:45.980] Kita nak ambil 26

[00:11:46.720 – 00:11:47.800] Lagi kecil sikit

[00:11:47.800 – 00:11:49.440] Kita boleh center kan kat sini

[00:11:49.440 – 00:11:51.500] Kita boleh alignment center

[00:11:51.500 – 00:11:53.740] Ataupun saya lagi suka pakai

[00:11:54.500 – 00:11:55.540] Pakai benda ni lah

[00:11:55.540 – 00:11:57.080] Benda ni sedang sikit

[00:11:57.080 – 00:11:58.900] Untuk kita nak adjust sebetul kan

[00:11:58.900 – 00:12:00.860] Kita center kan dia macam ni

[00:12:00.860 – 00:12:02.300] Resalt nak speech delay

[00:12:02.300 – 00:12:04.620] Lepas tu kita boleh letak gambar

[00:12:05.340 – 00:12:07.340] Gambar katalah kita ada gambar nak masukkan

[00:12:07.340 – 00:12:09.500] Pergi je dekat mana-mana gambar kita

[00:12:10.400 – 00:12:11.160] Katalah ni

[00:12:11.160 – 00:12:12.480] Sedat je sini

[00:12:12.480 – 00:12:13.160] Boom

[00:12:13.160 – 00:12:14.620] Terus saya kecilkan sikit

[00:12:14.620 – 00:12:15.440] Sebab dia dah terkeluar

[00:12:15.440 – 00:12:16.260] Dia masuk dalam frame

[00:12:17.060 – 00:12:17.600] Ok

[00:12:17.600 – 00:12:19.080] Macam ni

[00:12:19.080 – 00:12:20.420] Resort anak speech delay

[00:12:21.300 – 00:12:21.960] Lepas tu

[00:12:21.960 – 00:12:23.340] Untuk kawak ruang ni

[00:12:23.340 – 00:12:24.640] Saya boleh buat

[00:12:25.240 – 00:12:25.780] Satu

[00:12:26.340 – 00:12:26.880] Petak

[00:12:26.880 – 00:12:28.280] Setelah saya buat satu petak

[00:12:28.280 – 00:12:29.940] Saya tarik ke sini ke sini

[00:12:30.960 – 00:12:32.580] Saya boleh tekan right click

[00:12:33.380 – 00:12:34.560] Saya right click

[00:12:34.560 – 00:12:36.540] Saya bring send to back

[00:12:36.540 – 00:12:37.700] Saya nak letak dia kat belakang

[00:12:37.700 – 00:12:39.000] Lepas tu saya nak buat

[00:12:39.000 – 00:12:40.220] Color petak ni

[00:12:40.220 – 00:12:40.820] Background dia

[00:12:40.820 – 00:12:41.320] Warna

[00:12:43.240 – 00:12:44.360] warna biru

[00:12:47.040 – 00:12:47.600] itulah

[00:12:47.600 – 00:12:49.040] warna biru

[00:12:49.040 – 00:12:50.060] biru gelap

[00:12:50.060 – 00:12:50.660] ok

[00:12:50.660 – 00:12:54.030] so yang ni saya buat

[00:12:54.030 – 00:12:54.950] warna hitam

[00:12:55.790 – 00:12:57.390] so itulah function dia

[00:12:57.390 – 00:12:59.010] kita boleh pilih pula

[00:12:59.010 – 00:12:59.770] yang ni bold

[00:13:00.870 – 00:13:02.230] risau nak speech delay

[00:13:03.310 – 00:13:04.950] tu kita boleh copy

[00:13:05.950 – 00:13:06.510] tepis

[00:13:06.510 – 00:13:07.810] so saya tarik jadi dua

[00:13:07.810 – 00:13:09.570] so bolehlah tulis apa-apa

[00:13:09.570 – 00:13:10.270] ingat bawah-bawah ni

[00:13:10.270 – 00:13:11.610] so inilah cara dia

[00:13:11.610 – 00:13:13.090] jadi bila kita dah design

[00:13:13.090 – 00:13:13.790] macam-macam benda

[00:13:13.790 – 00:13:14.850] katalah saya tunjuk

[00:13:14.850 – 00:13:15.710] Design saya dah siap

[00:13:22.640 – 00:13:23.240] Login

[00:13:24.840 – 00:13:25.760] Login kat

[00:13:25.760 – 00:13:27.720] Satu lagi tempat yang banyak design

[00:13:27.720 – 00:13:29.320] Jangan kita tengok

[00:13:29.320 – 00:13:30.720] Semua design-design dah dibuat

[00:13:31.940 – 00:13:33.140] Dia menggunakan

[00:13:33.140 – 00:13:34.240] Canva

[00:13:35.660 – 00:13:36.260] Eh

[00:13:37.320 – 00:13:37.920] Figma

[00:13:39.260 – 00:13:40.080] Contohnya macam

[00:13:41.060 – 00:13:41.800] Dalam ni

[00:13:41.800 – 00:13:43.600] Design-design kita buat ni

[00:13:43.600 – 00:13:45.440] Memang nampak macam bodoh-bodoh

[00:13:45.440 – 00:13:46.640] Macam jatuh ke jadi

[00:13:46.640 – 00:13:48.080] Okey ke ni kan

[00:13:48.080 – 00:13:50.300] Tapi, bila kau buat belajar lagi detail

[00:13:50.300 – 00:13:52.300] Last kali, kita memang buat design-design macam ni

[00:13:53.220 – 00:13:54.200] Haa, macam ni

[00:13:54.200 – 00:13:56.500] Kita buat

[00:13:56.500 – 00:13:58.520] Ni, tulisan, ni semua

[00:13:59.460 – 00:14:01.520] Dalam satu page je

[00:14:01.520 – 00:14:02.700] So, kita boleh play

[00:14:02.700 – 00:14:05.820] Kita boleh play daripada atas macam ni

[00:14:05.820 – 00:14:07.200] Jangan sedih sudah masuk gue

[00:14:07.200 – 00:14:09.560] Walaupun program aku tak habis, setoran datang lagi

[00:14:10.500 – 00:14:11.780] Haa, ni zaman-zaman dululah

[00:14:11.780 – 00:14:12.700] Sedih pula tengok

[00:14:13.200 – 00:14:15.260] So, tekan kat sini, kita boleh play

[00:14:15.740 – 00:14:16.760] Boleh tekan play

[00:14:16.760 – 00:14:18.200] Play ni maksudnya kita nak experience

[00:14:18.200 – 00:14:19.480] Macam mana kalau kita buka kat phone

[00:14:20.940 – 00:14:21.960] Itulah kelebihan dia

[00:14:21.960 – 00:14:24.060] Maksudnya kalau nak buat canva

[00:14:24.060 – 00:14:26.000] Boat ni nak buka sebelah punya design

[00:14:26.000 – 00:14:27.480] Sebelah punya design yang ni semua dalam satu

[00:14:28.380 – 00:14:28.860] Cuma

[00:14:28.860 – 00:14:30.080] Dia tak

[00:14:31.720 – 00:14:33.020] Ini ada setting dia lah

[00:14:33.020 – 00:14:34.180] Dia tak centre pula

[00:14:34.180 – 00:14:37.160] Tapi ada setting dia ni kita boleh centrekan dia nanti

[00:14:37.160 – 00:14:39.240] Yang mana bila kita centrekan dia

[00:14:39.240 – 00:14:40.260] Kita saksikan kat sini

[00:14:40.260 – 00:14:40.860] Prototype

[00:14:42.680 – 00:14:43.640] Scrolling vertical

[00:14:44.780 – 00:14:45.740] Prototype setting

[00:14:47.000 – 00:14:48.060] iPhone Pro Max

[00:14:48.720 – 00:14:49.780] Ok, saya try

[00:14:50.880 – 00:14:51.680] Tekan play up

[00:14:51.680 – 00:15:00.820] Tak lebih pula dah

[00:15:01.860 – 00:15:02.800] Eh, salah

[00:15:02.800 – 00:15:07.500] Oh, saya lupa nak select dia

[00:15:07.500 – 00:15:08.500] Ok, saya play sini

[00:15:08.500 – 00:15:14.380] Tak, dia ada setting dia ni

[00:15:14.380 – 00:15:15.220] Nanti saya ajar

[00:15:15.220 – 00:15:17.080] Ni ada setting dia, sebab saya pun

[00:15:17.780 – 00:15:19.820] Lupa ni, dia select sini

[00:15:19.820 – 00:15:20.720] Sekejap eh

[00:15:22.740 – 00:15:23.180] iPhone

[00:15:24.380 – 00:15:25.100] 16

[00:15:26.920 – 00:15:28.060] photo type

[00:15:28.060 – 00:15:33.500] so kita tak setting vertical

[00:15:33.500 – 00:15:34.720] vertical

[00:15:37.150 – 00:15:40.640] phone 16

[00:15:41.440 – 00:15:42.760] ok try sekali

[00:15:42.760 – 00:15:46.090] macam tak jadi

[00:15:48.830 – 00:15:50.450] tapi macam tu lah konsep dia

[00:15:50.450 – 00:15:52.310] ok dia sebelum ni jadi

[00:15:52.310 – 00:15:53.890] cuma mungkin setting kat sini kot

[00:15:53.890 – 00:15:55.670] zoom to fit screen

[00:15:56.870 – 00:15:58.030] ataupun yang ni

[00:15:58.930 – 00:16:00.190] kita boleh berubah

[00:16:00.190 – 00:16:01.750] lepas setting

[00:16:01.750 – 00:16:03.310] Kita kena check balik lah

[00:16:03.310 – 00:16:04.650] Terus saya buat video tambahan lah

[00:16:04.650 – 00:16:05.070] Kat hujung

[00:16:05.070 – 00:16:05.970] Saya dah discover

[00:16:05.970 – 00:16:07.110] Kenapa dia lari sikit

[00:16:07.110 – 00:16:08.410] Tapi point dia

[00:16:08.410 – 00:16:09.310] Bila kita play ni

[00:16:09.310 – 00:16:10.830] Ataupun kalau kita tak nak play

[00:16:10.830 – 00:16:11.370] Macam tu pun

[00:16:11.370 – 00:16:12.410] Kita boleh just scroll manually

[00:16:12.410 – 00:16:13.290] Kita dapat rasa dah

[00:16:13.290 – 00:16:14.290] Oh macam ni

[00:16:14.290 – 00:16:15.330] Kita patut nampak ni

[00:16:15.330 – 00:16:16.550] Patut nampak ni

[00:16:16.550 – 00:16:17.610] Patut nampak ni

[00:16:17.610 – 00:16:18.870] Dia design yang continuous

[00:16:18.870 – 00:16:20.870] Jadi sama kan macam-macam benda

[00:16:20.870 – 00:16:21.670] Kita dah design kat sini

[00:16:21.670 – 00:16:23.570] Yang ni sana

[00:16:23.570 – 00:16:25.530] Ni 7 start hiring

[00:16:26.290 – 00:16:27.210] Di atas

[00:16:27.210 – 00:16:27.870] Ni dulu

[00:16:27.870 – 00:16:29.390] Ini sales page

[00:16:29.390 – 00:16:31.230] Kita jual promo sales page dulu

[00:16:31.690 – 00:16:33.430] Dan macam-macam benda lah yang kita dah buat

[00:16:33.430 – 00:16:35.570] Dan benda ni semua memang kita buat dalam

[00:16:35.570 – 00:16:37.370] Figma. Kenapa tak buat dalam Canva? Sebab

[00:16:37.370 – 00:16:39.190] Susah nak, kita nak compare kiri kanan

[00:16:39.190 – 00:16:41.290] Susah kan. Contoh

[00:16:41.290 – 00:16:43.470] Ada projek yang

[00:16:43.470 – 00:16:44.790] Saya buat, RakuRite

[00:16:45.250 – 00:16:47.350] Carental. So kita design kat sini je

[00:16:48.350 – 00:16:49.130] Kita buat

[00:16:50.070 – 00:16:51.170] Sini. Kan tengok

[00:16:51.990 – 00:16:53.450] Jadi barang-barang dia macam ni

[00:16:53.450 – 00:16:55.370] Saya design. Ni saya design sendiri

[00:16:55.370 – 00:16:57.390] Letak kat sini. Lepas tu kalau kita

[00:16:57.390 – 00:16:58.870] Play, kita tengok jadi ke tak jadi

[00:16:59.870 – 00:17:00.910] So dia gila juga

[00:17:02.170 – 00:17:03.590] Kadang-kadang setting dia dah terkacau

[00:17:03.590 – 00:17:04.330] Haa, ni elok pula

[00:17:05.390 – 00:17:06.050] Haa, sebab

[00:17:06.570 – 00:17:07.990] Barat ni macam tu lah, scroll

[00:17:09.230 – 00:17:10.030] Atas, bawah

[00:17:10.030 – 00:17:10.730] Macam, ok

[00:17:15.120 – 00:17:16.840] So, benda ni semua dibuat dalam

[00:17:17.860 – 00:17:18.260] Figma

[00:17:19.240 – 00:17:21.500] Jadi, benda ni semua ni boleh, boleh kacau ni

[00:17:22.020 – 00:17:22.900] Haa, ni

[00:17:22.900 – 00:17:24.860] Ni takkan apa ni, buat satu-satu

[00:17:25.840 – 00:17:27.540] Semua benda ni, tak ada apa pun

[00:17:27.540 – 00:17:29.040] Gambar-gambar seketul-seketul

[00:17:29.720 – 00:17:31.200] Haa, ni semua, sebab

[00:17:31.660 – 00:17:32.460] Semua boleh alih

[00:17:35.060 – 00:17:36.580] ni semua boleh alih

[00:17:36.580 – 00:17:38.520] jadi semua ni hanyalah design je

[00:17:38.520 – 00:17:39.460] memang tak ada apa

[00:17:39.460 – 00:17:42.600] ni hanyalah design

[00:17:43.480 – 00:17:44.040] kosong

[00:17:45.400 – 00:17:47.840] so itulah maksudnya bila kita buat kat sini

[00:17:47.840 – 00:17:49.260] bila kita buat

[00:17:49.260 – 00:17:51.280] semua benda ni hanyalah design

[00:17:51.280 – 00:17:52.700] bukannya template yang kita

[00:17:52.700 – 00:17:54.480] memang daripada design kotak-kotak tu

[00:17:55.940 – 00:17:57.580] tercampak masuk sini dan siap

[00:17:57.580 – 00:17:59.400] jadilah sebagai design

[00:17:59.400 – 00:18:00.140] so

[00:18:01.240 – 00:18:02.840] kita patah balik kat basic tadi tu

[00:18:02.840 – 00:18:03.620] saya nak habiskan

[00:18:03.620 – 00:18:04.340] sikit je lagi

[00:18:04.340 – 00:18:06.320] so bawah ni ada fungsi-fungsi dia

[00:18:06.320 – 00:18:07.300] frame sebab dah faham dah

[00:18:07.300 – 00:18:07.980] frame ni untuk apa

[00:18:07.980 – 00:18:08.620] untuk buat design

[00:18:08.620 – 00:18:10.240] kita nak buat design website

[00:18:10.240 – 00:18:11.080] contohlah last lah

[00:18:11.080 – 00:18:12.120] saya tunjuk design website

[00:18:12.120 – 00:18:12.700] yang kita buat

[00:18:14.520 – 00:18:15.420] design website

[00:18:15.420 – 00:18:16.840] tadi abang tengok design mobile kan

[00:18:16.840 – 00:18:18.300] saya tunjuk pula design

[00:18:18.300 – 00:18:19.420] kalau kita design website

[00:18:19.420 – 00:18:20.440] secara horizontal

[00:18:21.160 – 00:18:22.220] ada lah kat sini

[00:18:24.690 – 00:18:25.210] ni

[00:18:25.210 – 00:18:26.290] website madat pun

[00:18:26.290 – 00:18:27.390] dulu saya buat website madat

[00:18:29.720 – 00:18:31.640] so contohnya macam ni

[00:18:32.480 – 00:18:33.000] ni

[00:18:33.000 – 00:18:34.380] untuk program 4AM ke lah

[00:18:34.380 – 00:18:36.020] so kita design kat sini

[00:18:36.020 – 00:18:36.620] properly

[00:18:37.900 – 00:18:38.580] Haa ni

[00:18:38.580 – 00:18:39.060] Sekejap

[00:18:40.120 – 00:18:40.840] Loading pula

[00:18:41.820 – 00:18:42.960] Haa ni ada gambar ni

[00:18:42.960 – 00:18:43.640] Loading loading

[00:18:43.640 – 00:18:45.600] Sebab ni ni browser tau

[00:18:45.600 – 00:18:46.400] Dia berat sikit

[00:18:46.400 – 00:18:47.240] Haa

[00:18:47.240 – 00:18:47.580] Sebab

[00:18:47.580 – 00:18:49.360] Haa ni tak apa nak cantik lah

[00:18:49.360 – 00:18:50.280] Haa ni ok sikit

[00:18:51.000 – 00:18:51.700] So ni

[00:18:51.700 – 00:18:52.600] Kalau kita tekan

[00:18:52.600 – 00:18:53.340] Dan kita boleh play

[00:18:53.340 – 00:18:54.960] So inilah kelebihan dia

[00:18:54.960 – 00:18:56.280] Sebab tu professional designer

[00:18:56.280 – 00:18:57.000] Pakai benda ni

[00:18:57.000 – 00:18:59.180] Dan awak tak perlu jadi professional sangat pun

[00:18:59.180 – 00:19:00.020] Biasa-biasa je

[00:19:00.020 – 00:19:01.400] Haa macam ni

[00:19:01.400 – 00:19:03.020] So kita design dia

[00:19:03.020 – 00:19:04.520] Macam mana dia flow dia kan

[00:19:04.520 – 00:19:06.220] Jadi kalau awak nak

[00:19:06.220 – 00:19:07.420] Belajar design ni

[00:19:07.420 – 00:19:08.760] Memang wajib kena pakai firma

[00:19:09.300 – 00:19:09.740] Dan

[00:19:09.740 – 00:19:10.960] Bermula daripada basic

[00:19:10.960 – 00:19:11.860] Yang saya cakap tadi tu

[00:19:12.300 – 00:19:12.740] Okay

[00:19:12.740 – 00:19:13.760] So kita sama balik

[00:19:13.760 – 00:19:14.640] Sebab tu ada frame

[00:19:14.640 – 00:19:15.440] Kita boleh pilih

[00:19:15.440 – 00:19:16.540] Lepas tu ni adalah

[00:19:16.540 – 00:19:18.220] Benda-benda star-star apa semua ni

[00:19:18.220 – 00:19:18.860] Awak pilih lah sendiri

[00:19:19.400 – 00:19:20.640] Gambar ni tak payah pakai pun

[00:19:20.640 – 00:19:21.280] Placeholder ni

[00:19:21.280 – 00:19:22.240] Awak drag and drop je

[00:19:22.240 – 00:19:23.340] Kalau awak ada gambar kan

[00:19:23.340 – 00:19:24.260] Sebab apa gambar pun

[00:19:24.260 – 00:19:25.020] Awak tarik je

[00:19:25.020 – 00:19:26.100] Macam ni ha

[00:19:26.100 – 00:19:27.020] Tarik je gambar

[00:19:27.580 – 00:19:28.220] Dah masuk

[00:19:28.220 – 00:19:28.820] Settle

[00:19:28.820 – 00:19:29.640] Okay

[00:19:29.640 – 00:19:30.400] Lepas tu next

[00:19:30.400 – 00:19:31.640] Yang ni pula adalah pen

[00:19:31.640 – 00:19:33.400] Pen ni kalau awak just nak macam

[00:19:33.400 – 00:19:34.260] Not draw

[00:19:35.340 – 00:19:36.180] Draw macam ni

[00:19:36.940 – 00:19:38.300] ni awak boleh explore sendirilah

[00:19:38.300 – 00:19:39.860] kita tekan pangkah

[00:19:41.080 – 00:19:42.900] jadilah fill tu kita boleh masukkan

[00:19:42.900 – 00:19:44.860] dia punya stroke ni

[00:19:44.860 – 00:19:46.860] luaran dia, fill ni kita boleh tekan

[00:19:46.860 – 00:19:48.200] plus, kita boleh masukkan colour

[00:19:48.820 – 00:19:49.920] macam ni contohnya

[00:19:50.560 – 00:19:52.420] next pula kita ada apa, kita ada tulisan

[00:19:52.420 – 00:19:53.800] tulisan kita boleh tulis

[00:19:55.760 – 00:19:56.940] tulisan, ataupun kita boleh

[00:19:56.940 – 00:19:58.680] tekan tulisan, kita boleh tarik macam ni

[00:19:58.680 – 00:20:00.740] jadi kotak besar pula, tu pun satu benda

[00:20:00.740 – 00:20:02.520] juga, lepas tu ni tak pakai

[00:20:02.520 – 00:20:04.820] ni pun saya tak pakai, ni pun saya tak pakai, ni pun saya tak pakai

[00:20:04.820 – 00:20:06.280] Ni jarang lah draw ni pun

[00:20:06.980 – 00:20:08.060] Jarang lah saya pakai

[00:20:09.320 – 00:20:10.280] Untuk draw kan

[00:20:12.200 – 00:20:12.860] Jarang lah

[00:20:12.860 – 00:20:14.600] Saya tak pakai lah biasanya draw ni

[00:20:14.600 – 00:20:16.700] Tapi kalau nak pakai boleh je

[00:20:16.700 – 00:20:17.840] Tak ada masalah pun

[00:20:18.780 – 00:20:20.280] Saya pakai mouse

[00:20:20.280 – 00:20:21.340] Untuk draw

[00:20:21.340 – 00:20:23.860] So ni kalau nak draw pun boleh draw sini

[00:20:23.860 – 00:20:25.760] Tapi biasanya lah kalau atas saya

[00:20:25.760 – 00:20:27.940] Yang kita memang confirm akan pakai

[00:20:27.940 – 00:20:29.640] Adalah yang ni

[00:20:33.330 – 00:20:34.810] Saya tekan balik yang ni

[00:20:34.810 – 00:20:35.790] Sebab ni untuk rukis

[00:20:35.790 – 00:20:36.790] Yang ni untuk

[00:20:36.790 – 00:20:37.750] Mata balik dekat yang tadi

[00:20:37.750 – 00:20:39.070] Kita memang confirm

[00:20:39.070 – 00:20:39.670] Akan pakai

[00:20:39.670 – 00:20:40.670] Yang pangan ni

[00:20:40.670 – 00:20:41.830] Lepas tu kita confirm

[00:20:41.830 – 00:20:43.050] Akan pakai frame ni

[00:20:43.050 – 00:20:44.330] Lepas tu kita confirm

[00:20:44.330 – 00:20:45.590] Akan pakai kotak-kotak ni

[00:20:45.590 – 00:20:47.290] Lepas tu kita confirm

[00:20:47.290 – 00:20:48.110] Akan pakai pen

[00:20:48.110 – 00:20:49.210] Pen banyak kita pakai

[00:20:49.210 – 00:20:49.530] Pen

[00:20:49.530 – 00:20:50.970] Lepas tu dengan text

[00:20:50.970 – 00:20:51.570] Ok

[00:20:51.570 – 00:20:52.810] Belah kanan ni pula adalah

[00:20:56.370 – 00:20:57.810] Belah kanan ni pula adalah

[00:20:57.810 – 00:20:58.410] Dia punya

[00:20:58.410 – 00:20:59.330] Setting je lah

[00:20:59.330 – 00:21:00.090] Want to actualize

[00:21:00.090 – 00:21:01.670] Ni semua belah kanan ni

[00:21:01.670 – 00:21:02.190] Setting dia

[00:21:02.190 – 00:21:02.790] Ok

[00:21:02.790 – 00:21:03.830] Belah kiri ni pula

[00:21:03.830 – 00:21:04.830] Adalah layer dia

[00:21:04.830 – 00:21:06.350] Contoh kalau saya tepek ni

[00:21:07.210 – 00:21:07.890] Perasan tak

[00:21:07.890 – 00:21:08.870] Line ni di atas

[00:21:08.870 – 00:21:09.770] So

[00:21:09.770 – 00:21:10.810] Mana benda ni

[00:21:10.810 – 00:21:11.750] Benda ni dekat sini

[00:21:11.750 – 00:21:13.250] Yang ni dekat atas

[00:21:13.250 – 00:21:14.350] So kalau saya alih ni

[00:21:14.350 – 00:21:15.370] Naikkan ke atas

[00:21:16.710 – 00:21:17.390] Tertimbus ada

[00:21:17.390 – 00:21:18.890] So ini adalah layer sahaja

[00:21:18.890 – 00:21:19.890] Lepas tu

[00:21:19.890 – 00:21:20.910] Ini page 1

[00:21:20.910 – 00:21:22.010] Awak boleh buat satu lagi page

[00:21:22.010 – 00:21:22.450] Plus

[00:21:22.450 – 00:21:23.730] Boleh buat page 2

[00:21:24.410 – 00:21:25.790] So ni line-line page ni

[00:21:25.790 – 00:21:27.410] Sebab tu dia ada banyak page

[00:21:27.410 – 00:21:28.590] So kita boleh buat page 1

[00:21:28.590 – 00:21:29.030] Page 2

[00:21:29.030 – 00:21:29.530] Page 3

[00:21:29.530 – 00:21:30.090] Page 4

[00:21:31.710 – 00:21:33.110] Boleh buat banyak-banyak page kat sini

[00:21:33.110 – 00:21:34.570] Dan dia auto save

[00:21:34.570 – 00:21:35.510] Awak tak perlu risau

[00:21:35.510 – 00:21:36.170] Ok jadi

[00:21:36.170 – 00:21:37.790] Kalau awak nak belajar lagi detail

[00:21:37.790 – 00:21:40.050] Saya memang tak dapat nak cover advance lah

[00:21:40.050 – 00:21:41.870] Ini just memang purely basic sahaja

[00:21:41.870 – 00:21:43.970] Sebab kita nak pergi pada video yang seterusnya

[00:21:43.970 – 00:21:46.150] Awak kena tengok video dekat YouTube

[00:21:46.150 – 00:21:47.590] Okay pergi dekat YouTube

[00:21:47.590 – 00:21:48.830] Type je Figma tutorial

[00:21:48.830 – 00:21:52.250] Dan awak kena tengok simple video

[00:21:52.250 – 00:21:52.790] Macam ni

[00:21:52.790 – 00:21:54.250] Ni bagus juga ni

[00:21:54.250 – 00:21:54.870] Flux ni

[00:21:54.870 – 00:21:56.910] 13 minit crash course

[00:21:56.910 – 00:21:58.690] Tapi Yahudi pula amat ni

[00:21:58.690 – 00:21:59.410] Ambil orang lain lah

[00:22:00.490 – 00:22:01.530] Ambil yang

[00:22:02.750 – 00:22:03.590] Contoh macam ni

[00:22:03.590 – 00:22:04.470] Oh ni sejam pula dah

[00:22:04.470 – 00:22:05.390] Sejam lah

[00:22:05.390 – 00:22:06.170] Tak nak belajar boleh ha ni

[00:22:06.170 – 00:22:06.590] Bagus ha ni

[00:22:06.590 – 00:22:07.710] Sejam belajar

[00:22:07.710 – 00:22:09.350] Fikmah, apa salah ni lah hidup

[00:22:09.350 – 00:22:11.530] Nak pakai 10 tahun, ajar je lah

[00:22:11.530 – 00:22:12.710] Fikmah sejam, apa salah ni

[00:22:13.750 – 00:22:15.110] Tu tengok benda-benda lain

[00:22:15.750 – 00:22:17.430] Ataupun awak nak buat, yang ni

[00:22:17.430 – 00:22:19.450] 24 minit, so macam-macam

[00:22:19.450 – 00:22:20.370] Benda awak boleh belajar

[00:22:21.590 – 00:22:30.020] So dia explain lebih detail

[00:22:30.020 – 00:22:32.180] Jadi saya nak awak bermula je dengan

[00:22:32.180 – 00:22:34.120] Saya, tapi awak kena habiskan dengan video-video

[00:22:34.120 – 00:22:35.980] Dekat YouTube, saya memang takkan sempat

[00:22:35.980 – 00:22:37.940] Untuk buat apa-apa video-video tambahan detail untuk

[00:22:37.940 – 00:22:40.000] Fikmah ni, so tolong discover

[00:22:40.460 – 00:22:41.620] Sendiri, ok

[00:22:41.620 – 00:22:44.060] Jadi kalau kita patah balik, apa yang kita nak capai

[00:22:44.060 – 00:22:46.000] sebenarnya saya nak awak install je Figma ni

[00:22:46.000 – 00:22:48.140] free software dan boleh gunakan dia

[00:22:48.140 – 00:22:49.980] pada bila-bila masa awak berada

[00:22:49.980 – 00:22:52.000] dan next dalam video yang

[00:22:52.000 – 00:22:53.960] selanjutnya, kita nak pergi kepada asas

[00:22:53.960 – 00:22:55.620] web design, saya nak tunjukkan awak

[00:22:55.620 – 00:22:56.940] daripada skeleton

[00:22:56.940 – 00:22:59.980] menjadi first draft, low fidelity

[00:22:59.980 – 00:23:01.560] menjadi high

[00:23:02.520 – 00:23:03.860] definition, HD

[00:23:03.860 – 00:23:05.760] ataupun high fidelity

[00:23:05.760 – 00:23:07.820] maksudnya dia full design, dia macam

[00:23:07.820 – 00:23:09.760] ada 3 fasa tau bila kita buat design

[00:23:09.760 – 00:23:11.280] daripada skeleton

[00:23:11.280 – 00:23:13.400] kepada first draft

[00:23:13.400 – 00:23:14.680] Kepada finish

[00:23:14.680 – 00:23:16.660] So kita akan tengok dalam video

[00:23:16.660 – 00:23:17.820] Yang seterusnya

[00:23:17.820 – 00:23:18.460] Zaz