HTML to Figma dengan Builder.io

Figma adalah sebuah alat desain berbasis web yang digunakan untuk membuat desain antarmuka pengguna (UI) dan prototipe interaktif. Dengan Figma, Anda dapat membuat desain yang responsif, berbagi proyek dengan tim, dan berkolaborasi secara real-time. Figma memungkinkan Anda untuk membuat desain yang konsisten dan mudah dikelola melalui penggunaan komponen dan komponen instan.

Salah satu kelebihan utama dari Figma adalah kemampuannya untuk bekerja secara kolaboratif. Anda dapat mengundang anggota tim Anda untuk bergabung dalam proyek dan bekerja bersama dalam waktu yang sama. Hal ini memungkinkan tim untuk memberikan masukan, memberikan komentar, atau melakukan perubahan langsung pada desain tanpa perlu saling mengirim file atau menyinkronkan versi.

Selain itu, Figma juga memiliki fitur prototyping yang memungkinkan Anda membuat tautan antarmuka yang interaktif. Dengan menggunakan fitur ini, Anda dapat membuat simulasi pengalaman pengguna yang lebih dinamis dan melihat bagaimana desain Anda akan berperilaku dalam konteks nyata.

Figma dapat diakses melalui peramban web, sehingga Anda tidak perlu menginstal perangkat lunak khusus. Ini memungkinkan Anda untuk bekerja di berbagai perangkat dan sistem operasi dengan mudah.

Dalam beberapa tahun terakhir, Figma telah menjadi salah satu alat desain yang sangat populer di kalangan desainer UI/UX dan tim pengembang.

Berikut ini beberapa cara mudah bagaimana menggunakan Figma untuk HTML to Figma menggunakan ekstention Builder.io.

Sebelumnya kita perlu memasang extension Builder.io terlebih dahulu pada Chrome.

1.     Buka ‘chrome web store’ atau klik https://chrome.google.com/webstore/category/extensions

2.     Kemudian ketik ‘HTML to Figma’ pada kolom pencarian.

3.     Lalu pilih Builder.io, kemudian klik Add to Chrome.

4.     Untuk memudahkan kita, kita bisa pin Builder.io yang tadi sudah kita pasang tadi.

Selanjutnya kita bisa langsung menggunakannya pada Figma. Berikut langkah-langkah yang bisa digunakan.

1.     Buka web Figma pada figma.com, atau bisa saja menggunakan figma dengan cara mengunduh dahulu aplikasinya sehingga tidak menggunakan melalui website.

2.     Kemudian log in menggunakan akun yang sudah didaftarkan sebelumnya. Jika belum memiliki akun, maka bisa membuat akun terlebih dahulu dengan klik ‘Get started’ menggunakan email seperti pada umumnya kemudian melakukan verifikasi email.

3.     Kemudian jika sudah berhasil log in, klik nama akun kita pada ujung kiri atas, lalu klik ‘Community’.

4.     Pada kolom pencarian, ketik “HTML to Figma” lalu klik menu Plugins.

5.     Banyak pilihan yang bisa kita gunakan sesuai kebutuhan, namun saya kali ini akan menggunakan Buider.io sesuai dengan extension yang tadi saya pasang. Kemudian klik Try it out pada Buider.io.

6.     Klik ‘Run’ untuk mulai menjalankannya.

7.     Pada HTML to Figma menggunakan Builder.io, terdapat 2 cara untuk mengimport design web yang kita inginkan. Yang pertama kita bisa melakukan copy-paste URL dari web yang ingin kita import, dan yang kedua bisa menggunakan import file .json dengan extension yang kita pasang sebelumnya.

8.     Untuk cara pertama, kita bisa langsung saja melakukan copy-paste URL yang kita inginkan.

9.     Lalu klik Import to Figma.

10.  Kemudian tampilan website yang tadi kita copy akan muncul dan bisa kita kembangkan sesuai dengan keinginan kita.

11.  Untuk cara yang kedua menggunakan import file .json, pertama kita buka website yang ingin kita import. Lalu klik pin extension Builder.io.

12.  Kemudian klik ‘Capture Page’, lalu file .json akan terunduh.

13.  Kemudian kembali ke tab Buider.io pada figma, klik ‘here’ pada step 2 untuk Use the Chrome Extension.

14.  Lalu pilih file .json yang sudah terunduh. Kemudian tampilan website yang kita inginkan akan muncul dan bisa kita ubah untuk dikembangkan sesuai keinginan kita.

>><<