BERITA PROGRAMMING Cara Mudah Mengubah Prototype Figma Menjadi HTML

Cara Mudah Mengubah Prototype Figma Menjadi HTML

Oleh Ryan Machfudin | Rabu, 31 Agustus 2022

Cara Mudah Mengubah Prototype Figma Menjadi HTML

Artikel ini merupakan kontribusi dari peserta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab. Yuk simak tutorial dari Kak Ryan Machfudin tentang cara mengubah prototype Figma menjadi HTML.

Aktivitas di kantor membosankan?
Karyawan engangement kurang?
GAMIFIKASI-IN aja!

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Daftar Isi Artikel

Figma merupakan aplikasi berbasis web untuk mendesign User Interface (UI) dan User Experience (UX) yang dapat digunakan untuk membuat kerangka atau prototype untuk tampilan website, aplikasi, serta berbagai macam komponen untuk landasan yang membutuhkan pembuatan UI/UX.

Jika kamu sering melihat atau mencari referensi di Dribbble, Behance, dan sejenisnya, kamu pasti akan sering menemukan prototype yang sudah jadi, misalnya design landing page, aplikasi, atau komponen lainnya. Kebanyakan dari mereka memakai Figma.

Sebenarnya banyak kok software yang serupa dengan Figma, misalnya Adobe XD dan Sketch. Selain itu, Figma juga banyak digunakan oleh designer di berbagai negara. Selain karena fitur yang lengkap, Figma juga memiliki banyak plugin yang sangat efektif dalam mempermudah pekerjaan dan bisa mempercepat alur kerja.

Bahkan, Figma juga telah digunakan oleh banyak perusahaan besar seperti Slack, Twiiter, Zoom, dan Dropbox. Dari sini kita bisa melihat bahwa Figma ini sangat powerful dan efisien untuk mengerjakan sesuatu yang berkaitan dengan UI/UX.

Nah setelah mengetahui apa itu Figma, saatnya kita balik lagi ke pembahasan utama artikel ini, yakni bagaimana mengubah file prototype Figma menjadi HTML? Yuk simak artikel ini sampai habis.

Baca Juga : Jenis Kerja Web Development, Banyak Dicari oleh Industri IT!

Cara Menjadikan Prototype Figma ke HTML

Nah pertama kalian harus siapin hasil file prototype yang sudah jadi.  Di sini saya hanya menyiapkan contoh landing page yang akan saya jadikan ke HTML. Perlu diperhatikan bahwa saya menggunakan Figma ini di Windows ya, jadi mungkin caranya berbeda dengan sistem operasi lain seperti Mac OS atau Linux.

1. Buka prototype Figma

Buka protoype Figma kalian seperti di bawah ini.Tampilan Figma

2. Klik Main Menu

Ketika tampilan Figma sudah seperti gambar di atas, maka klik icon main menu seperti yang ditandai oleh kotak merah di bawah ini.Toolbar Figma

3. Install Plugin Anima

Selanjutnya akan muncul dropdown list seperti gambar di bawah ini. Arahkan mouse kalian dan klik Plugins > Find more plugins. Di sini kita akan mencari plugin Anima untuk menjadikan prototype landing page kalian ke HTML. Setelah itu, klik plugin Anima dan klik install.

Oh ya, di sini posisinya saya sudah menginstall plugin Anima.

Langkah Install Anima

Detail Plugin Anima

4. Membuat dan Login Akun Anima

Setelah install Anima, kalian tinggal klik icon seperti di langkah ke-3 Plugins > Anima, setelah itu akan muncul pop-up seperti gambar di bawah ini. 

Pop-up AnimaKalian harus bikin akun terlebih dahulu sebelum menggunakan plugin Anima. Caranya gampang kok. Cukup registrasi seperti biasa, seperti saat kita membuat akun Google atau akun-akun lainnya. Setelah registrasi, klik login. Kalian akan diarahkan ke browser buat otentikasi akun Anima kalian.

5. Mengubah Prototype Figma Menjadi HTML

Setelah kalian berhasil login, berikutnya adalah mengubah prototype Figma menjadi HTML.  Caranya, klik layer yang ingin kalian jadikan HTML, setelah itu kalian klik preview untuk melihat apakah sudah sesuai dengan yang kalian mau. Contohnya seperti video di bawah ini:

6. Dapatkan Kode

Jika hasilnya sudah sesuai dengan yang kalian mau, selanjutnya klik tombol get code, dan akan muncul pop-up seperti gambar di bawah ini:

Pop-up Anima

7. Install Ekstensi Blackbox

Kalian bisa klik HTML untuk mendapatkan kode HTML, dan tunggu prosesnya sampai selesai. Setelah selesai, browser akan membuka tab baru. Untuk mengambil hasil HTML tanpa harus upgrade akun Anima, kalian perlu menginstall extensi Blackbox di Google Chrome Store. 

8. Login ke Blackbox

Setelah install extensi Blackbox, kalian harus login ke Blackbox menggunakan akun Google. Setelah login, lebarkan layar code ke atas untuk mempermudah kalian mengcopy kode HTML, CSS, dan Javascriptnya seperti gambar di bawah ini.

Hasil HTML

9. Gunakan Ekstensi Blackbox

Setelah layar kode kalian seperti gambar di atas, kalian klik ikon ekstensi Blackbox-nya dan ikon mouse kalian akan menjadi seperti gambar yang kedua di bawah ini.

Extensi Blackbox

Ikon Mouse Berubah

10. Salin dan Tempel

Setelah ikon mouse kalian berubah, kalian bisa mengcopy HTML-nya dengan cara mengarahkan mouse dan tarik seperti gambar di bawah ini.

Area yang dicopy oleh Blackbox

11. Hasil Kode

Setelah itu kodenya akan tersalin, dan hasilnya seperti gambar di bawah ini:

Hasil kode yang tersalin

12. Ulangi Langkah untuk CSS dan Javascript

Ulangi langkah di atas untuk menyalin CSS dan Javascript. Lalu untuk asset-assetnya gimana? Nah buat asset foto-fotonya seperti tanda panah dan foto yang lainnya, kalian tinggal arahin mouse ke gambar atau asset yang ingin kalian simpan. Caranya klik kanan > simpan gambar sebagai > tentukan lokasi penyimpanan. Kalian juga bisa download asset tersebut dalam bentuk png seperti gambar dibawah ini.

Download AssetSelesai. Kalian tinggal atur dan sesuaikan source assetnya.

Demikian pembahasan cara menjadikan prototype Figma menjadi HTML. Saya harap artikel ini dapat membantu kalian dalam mempercepat kerjaan untuk menjadikan landing page dari Figma ke HTML.

Oh ya, jika ingin belajar lebih lanjut tentang Figma, kalian bisa belajar di kelas Belajar Desain UI/UX dan Membuat Prototype Aplikasi dari Gamelab. Di kelas ini, kamu akan mendapatkan materi yang super lengkap seputar desain UI/UX dan membuat prototype aplikasi.


Ryan Machfudin

Ryan Machfudin

Rabu, 31 Agustus 2022

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI