{"id":2681,"date":"2022-09-08T14:09:47","date_gmt":"2022-09-08T07:09:47","guid":{"rendered":"https:\/\/mez.ink\/blog\/blog\/?p=2681"},"modified":"2022-09-08T14:15:15","modified_gmt":"2022-09-08T07:15:15","slug":"export-figma-design-ke-html-css","status":"publish","type":"post","link":"https:\/\/mez.ink\/blog\/export-figma-design-ke-html-css\/","title":{"rendered":"Tutorial Figma: Cara Convert Figma Design ke HTML &#038; CSS"},"content":{"rendered":"\n<p>Figma adalah tool design yang sangat bagus untuk membuat prototipe situs web, tetapi tanpa kode, kamu tidak dapat mengubah desainmu menjadi situs web fungsional. Untungnya, ada plugin Figma yang dapat membantu kamu dalam mengubah desain kamu menjadi kode HTML, CSS, dan React yang dapat digunakan dan diberikan kepada website developer untuk dikembangkan lebih lanjut. Mezink akan membahas tentang cara convert figma design kamu menjadi HTML &amp; CSS menggunakan plugin. Figma memiliki berbagai macam <a href=\"https:\/\/mez.ink\/blog\/blog\/10-plugin-figma-yang-wajib-dimiliki-ui-ux-designer\/\">plugin yang dapat digunakan oleh designer<\/a>, namun kali ini kita akan menggunakan pxCode. Untuk lebih lengkapnya, simak penjelasan berikut ini.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Convert Figma Design Ke HTML &amp; CSS Menggunakan Plugin pxCode<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#1 <\/strong><\/h3>\n\n\n\n<p>Install pxCode terlebih dahulu <a href=\"https:\/\/www.figma.com\/community\/plugin\/946962210053893234\/Figma-to-HTML%2FReact-by-pxCode---Responsive-HTML%2C-React-%26-WordPress-Support\">disini<\/a>. Plugin pxCode (dan plugin Figma-to-HTML apa pun) dapat menampilkan dan mengekspor kode proyek design kamu, tetapi kamu memerlukan lebih dari itu untuk membuat situs web yang fungsional.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/pxcode-1-1024x499.png\" alt=\"\" class=\"wp-image-2688\" width=\"638\" height=\"302\"\/><\/figure>\n\n\n\n<p>Mengekspor kode dari Figma dapat membantu developer membangun situs dari prototipe Figma design menjadi user interface, tetapi kamu masih memerlukan bantuan darti website developer untuk mengubah kode itu menjadi situs web responsif yang dapat digunakan. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#2 <\/strong><\/h3>\n\n\n\n<p>Pada Design kamu, <strong>buka plugin pxCode. <\/strong>&nbsp;Untuk melakukan ini, klik menu Figma (ikon &#8220;F&#8221; di sudut kiri atas Figma), pilih <strong>Plugin<\/strong>, lalu klik plugin <strong>pxCode<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/run-plugin-1.png\" alt=\"\" class=\"wp-image-2689\" width=\"319\" height=\"316\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#3<\/strong><\/h3>\n\n\n\n<p><strong>Buat akun. <\/strong>&nbsp;kamu memerlukan akun untuk menggunakan pxCode, jadi klik <strong>Start<\/strong> di kanan atas untuk membuat akun sekarang.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/buat-akun-1.png\" alt=\"\" class=\"wp-image-2690\" width=\"456\" height=\"299\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#4<\/strong> <\/h3>\n\n\n\n<p>Setelah membuat akun, kamu bisa kembali ke Figma. Klik tombol <strong>Export All Frame\/Artboard<\/strong>. Lalu, file .pxcode untuk proyek kamu akan terunduh.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/export-all-1.png\" alt=\"\" class=\"wp-image-2691\" width=\"500\" height=\"328\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#5<\/strong><\/h3>\n\n\n\n<p><strong>Buka <\/strong><a href=\"https:\/\/www.pxcode.io\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>https:\/\/www.pxcode.io<\/strong><\/a><strong> di browser web kamu.<\/strong> &nbsp;Sekarang setelah kamu memiliki file yang diperlukan dari plugin, kamu dapat mengimpornya ke pxCode. Kamu akan diperlihatkan contoh desain website di mana kamu akan menemukan tutorial untuk mengubah desainmu sendiri menjadi kode responsif. Kamu bisa menonton video terlebih dahulu atau langsung skip saja.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/tutor-1-1024x503.png\" alt=\"\" class=\"wp-image-2692\" width=\"549\" height=\"264\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#6<\/strong> <\/h3>\n\n\n\n<p><strong>Unggah file .pxcode ke pxCode. <\/strong>&nbsp;Setelah kamu menonton video yang tersedia, kamu akan mengetahui cara menambahkan kode kamu sendiri, yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Upload file .<\/strong>pxcode kamu dengan mengklik <strong>Upload design<\/strong> dibagian kiri atas laman<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/upload-design-1024x474.png\" alt=\"\" class=\"wp-image-2693\" width=\"591\" height=\"269\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Seret file <strong>.pxcode<\/strong> ke kotak drag, atau klik kotak untuk memilih file.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/drag.png\" alt=\"\" class=\"wp-image-2694\" width=\"552\" height=\"358\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Klik <strong>Create Project<\/strong>. Setelah dibuat, kamu akan diarahkan ke halaman lessons.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/create.png\" alt=\"\" class=\"wp-image-2695\" width=\"543\" height=\"396\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Tonton dan kerjakan terlebih dahulu lessons yang disediakan. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/lesson-1024x474.png\" alt=\"\" class=\"wp-image-2696\" width=\"561\" height=\"255\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Jika kamu tidak mau, kamu bisa skip lesson ini dengan cara membuka lesson, <strong>skip video sampai akhir video<\/strong>, buka <strong>version history<\/strong>, lalu buka saja <strong>completed file<\/strong> latihan pada lesson tersebut. Ulangi sampai lesson habis.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/skip-1024x491.png\" alt=\"\" class=\"wp-image-2697\" width=\"584\" height=\"275\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Setelah semua lessons selesai, kembali ke halaman semula dan klik proyekmu dengan mengklik <strong>Start with your design<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/start.png\" alt=\"\" class=\"wp-image-2698\" width=\"527\" height=\"315\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/start-300x180.png 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/start-150x90.png 150w\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#7<\/strong><\/h3>\n\n\n\n<p><strong>Convert Figma design kamu. <\/strong>&nbsp;Sekarang setelah kamu mengunggah file .pxcode, kamu harus mengubahnya menjadi format yang dapat diedit\/diekspor. Begini caranya:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Klik <strong>Create a Page\/ Screen<\/strong>.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Masukkan nama proyek sehingga kamu dapat dengan mudah mengidentifikasinya di proyek kamu, lalu klik <strong>Create<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/Screenshot_35-1024x484.png\" alt=\"\" class=\"wp-image-2699\" width=\"604\" height=\"281\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#8<\/strong> <\/h3>\n\n\n\n<p>Tampilan Editor akan muncul. Kamu cukup mengekspor kode yang ada tanpa membuat perubahan, tetapi kamu juga dapat menyempurnakan kode dengan mengeditnya sebelum mengekspor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/EDITOR-1024x482.png\" alt=\"\" class=\"wp-image-2700\" width=\"622\" height=\"289\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#9<\/strong><\/h3>\n\n\n\n<p>Klik tombol Export Code yang ada di sudut kanan atas proyek kamu. Setelah beberapa saat, kamu akan melihat tampilan layar Code Export.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"213\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/EXPORT-CODE.png\" alt=\"\" class=\"wp-image-2701\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/EXPORT-CODE.png 497w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/EXPORT-CODE-300x129.png 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/EXPORT-CODE-150x64.png 150w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#10<\/strong><\/h3>\n\n\n\n<p>Klik <strong>HTML<\/strong> pada tab kedua di bagian atas. Sekarang kamu akan melihat HTML untuk figma design kamu.&nbsp; Untuk menyimpan kode ke komputer kamu, klik <strong>Download<\/strong> di bagian atas. Atau, untuk menyalinnya ke editor kamu, cukup klik <strong>Copy<\/strong> untuk menyalinnya ke clipboard kamu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/PILIH-1024x485.png\" alt=\"\" class=\"wp-image-2702\" width=\"602\" height=\"281\"\/><\/figure>\n\n\n\n<p>Mengunduh kode akan membuat file ZIP yang berisi semua CSS dan aset, termasuk gambar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"180\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/PXCODE-HASIL.png\" alt=\"\" class=\"wp-image-2703\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/PXCODE-HASIL.png 502w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/PXCODE-HASIL-300x108.png 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/PXCODE-HASIL-150x54.png 150w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Mengembangkan HTML &amp; CSS Figma Design Kamu Menjadi Website Responsif<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2022\/09\/technology-gb7077bb1d_640.jpg\" alt=\"\" class=\"wp-image-2704\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/technology-gb7077bb1d_640.jpg 640w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/technology-gb7077bb1d_640-300x169.jpg 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2022\/09\/technology-gb7077bb1d_640-150x84.jpg 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>Jika kamu bekerja sebagai UI\/UX Designer, maka bukan tugasmu untuk mengembangkan file HTML &amp; CSS figma design kamu menjadi website yang responsif, kamu dapat mengandalkan front-end dan back-end developer di tim kamu untuk melakukannya. Tugas UI\/UX Designer hanyalah membuat tampilan aplikasi dan website yang memudahkan pengguna dalam pengaksesannya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kesimpulan<\/strong><\/h2>\n\n\n\n<p>Itulah pembahasan tutorial figma kali ini tentang cara convert figma design ke HTML &amp; CSS menggunakan plugin pxCode. Semoga dapat membantu kamu dalam menggunakan figma sebagai tool design. Kamu dapat membaca <a href=\"https:\/\/mez.ink\/blog\/blog\/category\/tutorial-figma\/\">tutorial figma<\/a> lainnya di <a href=\"https:\/\/mez.ink\/blog\/blog\/\">blog Mezink.<\/a> Semoga Bermanfaat!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/qrgo.page.link\/7YgUS\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"337\" src=\"https:\/\/mez.ink\/blog\/blog\/wp-content\/uploads\/2021\/12\/Jadi-YouTuber-Terkenal-Dengan-Mezink.jpg\" alt=\"Jadi YouTuber Terkenal Dengan Mezink\" class=\"wp-image-755\" srcset=\"https:\/\/mez.ink\/blog\/wp-content\/uploads\/2021\/12\/Jadi-YouTuber-Terkenal-Dengan-Mezink.jpg 600w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2021\/12\/Jadi-YouTuber-Terkenal-Dengan-Mezink-300x169.jpg 300w, https:\/\/mez.ink\/blog\/wp-content\/uploads\/2021\/12\/Jadi-YouTuber-Terkenal-Dengan-Mezink-150x84.jpg 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Figma adalah tool design yang sangat bagus untuk membuat prototipe situs web, tetapi tanpa kode, kamu tidak dapat mengubah desainmu menjadi situs web fungsional. Untungnya, ada plugin Figma yang dapat membantu kamu dalam mengubah desain kamu menjadi kode HTML, CSS, dan React yang dapat digunakan dan diberikan kepada website developer untuk dikembangkan lebih lanjut. Mezink [&hellip;]<\/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,76,212,257],"class_list":{"0":"post-2681","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-informational","12":"tag-tips","13":"tag-tutorial-figma"},"_links":{"self":[{"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2681","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=2681"}],"version-history":[{"count":3,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2681\/revisions"}],"predecessor-version":[{"id":2708,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/posts\/2681\/revisions\/2708"}],"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=2681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/categories?post=2681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mez.ink\/blog\/wp-json\/wp\/v2\/tags?post=2681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}