Belajar UI Design & Prototyping Dengan Figma
Рет қаралды 37,251
Күн бұрынSebagai seorang coder memang tidak diwajibkan memiliki kemampuan mendesain yang baik. Tapi, bila memiliki kemampuan tersebut akan memberi nilai tambah kita sebagai seorang coder ataupun non-coder. Kesempatan kali ini, Nauval akan mengajak kamu untuk belajar UI design bersama-sama. Aplikasi yang digunakan pada pelajaran kali ini adalah Figma.
Referensi:
- figma.com
- unsplash.com
- feathericons.com
- dribbble.com
Buku Tailwind:
- multinity.id/book/tailwind-css
Komunitas:
- Discord: / discord
- Front-end Indonesia: / discord
Donasi:
- trakteer.id/arrayid
Nauval:
- Website: nauv.al
- Github: github.com/nauvalazhar
- Twitter: / mhdnauvalazhar
- Buymeacoffee: buymeacoffee.com/mhd
Timestamps
00:00:00 Intro
00:01:02 Perkenalan Aplikasi Design Figma
00:06:32 Mempelajari Workspace Figma
00:12:48 Mendesain UI Design Pertama
00:33:05 Mendesain Hero Website
00:51:09 Mendesain Web Profile - Hero Section
01:07:03 Mendesain Web Profile - Profile Section
01:11:35 Mendesain Web Profile - Skills Section
01:21:33 Mendesain Web Profile - Projects Section
01:26:12 Mendesain Web Profile - Contact Section
01:38:56 Membuat Prototype Web Profile
01:44:03 Mempelajari & Menggunakan Plugin
01:46:49 Menggunakan Plugin Autoflow
01:47:58 Menggunakan Plugin Avatar
01:49:04 Menggunakan Plugin Content Reel
01:50:03 Menggunakan Plugin Blobs
01:50:37 Menggunakan Plugin Get Waves
01:51:16 Menggunakan Plugin Wireframer
01:52:09 Tips Dalam Membuat UI Design
Semoga bermanfaat! ❤️
@Mari_Selalu_Berbuat_Kebaikan 8 күн бұрын
Nam myoho renge kyo Mari selalu berbuat banyak kebaikan dan menyebarkannya, saat masih ada kesempatan ❤️
@jessica-tv6ep 3 жыл бұрын
Rapi banget dan ngejelasinnya juga enak. Ditunggu next materi. Thank you!
@mjhsaja 2 жыл бұрын
Terima kasih sudah berbagi ilmu om. konten berkualitas dan free
@armuza2513 2 жыл бұрын
Keren bngt detail makasih ka tutor nya...sukses selalu
@verenolivia3508 3 жыл бұрын
Mantap bang terima kasih ilmu nya, selama ini pakai adobe xd mau coba pakai figma
@andifaizal6848 3 жыл бұрын
Keren ini,coba Live coding slicing dgn tailwind dong mas dari hasil desainnya
@syariefrahman7411 2 жыл бұрын
makasih mas, walaupun udah ngerti sebelumnya, tapi nonton ini jadi tau tips2 nya
@DewaPurnama 2 жыл бұрын
mantab bang,, baru mau mulai belajar figma ini :) karena tuntutan profesi
@user-hq3ni7sh5x 2 жыл бұрын
Keren bang tutorialnya 👍👍 Sekedar masukan sedikit klo bisa setiap abang mau nunjukin menu2 tools tertentu mungkin bisa di zooming juga biar lebih jelas gtu bang posisi pointer mouse dimana dan lebih proporsional kita liatnya dilayar bang... lanjut terus bang share ilmunya 👍👍🙏
@user-by6yn5de7s 2 жыл бұрын
gokil lah underatted ni video semangat trus bang
@mraflyrafsanjani3793 3 жыл бұрын
terima kasih ilmunya mang nopal
@_MasDwi 2 жыл бұрын
Lulusan Arsitek, pengen nyebur ke dunia ui/ux. Dr kemaren cari cari channel buat belajar. Ini cocok sih buat belajar, bodor ada ngakak ngakaknya wkwkwk meng-odong receh pisan aing.
@bramantyakiswara 6 ай бұрын
thks bang ilmunya serasa kuliah 3 sks
@muhammadfarhanbintang9517 2 жыл бұрын
semoga ilmunya bermanfaaat🙏
@ahmadsahal6588 2 жыл бұрын
terimakasih atas ilmunya, izin save
@hugengseto 16 күн бұрын
Sangat membantu, terimakasih bang
@valentinostania60 3 жыл бұрын
Makasih banyak mas, ditunggu kelanjutannya :)
@minnie5927 Жыл бұрын
halo bang 😎😎
@RintzA0809 Жыл бұрын
mas boleh minta referensi untuk spacing guide ga? contohnya header itu bagus nya tinggi nya berapa px, spacing antara text within header, trus hero section height nya berapa, dll sampe ke footer nya. makasih mas. tutorial nya ringan dan bagus banget. gampang di ikutin. sukses terus mas :)
@mioozw1565 2 жыл бұрын
Terimakasih bang
@fikriikhlasul4791 2 жыл бұрын
❤️❤️❤️❤️❤️
@soffanhidayat8653 2 жыл бұрын
Baru hatam bg, thanks ya
@aanesiyaa Жыл бұрын
cool speech
@danangadinugroho1581 2 жыл бұрын
Keren
@andianzanulzikra5729 2 жыл бұрын
Keren banget mas harusnya nih video bisa jadi kelas premium tapi disini gratis , gokil !!! semangat mas kontenya semoga ini menjadi amal jariyah
@andianzanulzikra5729 2 жыл бұрын
btw mas nya salah export tuh masa iya 3gp 😆
@mhdnauvalazhar 2 жыл бұрын
gimik aja itu mas wkwkwk
@rudestewing 3 жыл бұрын
bang gondrong jago desain ~
@calvin1351 2 жыл бұрын
Bg mau nanyak itu Pace/face itu Ctrl-V ya Bang?
@gopretid Жыл бұрын
Rambutlu keren bang
@cecepsudirman2756 3 жыл бұрын
mau tanya bang, kok hasil play prototype ada kotak hitam kosng di sebelah kiri, jadi hasilnya agak gepeng gara-gara ada kotak kosong itu, kayak ke dorong gitu, itu kenapa ya?
@mhdnauvalazhar 3 жыл бұрын
Waduh harus liat screenshot dulu nih aku
@evarahmawati693 2 жыл бұрын
Bang, klo misal ada navigasi bar nya dibawah biar gak ikut ke scroll gimana yah
@mhdnauvalazhar 2 жыл бұрын
kalo di figma ada opsi fixed position bisa baca di sini ya: help.figma.com/hc/en-us/articles/360039818734-Prototype-scrolling-with-overflow-behavior
@riyadhelmufid2940 2 жыл бұрын
NICE BRO LANJUTKAN! Udah gw subscribe and like. Next semoga kita bisa kerjain proyek bareng. Thanks!
@prasetiyo7625 2 жыл бұрын
Aslinya gondrong saya kira mohawk ✌
@Uyawed 2 жыл бұрын
Mantap penjelasannya, baru belajar nih, dan penasaran soal bidang UX/UI. Kalo soal UX gimana bang?
@mhdnauvalazhar 2 жыл бұрын
Kalo UX belum terlalu expert, karena kalo bicara UX seringkali harus disertakan penelitiannya. Mungkin kalo masi idup kedepannya kita belajar bareng yak.
@ahmadnurullaiq845 2 жыл бұрын
permisi bang. boleh mina link social feednya?
@mhdnauvalazhar 2 жыл бұрын
ini bro: www.figma.com/community/file/928870458970385309
@fajribro402 Жыл бұрын
Bang buat tutorial react js dong
@mhdnauvalazhar Жыл бұрын
kan udah
@aldriansahwisnu4027 Жыл бұрын
But I have a problem
@muhamadfurqonnugroho7511 2 жыл бұрын
Bang, mau tanya kalau mau export design figma ke html bisa gak sih? dan itu full code atau bagaimana bang Terimakasih
@mhdnauvalazhar 2 жыл бұрын
ya slicing sendiri ke kode, kalo yang otomatis ada plugin namanya anima klo g salah, mas
@gasbiadiadi9125 2 жыл бұрын
Difigma, 3 project itu gimana maksudnya?mentok 3 project doang bang.? Sama 30 day version history?
@mhdnauvalazhar 2 жыл бұрын
iya bener, 3 project aja. project itu beda dengan design file, kalo design file itu bisa dibuat unlimited. project itu sederhananya untuk men-group design files dan menambahkan member (orang) yang bisa akses design file di dalam project tersebut. soal history, figma punya fitur history. setiap perubahan desain kita itu diingat sama figma. jadi kita bisa rollback ke perubahan sebelumnya. nah 30 day version history, ya berarti figma cuman akan mengingat perubahan kita selama 30 hari aja.
@gasbiadiadi9125 2 жыл бұрын
@@mhdnauvalazhar berarti kalo lebih dari 30 day figma gk bisa di update lagi gitu bang??
@mhdnauvalazhar 2 жыл бұрын
@@gasbiadiadi9125 ya bisa, yang nggak bisa itu di-rollback atau liat history perubahan yang lebih dari 30 hari
@gasbiadiadi9125 2 жыл бұрын
@@mhdnauvalazhar ooh paham2 thanks bang wkwk
@fikriikhlasul4791 2 жыл бұрын
pakai mic apa bang?
@mhdnauvalazhar 2 жыл бұрын
at2020 mas
@ayamgosong17 6 ай бұрын
iseng masukin virus
guru gembul
Рет қаралды 131 М.
Insightnesia
Рет қаралды 13 М.
Plus26
Рет қаралды 113 М.
lev89k
Рет қаралды 2,3 МЛН
Skillbox Программирование
Рет қаралды 978 М.