{"id":2746,"date":"2022-09-13T18:33:21","date_gmt":"2022-09-13T11:33:21","guid":{"rendered":"https:\/\/mez.ink\/blog\/blog\/?p=2746"},"modified":"2022-09-13T18:38:53","modified_gmt":"2022-09-13T11:38:53","slug":"tutorial-figma-design-website","status":"publish","type":"post","link":"https:\/\/mez.ink\/blog\/tutorial-figma-design-website\/","title":{"rendered":"Tutorial Figma Design Website Sederhana Hanya 15 Menit"},"content":{"rendered":"\n

Figma adalah perangkat lunak UI\/UX design yang memudahkan orang untuk bekerja sama dalam proyek visual. Karena berbasis cloud, pengguna dapat terus bekerja dari komputer atau perangkat apa pun dengan koneksi internet, di mana pun dan kapanpun. Selain itu, pemilik proyek dapat memberikan akses yang berbeda ke anggota tim yang berbeda sehingga setiap orang dapat melihat desain, membuat perubahan, dan meninggalkan komentar secara real time. Karena ini dan banyak fitur lainnya, Figma dengan cepat menggantikan Adobe XD dan Sketch di hati banyak UI\/UX designer selama beberapa tahun terakhir, termasuk dalam penggunaannya untuk membuat figma design website.<\/p>\n\n\n\n

Lalu, bagaimana cara menggunakan Figma untuk mendesain website? Sebelum itu, kamu harus mengerti dulu apa itu website dan komponen dasar website sebelum mendesign website. Simak informasi dan tutorial figma design lengkapnya dibawah ini.<\/p>\n\n\n\n

Apa itu Website?<\/strong><\/h2>\n\n\n\n

Seperti namanya, website adalah “situs\/site” di “web” di mana informasi tentang diri kamu, bisnis kamu, atau topik lainnya dapat diposting dan diakses oleh orang-orang yang menggunakan internet. Webpage adalah halaman online yang dapat kamu lihat di komputer, tablet, atau ponsel menggunakan internet dan layanan web.<\/p>\n\n\n\n

Kamu juga dapat mengatakan bahwa website adalah web site, yang merupakan sekelompok halaman web yang ditautkan bersama dan memiliki konten yang terkait dengan bisnis atau organisasi.<\/p>\n\n\n\n

Tujuan dari website ini adalah untuk mengubah orang-orang yang mengunjungi website menjadi pembeli atau yang juga disebut dengan leads<\/a>. Kamu dapat menggunakan website untuk berbagai hal, seperti website pribadi, blog<\/a> atau website untuk organisasi. Website dapat dimanfaatkan oleh perseorangan atau organisasi.<\/p>\n\n\n\n

Website adalah alat yang berguna untuk merencanakan, mengembangkan, dan mempromosikan bisnis kamu. Semakin banyak orang menggunakan website yang dinamis dan interaktif karena mereka menarik untuk dilihat. Maka dari itu, design UI\/UX website adalah faktor yang penting dalam membuat website.<\/p>\n\n\n\n

Struktur atau Komponen Website<\/strong><\/h2>\n\n\n\n

Tiap website memiliki struktur atau komponen yang berbeda-beda, tetapi semuanya memiliki bagian standar yang sama, yaitu:<\/p>\n\n\n\n

#1 Header<\/strong><\/h3>\n\n\n\n

Sebagian besar website memiliki strip di bagian atas dengan judul besar dan logo. Bagian ini juga merupakan tempat sebagian besar informasi utama tentang website dimuat, seperti menu dan cara menghubungi pemilik website. Header biasanya merupakan struktur website yang bersifat fixed atau tidak berubah-ubah dari halaman ke halaman.<\/p>\n\n\n\n

#2 Body<\/strong><\/h3>\n\n\n\n

Bagian ini adalah area besar di tengah yang memiliki sebagian besar informasi unik di website, seperti galeri foto atau artikel fitur yang kamu tampilkan untuk dibawa oleh pengunjung website. Bagian halaman ini berubah dari satu halaman ke halaman berikutnya.<\/p>\n\n\n\n

#3 Footer<\/strong><\/h3>\n\n\n\n

Bagian adalah strip di bagian bawah website. Biasanya memiliki logo media sosial, pemberitahuan hak cipta, tautan akses cepat, dan \/ atau informasi tentang cara menghubungi bisnis. Footer adalah tempat untuk meletakkan informasi umum, sama seperti header, tetapi informasi di footer tidak begitu penting. Sama seperti header, footer juga biasanya merupakan struktur website yang bersifat fixed atau tidak berubah-ubah dari halaman ke halaman.<\/p>\n\n\n\n

Tutorial Figma Design Website Dengan Mudah Untuk Pemula<\/strong><\/h2>\n\n\n\n

Setelah kamu mengerti apa itu website dan strukturnya, kamu dapat memulai membuat figma design website dengan mengikuti tutorial figam design website. Simak caranya dibawah ini:<\/p>\n\n\n\n

#1 Buat File Figma<\/strong><\/h3>\n\n\n\n

Pertama-tama, buka www.figma.com<\/a> lalu klik New design file.<\/p>\n\n\n\n

\"buat<\/figure>\n\n\n\n

#2 Pilih Frame<\/strong><\/h3>\n\n\n\n

Setelah project terbuat, pilih frame dengan cara memilih menu frame dari toolbar. Pilih frame untuk desktop. Kamu dapat mengubah warnanya sesuka hati kamu.<\/p>\n\n\n\n

\"pilih<\/figure>\n\n\n\n

#3 Buat Header Website<\/strong><\/h3>\n\n\n\n

Setelah kamu memilih frame untuk design website kamu, inilah saatnya untuk membuat komponen atau struktur website pertama, yaitu header. <\/p>\n\n\n\n

Tambahkan foto untuk latar belakang headermu dengan cara men-drag foto ke halaman figma yang sedang dibuka. Kamu dapat menggunakan foto gratis dari pixabay<\/a>, freepik<\/a> ataupun dengan bantuan plugin unsplash<\/a>. Kamu sebenarnya bisa memilih untuk tidak menggunakan foto, semuanya sesuai dengan selera kamu.<\/p>\n\n\n\n

\"tambahkan<\/figure>\n\n\n\n

Setelah itu, tambahkan rectangle untuk main bar atau navigation bar<\/strong> website kamu. Kamu bisa menggunakan shape tool<\/strong> dari toolbar figma.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kamu dapat mengatur ketebalan rectangle dengan mengklik rectangle yang sudah dibuat, lalu mengubah persentase pada fill sesuai yang kamu inginkan.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tambahkan teks dengan menggunakan text tool<\/strong> yang ada pada toolbar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hasil Header:<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

#4 Buat Konten Website<\/strong><\/h3>\n\n\n\n

Setelah selesai membuat header, buat lah isi konten atau body pada website kamu. Untuk memperpanjang frame, kamu dapat meng-klik frame lalu mengatur panjangnya kebawah sesuai dengan yang kamu butuhkan.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tambahkan foto, tulisan, atau bentuk apapun yang kamu inginkan dengan cara yang sama seperti diatas. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kamu juga bisa menambahkan button<\/strong> dengan menggunakan rectangle tool, dan mengatur radiusnya dengan mengklik rectangle<\/strong> yang sudah dibuat dan mengaturnya pada tab design.<\/p>\n\n\n\n

\"atur<\/figure>\n\n\n\n

#5 Buat Konten Website Kedua dan Seterusnya<\/strong><\/h3>\n\n\n\n

Konten selanjutnya adalah konten optional. Kamu dapat menambahkan konten kedua atau ketiga sesuai dengan kebutuhan kamu.<\/p>\n\n\n\n

\"konten<\/figure>\n\n\n\n

#6 Buat Footer Website<\/strong><\/h3>\n\n\n\n

Langkah terakhir adalah membuat footer website. Kamu bisa membuatnya dengan menambahkan rectangle dan line menggunakan shape tool. Tambahkan pula informasi penting tentang bisnis atau identitas website.<\/p>\n\n\n\n

\"bagian<\/figure>\n\n\n\n

#7 Hasil Akhir<\/strong><\/h3>\n\n\n\n

Berikut adalah hasil akhir figma design website yang sudah dikerjakan<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ubah Design Website Figma Kamu Jadi HTML dan CSS<\/strong><\/h2>\n\n\n\n

Selain basic toolsnya yang mudah digunakan, banyaknya plugin yang disediakan oleh figma menjadikan Figma aplikasi UI\/UX design yang unggul di pasaran. Dengan plufin yang disediakan, kamu dapat mengubah design website yang telah kamu buat menjadi HTML dan CSS untuk dibuat menjadi tampilan website asli. Untuk melakukannya, kamu bisa mengikuti cara convert figma design ke HTML dan CSS dengan klik disini<\/a>.<\/p>\n\n\n\n

Mulai Buat Design Website Kamu Menggunakan Figma<\/strong><\/h2>\n\n\n\n

Figma adalah salah satu tools UI\/UX design yang paling mudah digunakan dan paling mudah beradaptasi di pasaran saat ini. Basic tools figma<\/a> memudahkan tim yang bekerja di tempat yang sama dan tim yang bekerja dari tempat yang berbeda untuk bekerja sama. Maka dari itu, mulai manfaatkan Figma untuk membuat figma design seperti website sederhana dengan mudah dan berkolaborasi bersama tim figma kamu.<\/p>\n\n\n\n

Itulah penjelasan mengenai tutorial figma dari Mezink kali ini tentang  membuat figma design website sederhana. Kamu bisa membaca tutorial Figma<\/a> lainnya di Mezink Blog<\/a>. Semoga bermanfaat!<\/p>\n\n\n\n

\"Jadi<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

Figma adalah perangkat lunak UI\/UX design yang memudahkan orang untuk bekerja sama dalam proyek visual. Karena berbasis cloud, pengguna dapat terus bekerja dari komputer atau perangkat apa pun dengan koneksi internet, di mana pun dan kapanpun. Selain itu, pemilik proyek dapat memberikan akses yang berbeda ke anggota tim yang berbeda sehingga setiap orang dapat melihat […]<\/p>\n","protected":false},"author":6,"featured_media":2564,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[288],"tags":[225,301,293,304,307,306,76,212,257],"class_list":{"0":"post-2746","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorial-figma","8":"tag-figma","9":"tag-figma-design","10":"tag-figma-download","11":"tag-figma-tutorial","12":"tag-figma-ui","13":"tag-figma-website","14":"tag-informational","15":"tag-tips","16":"tag-tutorial-figma"},"_links":{"self":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/comments?post=2746"}],"version-history":[{"count":5,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2746\/revisions"}],"predecessor-version":[{"id":2770,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2746\/revisions\/2770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/media\/2564"}],"wp:attachment":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/media?parent=2746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/categories?post=2746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/tags?post=2746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}