| Istilah | Maksud dalam pelajaran ini |
|---|---|
| Frame | Container reka bentuk yang digunakan untuk susun atur halaman atau peranti. |
| Scale | Alat yang ditunjukkan untuk mengubah saiz kandungan yang dipilih bersama. |
| Prototype | Satu simulasi persembahan / interaksi, berasingan dari laman web yang diterbitkan yang berfungsi. |
Dengar rakaman sambil membaca nota. Butang masa membawa anda ke bahagian audio yang berkaitan. Masa bagi setiap bingkai slaid ditunjukkan secara berasingan.
Lihat semua bingkai yang disimpan bersama konteks transkrip · Transkrip penuh dengan bingkai asal
Video seterusnya saya nak share tentang rahsia desain yang convert.
Dan dalam ni saya nak tunjukkan satu software yang jarang orang share.
Nama dia adalah Figma.
Macam mana cara nak install Figma Free Software. [semak: perkataan tidak pasti]
Tanpa buang masa, jom kita mulakan.
Ok, step pertama, tolong buka dekat Google macam ni. [semak: perkataan tidak pasti]
Type je dekat dalam ni, F-I-G-M-A.
Figma, tekan Enter. [semak: perkataan tidak pasti]
Lepas tu anda akan nampak belah atas sekali.
Figma The Collaboration Interface Design Tools [semak: perkataan tidak pasti]
Tekan yang ni [semak: perkataan tidak pasti]
Ok lepas tu kita akan masuk ke dalam Figma [semak: perkataan tidak pasti]
Tapi sebab saya dah terlog out
Terlog in
Saya log out balik lah eh
Sekejap
Saya log keluar balik
Ok saya tekan sekali lagi [semak: perkataan tidak pasti]
Haa sorry sorry
Sorry sorry sorry [semak: perkataan tidak pasti]
So kalau kita tekan balik Figma
Tekan enter
Masuk
Masuk dekat sini
Haa inilah muka depan dia
Dan Figma ni guys dia percuma [semak: perkataan tidak pasti]
Sesuai lah untuk kita yang nak main-main
Desain-desain free ni
Tapi dia ada versi yang berbayar [semak: perkataan tidak pasti]
Kalau nak bayar dia ni
Mahal lah
Saya pun tak bayar
Saya pun pakai yang free je
So, pakai je yang free
Serius
Free ni pun dah sangat mencukupi
Setakat saya pakai
Setahun baru saya kena bayar
Sebab
Features free dia pun dah ok lah [semak: perkataan tidak pasti]
Dan apa itu Figma
Figma ni
Tujuan dia adalah
Untuk buat design
Design website
Macam ni kan
Kita nak buat
To prom lah [semak: perkataan tidak pasti]
Ni design
Kita nak design website
Kita nak draw
Dia macam-macam
build, publish, nak buat mockup [semak: perkataan tidak pasti]
jadi macam-macam lah [semak: perkataan tidak pasti]
yang kita boleh buat dekat dalam Figma ni
tapi especially paling penting dia design
dan design dia ni bukan macam design
Canva apa semua, dia design
untuk website
dia adalah pembunuh Adobe XD
sebab Adobe pun banyak
seraga sekarang ni sebab Figma ni dah macam-macam
template Figma dia, dia online
website bila tu, jadi dia tak payah nak install [semak: perkataan tidak pasti]
dia hidup dalam browser
macam kita buka YouTube tu secara online macam tu
macam tu lah dia [semak: perkataan tidak pasti]
so banyak lah fungsi-fungsi
Figma ni [semak: perkataan tidak pasti]
jadi jom kita
explore sama-sama
Figma
kalau anda yang zero
boleh follow
dan ni nampak lah
boleh design website
social media [semak: perkataan tidak pasti]
mobile app [semak: perkataan tidak pasti]
presentation
invitation
tapi mostly orang design [semak: perkataan tidak pasti]
untuk website lah
Figma ni
jadi jom tekan button
get started for free
3, 2, 1 [semak: nombor atau jumlah]
tekan
get started for free
tekan sahaja
continue with google
dan saya akan gunakan
satu email saya
yang fresh
from oven
saya guna email ni lah
contohnya
Email yang saya tak pakai [semak: perkataan tidak pasti]
So tekan sahaja button continue [semak: perkataan tidak pasti]
Pilih lah mana-mana email [semak: perkataan tidak pasti]
Tekan, patut tekan dia proceed continue [semak: perkataan tidak pasti]
Dan automatically dia akan
Buat pendaftaran
Tapi kita tengok jap [semak: perkataan tidak pasti]
Apa yang dia tanya ni [semak: perkataan tidak pasti]
Oh terus masuk ke dalam guys
Jadi kita namakan
Nama saya Adib
Tekan continue
Yang ni bantai je lah apa-apa
Kerja
Okay continue [semak: perkataan tidak pasti]
Kenapa ni
dia lebih bagus daripada Canva [semak: perkataan tidak pasti]
sebab Canva
Canva bagus [semak: perkataan tidak pasti]
banyak template
tapi issue dengan Canva ni
dia frame dia tu
kalau dah petak-petak je
dia susah nak duplicate design
ada lah benda-benda yang saya tak suka [semak: perkataan tidak pasti]
pasal Canva
Canva tak boleh nak buat design
yang continuous untuk website
so dia macam Canva
betul
tapi dia lebih advance sikit
daripada Canva
sebab tu lah kalau awak pakai yang ni
awak rasa macam advance je
Canva kan simple-simple je kan
so jom
kita tengok
kita explore sama-sama
Pantai je lah apa-apa eh [semak: perkataan tidak pasti]
Jawab je lah ambil ni
Jawab je lah apa-apa
Boleh skip ke? [semak: perkataan tidak pasti]
Tak boleh
Oh boleh skip
Tekan je lah skip [semak: perkataan tidak pasti]
You speak on before [semak: perkataan tidak pasti]
A few times [semak: perkataan tidak pasti]
Okay [semak: perkataan tidak pasti]
Layan je lah [semak: perkataan tidak pasti]
Yang ni
Kita pakai yang free [semak: perkataan tidak pasti]
Ini ya [semak: perkataan tidak pasti]
Tekan starter
Sebab dia adalah free
Limited
3 file [semak: nombor atau jumlah]
Okay sangat lah tu
Kita pakai satu file pun dah cukup sebenarnya
Tekan button
Continue
Lepas tu
Ni skip je lah [semak: perkataan tidak pasti]
ok, kita dah selamat [semak: perkataan tidak pasti]
masuk ke dalam Figma guys
jadi, berjaya tak follow saya [semak: perkataan tidak pasti]
kalau belum berjaya, masuk balik [semak: perkataan tidak pasti]
daripada mula
jadi, apa yang ada kat sini, kita ada
Fik Jam Basic, Figma Basic [semak: perkataan tidak pasti]
Adib Afifi Hassan
Team Library, ok, saya nak
awak tekan dekat Figma Basic
jom kita masuk dekat bahagian
Figma Basic, 3, 2, 1, let's go [semak: nombor atau jumlah]
bila awak tekan, dia double click [semak: perkataan tidak pasti]
dekat Figma Basic
kita akan masuk ke dalam
Figma punya design
So, bagus lah kita nak belajar kat sini [semak: perkataan tidak pasti]
Kita boleh scroll eh, boleh zoom
Untuk zoom ni, awak boleh
Macam saya, sebab saya pakai
Macbook, saya boleh macam tu je lah [semak: perkataan tidak pasti]
Macam ni lah, tapi kalau awak pakai
Window, awak boleh tekan
Control plus [semak: perkataan tidak pasti]
Control minus, jadi zoom out
Control plus, jadi zoom in
So, macam ni saya boleh zoom in macam ni lah
Jadi, Figma ni, dia adalah software [semak: perkataan tidak pasti]
Untuk kita design
Macam ni, dia boleh design-design [semak: perkataan tidak pasti]
dan [semak: perkataan tidak pasti]
Figma ni bagus lah untuk kita nak [semak: perkataan tidak pasti]
tukar apa-apa dan dia ada
kotak-kotak macam ni nampak dia boleh design website
macam ni lah
practice design kita boleh tengok [semak: perkataan tidak pasti]
ni semua ni di design bagi Figma ni [semak: perkataan tidak pasti]
saya boleh tukar ni
saya
eh hilang tak lah [semak: perkataan tidak pasti]
we are
anak ibu
ni boleh tukar ni
benda ni semua boleh tukar
jadi dia macam konsep design lah [semak: perkataan tidak pasti]
Kita nak tukar apa-apa kat sini pun boleh
Dan macam gambar ni ke nak buat keluar ke [semak: perkataan tidak pasti]
Jadi kalau Canva [semak: perkataan tidak pasti]
Dia tak boleh nak buat design continuous
Katalah kita nak tambah panjangan dia
Kita boleh select dekat sini
Kita boleh panjangkan lagi
Oh ni bukan frame [semak: perkataan tidak pasti]
Sekejap ni bukan frame
Sekejap
Saya boleh panjangkan dia [semak: perkataan tidak pasti]
So saya boleh design lagi
Masalah dengan Canva
Dia tak boleh tiba-tiba kita nak panjangkan website kita
Lepas tu nak scroll
Macam ni kan [semak: perkataan tidak pasti]
So kalau katalah saya nak tengok view dia yang betul [semak: perkataan tidak pasti]
Saya boleh tekan select ni
Saya boleh tekan button play kat sini
Button play ni
Dia akan buat macam website tu real
Jadi kita dapat view
Macam view telefon boleh
Kita nak view laptop boleh
Desktop boleh [semak: perkataan tidak pasti]
Jadi kita nampak lah macam ni
Nampak
Saya dapat scroll [semak: perkataan tidak pasti]
Dapatlah perasaan ibarat macam kita
Tengah buka website sebenar
Contoh macam ni
Ni sebab saya sedang halis tadi tu [semak: perkataan tidak pasti]
Terasa letak balik
Cun sikit [semak: perkataan tidak pasti]
ok, so saya tekan [semak: perkataan tidak pasti]
sini, saya tekan button play, ni saya tunjuk just [semak: perkataan tidak pasti]
features-features yang ada je, jadi so awak tahu [semak: perkataan tidak pasti]
oh ni ke function dia, yes, dia boleh [semak: perkataan tidak pasti]
buat mockup macam ni
kita nak experience macam mana eh, kalau kita buka [semak: perkataan tidak pasti]
website
boleh, kalau kita nak tekan dia, kita boleh link
kan ke page lain, nak tekan [semak: perkataan tidak pasti]
boleh, nak ni boleh, nak buat dia bergerak
boleh, jadi dia mockup lah, dia
bukanlah buat ni, inilah website kita dah siap tak
ini just macam satu mockup je [semak: perkataan tidak pasti]
sebab tu lah, dalam panduan ni saya [semak: perkataan tidak pasti]
ajar awak bukan design biasa-biasa. Saya nak ajar awak
design professional. Macam mana kami buat
design wala-wala tu. Ha, kat sini lah. [semak: perkataan tidak pasti]
Okay. So, kita dah cover basic [semak: perkataan tidak pasti]
fitma. Jadi, saya explain lah [semak: perkataan tidak pasti]
tentang features-features yang ada kat sini.
Tapi untuk explain ni, saya patah [semak: perkataan tidak pasti]
balik keluar eh. So, awak tekan balik dekat huruf [semak: perkataan tidak pasti]
F ni. Kita tekan back to file.
Kita nak keluar balik ke depan. Okay.
Jadi, sekarang ni, saya nak awak
buat satu file pertama.
Okay. Tekan dekat design.
Nampak design ni. Okay. Kita tekan [semak: perkataan tidak pasti]
dekat design.
So kita telah pun [semak: perkataan tidak pasti]
Melahirkan
File kita yang pertama [semak: perkataan tidak pasti]
Jadi file ni dia kosong lah
Dia tak ada apa-apa [semak: perkataan tidak pasti]
Dan
Dalam file ni
Kita ada beberapa benda [semak: perkataan tidak pasti]
Kita tengok sini [semak: perkataan tidak pasti]
Nak buat website ke
Moba apps ke desktop [semak: perkataan tidak pasti]
Saya tekan pangkah je lah
Tekan pangkah je
Kita biar je dia kosong
Okay [semak: perkataan tidak pasti]
So
Kita nak namakan dulu file kita ni
Contohnya
Sales page [semak: perkataan tidak pasti]
Kosong satu [semak: perkataan tidak pasti]
Okay
Saya nak explain
Basic features yang ada daripada kiri ke kanan
Kita start dengan bawah sekali
Okay, daripada kiri ni [semak: perkataan tidak pasti]
Ini adalah kalau kita nak gerakkan dia
Kalau hand ni, dia boleh bergerak macam ni
Sekejap tak nampak eh, saya buat kotak dulu lah [semak: perkataan tidak pasti]
Okay, ni kena buat kotak
Kita boleh buat kotak
Kalau kita tekan ni, kita boleh buat macam-macam lah
Arrow line lah lah
Benda-benda basic
Yang ada arrow ni, tapi kita kena zoom pun nampak [semak: perkataan tidak pasti]
Ada arrow semua kat situ [semak: perkataan tidak pasti]
Haa, sama je lah [semak: perkataan tidak pasti]
Benda-benda basic
Tapi dengan basic ni pun dah boleh buat website lawa
Yang kelakar tu [semak: perkataan tidak pasti]
Tak banyak sangat benda [semak: perkataan tidak pasti]
So kita boleh gerak-gerakkan dia [semak: perkataan tidak pasti]
Contoh kita ambil tangan ni kan
Ambil tangan
Kita boleh macam ni [semak: perkataan tidak pasti]
Macam grab dia
Tapi kalau kita nak tarik ni tak boleh lah
Kita kena tukar balik kepada move [semak: perkataan tidak pasti]
Macam ni
Macam ni kalau kita nak
Katalah kita ada tulisan
Tulisan kita boleh tekan kat sini [semak: perkataan tidak pasti]
Tulisan
Saya suka makan
Macam mana kalau saya nak besarkan dia
Kalau saya tarik macam ni [semak: perkataan tidak pasti]
Dia tak membesar je dia kotak [semak: perkataan tidak pasti]
So macam mana kita nak membesarkan dia
Adalah saya boleh undo balik
Tekan control Z [semak: perkataan tidak pasti]
Ataupun right click
Boleh undo kat mana
Tapi biasanya [semak: perkataan tidak pasti]
Command Z ataupun control Z [semak: perkataan tidak pasti]
Ni saya undo balik [semak: perkataan tidak pasti]
Cara dia [semak: perkataan tidak pasti]
Perasaan tak kat sini [semak: perkataan tidak pasti]
Ini untuk gerakkan benda [semak: perkataan tidak pasti]
Yang ni untuk kita gerak macam ni [semak: perkataan tidak pasti]
Yang ni pula untuk kita [semak: perkataan tidak pasti]
Scale kan, contoh macam ni, saya tekan dia [semak: perkataan tidak pasti]
Saya tekan dia ni
Saya tarik je
So katalah saya susun serentak
Saya nak semua scale serentak
Dan semua ni akan scale serentak
Saya select semua ni
Saya tarik je [semak: perkataan tidak pasti]
Nampak
Itulah function bendalah ni [semak: perkataan tidak pasti]
Dia untuk resize, untuk scale [semak: perkataan tidak pasti]
So kita dapat resize semua sekali
Katalah kita nak semua ni resize dengan konsisten
Kita dah pilih tu [semak: perkataan tidak pasti]
Tarik je
Semua akan resize
Jadi itulah function bendalah ni
Dia sangat function bila kita ada banyak design lah [semak: perkataan tidak pasti]
Tapi sebelum kita buat design apa-apa [semak: perkataan tidak pasti]
Yang ni paling penting bendalah ni [semak: perkataan tidak pasti]
Ini nama dia frame
Dalam ni ada banyak lah section slice [semak: perkataan tidak pasti]
Tapi yang kita memang pakai frame
Saya nak buat tekan dekat frame [semak: perkataan tidak pasti]
Kita nak buat frame pertama [semak: perkataan tidak pasti]
Tekan dekat frame
Cuba tarik macam ni
Ini frame [semak: perkataan tidak pasti]
Frame ni, kita boleh tarik saiz besar, saiz kecil
Dan bila kita buat frame [semak: perkataan tidak pasti]
Kita sebenarnya boleh tekan dekat frame
Dan pilih saiz dia
Dia ada saiz iPhone 16 [semak: nombor atau jumlah]
Dia ada banyak saiz lah
Kita nak buat saiz apa
Saiz, satu saya tekan sini [semak: perkataan tidak pasti]
Kita nak buat saiz iPhone 16, Android, iPad, MacBook Air, MacBook 14 [semak: perkataan tidak pasti, nombor atau jumlah]
Ni kira, ini saiz untuk MacBook 14 [semak: perkataan tidak pasti, nombor atau jumlah]
Dia akan ikut saiz ni lah
Sebab itulah dia beza dengan [semak: perkataan tidak pasti]
Canva tak boleh nak buat macam ni
Nak buat F4 pun boleh [semak: perkataan tidak pasti, nombor atau jumlah]
Kadang-kadang saya punya lah banyak pasang nak pakai [semak: perkataan tidak pasti]
Canva Figma ni
Sampai design pun saya buat dalam ni [semak: perkataan tidak pasti]
Saya pilih je frame ni
Saya pilih size F4 [semak: nombor atau jumlah]
Saya buat design dalam ni terus [semak: perkataan tidak pasti]
Dan benda ni semua sebenarnya
Ada dah template-template dia
Template-template dia dah ada dah
Tapi ni saya jalan basic dululah [semak: perkataan tidak pasti]
So kenapa apa masuk frame [semak: perkataan tidak pasti]
Sebab kita nak design dalam ni lah
Contohlah ni website kita
Ini kan versi [semak: perkataan tidak pasti]
iPhone
Kita buat iPhone 14 [semak: perkataan tidak pasti, nombor atau jumlah]
iPhone 14 [semak: perkataan tidak pasti, nombor atau jumlah]
So, bila kita design [semak: perkataan tidak pasti]
Kita akan letak tulisan kat sini
Contoh, kita letak tulisan
Penat
Risau
Anak
Speech
Delay
Tanda soal
So, ni kita boleh centerkan dia [semak: perkataan tidak pasti]
Boleh tekan kat sini
Ni dia punya control je lah
Boleh centerkan dia
Lepas tu, kita boleh kecikkan
Ni font dia
Kita boleh kecikkan
Kita nak ambil 26 [semak: perkataan tidak pasti, nombor atau jumlah]
Lagi kecil sikit [semak: perkataan tidak pasti]
Kita boleh center kan kat sini [semak: perkataan tidak pasti]
Kita boleh alignment center
Ataupun saya lagi suka pakai [semak: perkataan tidak pasti]
Pakai benda ni lah
Benda ni sedang sikit
Untuk kita nak adjust sebetul kan [semak: perkataan tidak pasti]
Kita center kan dia macam ni [semak: perkataan tidak pasti]
Resalt nak speech delay [semak: perkataan tidak pasti]
Lepas tu kita boleh letak gambar
Gambar katalah kita ada gambar nak masukkan
Pergi je dekat mana-mana gambar kita
Katalah ni
Sedat je sini [semak: perkataan tidak pasti]
Boom [semak: perkataan tidak pasti]
Terus saya kecilkan sikit [semak: perkataan tidak pasti]
Sebab dia dah terkeluar
Dia masuk dalam frame
Ok [semak: perkataan tidak pasti]
Macam ni
Resort anak speech delay [semak: perkataan tidak pasti]
Lepas tu
Untuk kawak ruang ni [semak: perkataan tidak pasti]
Saya boleh buat
Satu
Petak
Setelah saya buat satu petak
Saya tarik ke sini ke sini [semak: perkataan tidak pasti]
Saya boleh tekan right click
Saya right click
Saya bring send to back
Saya nak letak dia kat belakang
Lepas tu saya nak buat
Color petak ni
Background dia
Warna
warna biru [semak: perkataan tidak pasti]
itulah
warna biru
biru gelap [semak: perkataan tidak pasti]
ok [semak: perkataan tidak pasti]
so yang ni saya buat [semak: perkataan tidak pasti]
warna hitam
so itulah function dia
kita boleh pilih pula
yang ni bold
risau nak speech delay
tu kita boleh copy [semak: perkataan tidak pasti]
tepis [semak: perkataan tidak pasti]
so saya tarik jadi dua [semak: perkataan tidak pasti]
so bolehlah tulis apa-apa
ingat bawah-bawah ni [semak: perkataan tidak pasti]
so inilah cara dia
jadi bila kita dah design
macam-macam benda
katalah saya tunjuk
Design saya dah siap [semak: perkataan tidak pasti]
Login [semak: perkataan tidak pasti]
Login kat [semak: perkataan tidak pasti]
Satu lagi tempat yang banyak design
Jangan kita tengok [semak: perkataan tidak pasti]
Semua design-design dah dibuat
Dia menggunakan
Canva
Eh
Figma [semak: perkataan tidak pasti]
Contohnya macam
Dalam ni
Design-design kita buat ni
Memang nampak macam bodoh-bodoh
Macam jatuh ke jadi [semak: perkataan tidak pasti]
Okey ke ni kan [semak: perkataan tidak pasti]
Tapi, bila kau buat belajar lagi detail [semak: perkataan tidak pasti]
Last kali, kita memang buat design-design macam ni [semak: perkataan tidak pasti]
Haa, macam ni [semak: perkataan tidak pasti]
Kita buat
Ni, tulisan, ni semua [semak: perkataan tidak pasti]
Dalam satu page je
So, kita boleh play
Kita boleh play daripada atas macam ni [semak: perkataan tidak pasti]
Jangan sedih sudah masuk gue [semak: perkataan tidak pasti]
Walaupun program aku tak habis, setoran datang lagi [semak: perkataan tidak pasti]
Haa, ni zaman-zaman dululah
Sedih pula tengok
So, tekan kat sini, kita boleh play
Boleh tekan play
Play ni maksudnya kita nak experience [semak: perkataan tidak pasti]
Macam mana kalau kita buka kat phone
Itulah kelebihan dia
Maksudnya kalau nak buat canva [semak: perkataan tidak pasti]
Boat ni nak buka sebelah punya design [semak: perkataan tidak pasti]
Sebelah punya design yang ni semua dalam satu
Cuma
Dia tak [semak: perkataan tidak pasti]
Ini ada setting dia lah [semak: perkataan tidak pasti]
Dia tak centre pula [semak: perkataan tidak pasti]
Tapi ada setting dia ni kita boleh centrekan dia nanti [semak: perkataan tidak pasti]
Yang mana bila kita centrekan dia
Kita saksikan kat sini [semak: perkataan tidak pasti]
Prototype [semak: perkataan tidak pasti]
Scrolling vertical
Prototype setting
iPhone Pro Max
Ok, saya try [semak: perkataan tidak pasti]
Tekan play up [semak: perkataan tidak pasti]
Tak lebih pula dah
Eh, salah
Oh, saya lupa nak select dia [semak: perkataan tidak pasti]
Ok, saya play sini [semak: perkataan tidak pasti]
Tak, dia ada setting dia ni [semak: perkataan tidak pasti]
Nanti saya ajar
Ni ada setting dia, sebab saya pun [semak: perkataan tidak pasti]
Lupa ni, dia select sini [semak: perkataan tidak pasti]
Sekejap eh
iPhone
16 [semak: nombor atau jumlah]
photo type [semak: perkataan tidak pasti]
so kita tak setting vertical [semak: perkataan tidak pasti]
vertical [semak: perkataan tidak pasti]
phone 16 [semak: nombor atau jumlah]
ok try sekali [semak: perkataan tidak pasti]
macam tak jadi [semak: perkataan tidak pasti]
tapi macam tu lah konsep dia
ok dia sebelum ni jadi [semak: perkataan tidak pasti]
cuma mungkin setting kat sini kot
zoom to fit screen
ataupun yang ni
kita boleh berubah
lepas setting [semak: perkataan tidak pasti]
Kita kena check balik lah [semak: perkataan tidak pasti]
Terus saya buat video tambahan lah [semak: perkataan tidak pasti]
Kat hujung [semak: perkataan tidak pasti]
Saya dah discover [semak: perkataan tidak pasti]
Kenapa dia lari sikit
Tapi point dia
Bila kita play ni
Ataupun kalau kita tak nak play
Macam tu pun [semak: perkataan tidak pasti]
Kita boleh just scroll manually
Kita dapat rasa dah
Oh macam ni
Kita patut nampak ni [semak: perkataan tidak pasti]
Patut nampak ni
Patut nampak ni
Dia design yang continuous
Jadi sama kan macam-macam benda [semak: perkataan tidak pasti]
Kita dah design kat sini
Yang ni sana [semak: perkataan tidak pasti]
Ni 7 start hiring [semak: nombor atau jumlah]
Di atas [semak: perkataan tidak pasti]
Ni dulu
Ini sales page
Kita jual promo sales page dulu
Dan macam-macam benda lah yang kita dah buat [semak: perkataan tidak pasti]
Dan benda ni semua memang kita buat dalam [semak: perkataan tidak pasti]
Figma. Kenapa tak buat dalam Canva? Sebab [semak: perkataan tidak pasti]
Susah nak, kita nak compare kiri kanan [semak: perkataan tidak pasti]
Susah kan. Contoh
Ada projek yang [semak: perkataan tidak pasti]
Saya buat, RakuRite [semak: perkataan tidak pasti]
Carental. So kita design kat sini je [semak: perkataan tidak pasti]
Kita buat
Sini. Kan tengok [semak: perkataan tidak pasti]
Jadi barang-barang dia macam ni
Saya design. Ni saya design sendiri
Letak kat sini. Lepas tu kalau kita
Play, kita tengok jadi ke tak jadi
So dia gila juga
Kadang-kadang setting dia dah terkacau
Haa, ni elok pula [semak: perkataan tidak pasti]
Haa, sebab
Barat ni macam tu lah, scroll [semak: perkataan tidak pasti]
Atas, bawah [semak: perkataan tidak pasti]
Macam, ok [semak: perkataan tidak pasti]
So, benda ni semua dibuat dalam [semak: perkataan tidak pasti]
Figma
Jadi, benda ni semua ni boleh, boleh kacau ni
Haa, ni
Ni takkan apa ni, buat satu-satu [semak: perkataan tidak pasti]
Semua benda ni, tak ada apa pun
Gambar-gambar seketul-seketul
Haa, ni semua, sebab
Semua boleh alih
ni semua boleh alih [semak: perkataan tidak pasti]
jadi semua ni hanyalah design je
memang tak ada apa [semak: perkataan tidak pasti]
ni hanyalah design
kosong
so itulah maksudnya bila kita buat kat sini
bila kita buat
semua benda ni hanyalah design
bukannya template yang kita
memang daripada design kotak-kotak tu
tercampak masuk sini dan siap [semak: perkataan tidak pasti]
jadilah sebagai design
so
kita patah balik kat basic tadi tu [semak: perkataan tidak pasti]
saya nak habiskan
sikit je lagi [semak: perkataan tidak pasti]
so bawah ni ada fungsi-fungsi dia [semak: perkataan tidak pasti]
frame sebab dah faham dah [semak: perkataan tidak pasti]
frame ni untuk apa
untuk buat design
kita nak buat design website
contohlah last lah
saya tunjuk design website
yang kita buat
design website
tadi abang tengok design mobile kan [semak: perkataan tidak pasti]
saya tunjuk pula design
kalau kita design website
secara horizontal
ada lah kat sini [semak: perkataan tidak pasti]
ni [semak: perkataan tidak pasti]
website madat pun
dulu saya buat website madat [semak: perkataan tidak pasti]
so contohnya macam ni
ni
untuk program 4AM ke lah [semak: perkataan tidak pasti, nombor atau jumlah]
so kita design kat sini
properly
Haa ni [semak: perkataan tidak pasti]
Sekejap
Loading pula
Haa ni ada gambar ni
Loading loading [semak: perkataan tidak pasti]
Sebab ni ni browser tau [semak: perkataan tidak pasti]
Dia berat sikit [semak: perkataan tidak pasti]
Haa
Sebab [semak: perkataan tidak pasti]
Haa ni tak apa nak cantik lah [semak: perkataan tidak pasti]
Haa ni ok sikit [semak: perkataan tidak pasti]
So ni
Kalau kita tekan
Dan kita boleh play
So inilah kelebihan dia
Sebab tu professional designer
Pakai benda ni
Dan awak tak perlu jadi professional sangat pun
Biasa-biasa je
Haa macam ni
So kita design dia
Macam mana dia flow dia kan
Jadi kalau awak nak
Belajar design ni
Memang wajib kena pakai firma [semak: perkataan tidak pasti]
Dan
Bermula daripada basic
Yang saya cakap tadi tu
Okay [semak: perkataan tidak pasti]
So kita sama balik [semak: perkataan tidak pasti]
Sebab tu ada frame
Kita boleh pilih [semak: perkataan tidak pasti]
Lepas tu ni adalah
Benda-benda star-star apa semua ni
Awak pilih lah sendiri
Gambar ni tak payah pakai pun
Placeholder ni
Awak drag and drop je
Kalau awak ada gambar kan
Sebab apa gambar pun [semak: perkataan tidak pasti]
Awak tarik je
Macam ni ha [semak: perkataan tidak pasti]
Tarik je gambar
Dah masuk
Settle [semak: perkataan tidak pasti]
Okay
Lepas tu next
Yang ni pula adalah pen
Pen ni kalau awak just nak macam [semak: perkataan tidak pasti]
Not draw [semak: perkataan tidak pasti]
Draw macam ni
ni awak boleh explore sendirilah [semak: perkataan tidak pasti]
kita tekan pangkah [semak: perkataan tidak pasti]
jadilah fill tu kita boleh masukkan [semak: perkataan tidak pasti]
dia punya stroke ni
luaran dia, fill ni kita boleh tekan
plus, kita boleh masukkan colour
macam ni contohnya
next pula kita ada apa, kita ada tulisan [semak: perkataan tidak pasti]
tulisan kita boleh tulis
tulisan, ataupun kita boleh
tekan tulisan, kita boleh tarik macam ni
jadi kotak besar pula, tu pun satu benda [semak: perkataan tidak pasti]
juga, lepas tu ni tak pakai
ni pun saya tak pakai, ni pun saya tak pakai, ni pun saya tak pakai
Ni jarang lah draw ni pun [semak: perkataan tidak pasti]
Jarang lah saya pakai [semak: perkataan tidak pasti]
Untuk draw kan
Jarang lah
Saya tak pakai lah biasanya draw ni
Tapi kalau nak pakai boleh je
Tak ada masalah pun
Saya pakai mouse
Untuk draw
So ni kalau nak draw pun boleh draw sini [semak: perkataan tidak pasti]
Tapi biasanya lah kalau atas saya [semak: perkataan tidak pasti]
Yang kita memang confirm akan pakai
Adalah yang ni
Saya tekan balik yang ni [semak: perkataan tidak pasti]
Sebab ni untuk rukis [semak: perkataan tidak pasti]
Yang ni untuk
Mata balik dekat yang tadi [semak: perkataan tidak pasti]
Kita memang confirm
Akan pakai [semak: perkataan tidak pasti]
Yang pangan ni [semak: perkataan tidak pasti]
Lepas tu kita confirm
Akan pakai frame ni
Lepas tu kita confirm
Akan pakai kotak-kotak ni
Lepas tu kita confirm
Akan pakai pen
Pen banyak kita pakai
Pen [semak: perkataan tidak pasti]
Lepas tu dengan text
Ok [semak: perkataan tidak pasti]
Belah kanan ni pula adalah
Belah kanan ni pula adalah
Dia punya
Setting je lah [semak: perkataan tidak pasti]
Want to actualize [semak: perkataan tidak pasti]
Ni semua belah kanan ni [semak: perkataan tidak pasti]
Setting dia
Ok
Belah kiri ni pula
Adalah layer dia
Contoh kalau saya tepek ni
Perasan tak
Line ni di atas
So
Mana benda ni [semak: perkataan tidak pasti]
Benda ni dekat sini [semak: perkataan tidak pasti]
Yang ni dekat atas
So kalau saya alih ni
Naikkan ke atas
Tertimbus ada
So ini adalah layer sahaja
Lepas tu
Ini page 1 [semak: perkataan tidak pasti, nombor atau jumlah]
Awak boleh buat satu lagi page [semak: perkataan tidak pasti]
Plus
Boleh buat page 2 [semak: nombor atau jumlah]
So ni line-line page ni [semak: perkataan tidak pasti]
Sebab tu dia ada banyak page
So kita boleh buat page 1 [semak: perkataan tidak pasti, nombor atau jumlah]
Page 2 [semak: nombor atau jumlah]
Page 3 [semak: nombor atau jumlah]
Page 4 [semak: nombor atau jumlah]
Boleh buat banyak-banyak page kat sini
Dan dia auto save [semak: perkataan tidak pasti]
Awak tak perlu risau
Ok jadi [semak: perkataan tidak pasti]
Kalau awak nak belajar lagi detail
Saya memang tak dapat nak cover advance lah
Ini just memang purely basic sahaja [semak: perkataan tidak pasti]
Sebab kita nak pergi pada video yang seterusnya
Awak kena tengok video dekat YouTube
Okay pergi dekat YouTube [semak: perkataan tidak pasti]
Type je Figma tutorial
Dan awak kena tengok simple video [semak: perkataan tidak pasti]
Macam ni
Ni bagus juga ni [semak: perkataan tidak pasti]
Flux ni
13 minit crash course [semak: nombor atau jumlah]
Tapi Yahudi pula amat ni [semak: perkataan tidak pasti]
Ambil orang lain lah
Ambil yang
Contoh macam ni
Oh ni sejam pula dah [semak: perkataan tidak pasti]
Sejam lah
Tak nak belajar boleh ha ni [semak: perkataan tidak pasti]
Bagus ha ni
Sejam belajar
Fikmah, apa salah ni lah hidup [semak: perkataan tidak pasti]
Nak pakai 10 tahun, ajar je lah [semak: nombor atau jumlah]
Fikmah sejam, apa salah ni
Tu tengok benda-benda lain
Ataupun awak nak buat, yang ni [semak: perkataan tidak pasti]
24 minit, so macam-macam [semak: perkataan tidak pasti, nombor atau jumlah]
Benda awak boleh belajar
So dia explain lebih detail [semak: perkataan tidak pasti]
Jadi saya nak awak bermula je dengan [semak: perkataan tidak pasti]
Saya, tapi awak kena habiskan dengan video-video [semak: perkataan tidak pasti]
Dekat YouTube, saya memang takkan sempat
Untuk buat apa-apa video-video tambahan detail untuk
Fikmah ni, so tolong discover [semak: perkataan tidak pasti]
Sendiri, ok
Jadi kalau kita patah balik, apa yang kita nak capai [semak: perkataan tidak pasti]
sebenarnya saya nak awak install je Figma ni
free software dan boleh gunakan dia
pada bila-bila masa awak berada
dan next dalam video yang
selanjutnya, kita nak pergi kepada asas
web design, saya nak tunjukkan awak
daripada skeleton
menjadi first draft, low fidelity
menjadi high
definition, HD
ataupun high fidelity
maksudnya dia full design, dia macam [semak: perkataan tidak pasti]
ada 3 fasa tau bila kita buat design [semak: perkataan tidak pasti, nombor atau jumlah]
daripada skeleton
kepada first draft
Kepada finish
So kita akan tengok dalam video [semak: perkataan tidak pasti]
Yang seterusnya
Zaz [semak: perkataan tidak pasti]