[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"blog-belajar-figma-dari-basic-sampai-bisa-membuat-prototype":3},{"id":4,"title":5,"body":6,"description":201,"extension":202,"meta":203,"navigation":212,"path":213,"seo":214,"stem":215,"__hash__":216},"blog\u002Fblog\u002Fbelajar-figma-dari-basic-sampai-bisa-membuat-prototype.md","Belajar Figma dari Basic Sampai Bisa Membuat Prototype",{"type":7,"value":8,"toc":191},"minimark",[9,13,16,19,24,27,43,46,49,53,56,59,78,81,84,88,95,98,101,104,108,114,117,120,123,126,137,140,144,147,150,153,156,159,163,166,169,172,176,179,182,185,188],[10,11,12],"p",{},"Awalnya gw mengenal Figma cuma sebagai aplikasi untuk membuat desain tampilan website atau aplikasi.",[10,14,15],{},"Waktu pertama kali mencoba, jujur gw masih cukup bingung dengan banyaknya tools dan fitur yang ada. Gw belum terlalu paham fungsi masing-masing bagian dan masih sering coba-coba sendiri.",[10,17,18],{},"Dari situ gw mulai belajar Figma sedikit demi sedikit, mulai dari hal yang paling dasar sampai akhirnya bisa membuat desain dan prototype sederhana.",[20,21,23],"h2",{"id":22},"mulai-dari-basic","Mulai dari Basic",[10,25,26],{},"Pertama kali belajar, gw mencoba mengenal bagian-bagian dasar yang ada di Figma.",[10,28,29,30,34,35,38,39,42],{},"Gw mulai dari membuat ",[31,32,33],"strong",{},"Frame",", menambahkan ",[31,36,37],{},"Text",", membuat bentuk menggunakan ",[31,40,41],{},"Rectangle",", mengatur warna, dan mengubah ukuran objek.",[10,44,45],{},"Kelihatannya sederhana, tetapi saat pertama kali mencoba gw masih sering salah memilih ukuran atau posisi objek.",[10,47,48],{},"Gw juga mulai belajar bagaimana cara mengatur jarak antar elemen supaya desain yang dibuat terlihat lebih rapi.",[20,50,52],{"id":51},"mulai-membuat-desain-sederhana","Mulai Membuat Desain Sederhana",[10,54,55],{},"Setelah mulai memahami tools dasar, gw mencoba membuat tampilan halaman website sederhana.",[10,57,58],{},"Di tahap ini gw mulai memperhatikan beberapa hal seperti:",[60,61,62,66,69,72,75],"ul",{},[63,64,65],"li",{},"Posisi tombol",[63,67,68],{},"Ukuran tulisan",[63,70,71],{},"Warna",[63,73,74],{},"Jarak antar elemen",[63,76,77],{},"Susunan layout",[10,79,80],{},"Dari sini gw mulai sadar kalau membuat desain bukan cuma soal membuat sesuatu terlihat bagus.",[10,82,83],{},"Penempatan setiap elemen juga harus dipikirkan supaya orang yang melihat desainnya bisa memahami apa yang harus dilakukan.",[20,85,87],{"id":86},"belajar-component-dan-elemen-yang-bisa-dipakai-lagi","Belajar Component dan Elemen yang Bisa Dipakai Lagi",[10,89,90,91,94],{},"Setelah cukup nyaman dengan basic, gw mulai mencoba fitur seperti ",[31,92,93],{},"Component",".",[10,96,97],{},"Fitur ini cukup membantu ketika ada elemen yang digunakan berulang kali, misalnya tombol atau card.",[10,99,100],{},"Daripada membuat elemen yang sama dari awal berkali-kali, gw bisa membuat satu component dan menggunakannya kembali.",[10,102,103],{},"Awalnya gw masih sering bingung ketika mengatur component, tetapi setelah beberapa kali mencoba gw mulai mengerti cara kerjanya.",[20,105,107],{"id":106},"mulai-mencoba-prototype","Mulai Mencoba Prototype",[10,109,110,111,94],{},"Bagian yang paling menarik buat gw adalah ketika mulai belajar ",[31,112,113],{},"Prototype",[10,115,116],{},"Sebelumnya desain yang gw buat cuma berupa tampilan yang tidak bisa diklik.",[10,118,119],{},"Setelah menggunakan prototype, beberapa bagian dari desain bisa dibuat saling terhubung.",[10,121,122],{},"Misalnya ketika tombol login ditekan, halaman bisa berpindah ke halaman dashboard.",[10,124,125],{},"Contoh sederhana yang gw coba adalah:",[127,128,134],"pre",{"className":129,"code":131,"language":132,"meta":133},[130],"language-text","Halaman Login\n      ↓\n  Tombol Login\n      ↓\n   Dashboard\n","text","",[135,136,131],"code",{"__ignoreMap":133},[10,138,139],{},"Dari sini gw mulai merasa kalau desain yang gw buat sudah mulai terasa seperti sebuah website atau aplikasi sungguhan.",[20,141,143],{"id":142},"tidak-langsung-bisa","Tidak Langsung Bisa",[10,145,146],{},"Proses belajar Figma juga tidak selalu berjalan lancar.",[10,148,149],{},"Beberapa fitur masih terasa membingungkan dan terkadang gw harus mencoba berkali-kali untuk mendapatkan hasil yang sesuai.",[10,151,152],{},"Ada juga saat ketika desain yang gw buat terlihat berbeda dari yang gw bayangkan.",[10,154,155],{},"Tapi semakin sering digunakan, gw mulai lebih terbiasa dengan tools yang ada.",[10,157,158],{},"Yang awalnya harus mencari-cari fungsi sebuah tool, lama-lama mulai bisa menggunakannya tanpa terlalu banyak berpikir.",[20,160,162],{"id":161},"sampai-bisa-membuat-prototype-sederhana","Sampai Bisa Membuat Prototype Sederhana",[10,164,165],{},"Setelah belajar dari basic sampai mencoba beberapa fitur, akhirnya gw mulai bisa membuat desain UI sederhana dan menghubungkan beberapa halaman menggunakan prototype.",[10,167,168],{},"Walaupun hasilnya masih jauh dari sempurna, menurut gw ini sudah menjadi perkembangan dibanding ketika pertama kali membuka Figma dan belum tahu harus mulai dari mana.",[10,170,171],{},"Dari pengalaman ini gw jadi lebih tertarik untuk mempelajari bagian desain UI dan mencoba menerapkannya ke project yang gw buat.",[20,173,175],{"id":174},"penutup","Penutup",[10,177,178],{},"Belajar Figma buat gw merupakan salah satu proses belajar yang cukup menarik.",[10,180,181],{},"Gw mulai dari hal yang sangat dasar, mencoba memahami tools satu per satu, kemudian membuat desain sederhana sampai akhirnya bisa membuat prototype.",[10,183,184],{},"Gw masih ingin terus belajar karena masih banyak fitur Figma yang belum gw kuasai.",[10,186,187],{},"Tapi setidaknya sekarang gw sudah tidak lagi melihat Figma sebagai aplikasi yang penuh dengan tools yang membingungkan.",[10,189,190],{},"Gw mulai melihat Figma sebagai salah satu alat yang bisa membantu gw menuangkan ide sebelum sebuah website atau aplikasi dibuat.",{"title":133,"searchDepth":192,"depth":192,"links":193},2,[194,195,196,197,198,199,200],{"id":22,"depth":192,"text":23},{"id":51,"depth":192,"text":52},{"id":86,"depth":192,"text":87},{"id":106,"depth":192,"text":107},{"id":142,"depth":192,"text":143},{"id":161,"depth":192,"text":162},{"id":174,"depth":192,"text":175},"Cerita perjalanan gw belajar Figma dari mengenal tools dasar sampai akhirnya bisa membuat desain UI dan prototype sederhana.","md",{"date":204,"category":205,"tags":206,"readTime":211,"cover":133},"2026-06-15","Belajar & Design",[207,208,113,209,210],"Figma","UI Design","Design","Belajar","5 menit",true,"\u002Fblog\u002Fbelajar-figma-dari-basic-sampai-bisa-membuat-prototype",{"title":5,"description":201},"blog\u002Fbelajar-figma-dari-basic-sampai-bisa-membuat-prototype","bes5UWnCSP-ShzrnprlIVkXeno-cPujX1mniNdCJyO8",1790338455347]