Export Figma to React
Figma merupakan sebuah software berbasis cloud yang dapat digunakan kapanpun dan dimanapun melalui internet. Software ini sudah banyak digunakan oleh perusahaan-perusahaan untuk membuat desain website karena mempunyai fitur dan plugin yang dapat dengan mudah digunakan.
GDIS pun berkesempatan untuk melakukan eksplorasi dan mencoba beberapa fitur Figma untuk membuat ulang desain project yang sudah dibuat sebelumnya.
Dari beberapa plugins yang di coba, ada suatu plugin yang menarik yaitu Figma to React. Figma to React pada dasarnya adalah meng-export desain dari bentuk Figma ke bentuk codingan React.
Unify
Unify merupakan plugin Figma yang dapat meng-export desain Figma ke dalam bentuk React, HTML, dan React Native secara gratis. Plugin ini sangat mudah digunakan karena User hanya perlu untuk memilih frame atau component yang ingin di export, kemudian menjalankan plugin Unify. Unify akan secara otomatis membuka halaman baru dan menampilkan hasil export tersebut.
Hasil export ke HTML:
Hasil export ke React:
Hasil export ke React Native:
Kelebihan dari Unify adalah dengan desain yang simpel dan straightforward, sangat memudahkan user untuk menggunakannya.
Kekurangan dari Unify adalah user sebaiknya mengubah penamaan component menjadi lebih mudah dimengerti karena Unify akan langsung meng-export component ke dalam bentuk HTML/React/React Native.
Quest
Quest merupakan salah satu plugin Figma yang juga dapat meng-export component desain Figma ke dalam bentuk React dan NextJS. Kelebihan dari plugin ini adalah Quest compatible dengan library MUI dan juga dapat melakukan setup props, bindings, function, dan features secara langsung.
Props
Bindings
Functions
Features
Hasil export ke JavaScript:
Selain itu, plugin ini juga memiliki tampilan yang simpel sehingga dapat dipahami dengan mudah.
Kekurangan dari Quest adalah plugin ini berbayar (termasuk jika ingin melakukan custom component, maka membutuhkan library MUI for Figma). Selain itu, untuk bisa lebih memahami penggunaan dan fungsi plugin ini dibutuhkan pengetahuan Front-End (untuk pengaturan bindings, function, dll).
Quest Pricing
MUI for Figma Pricing
Conclusion
Beberapa plugins untuk meng-export Figma ke React memiliki kekurangan dan kelebihannya masing-masing, sehingga dapat dipilih yang lebih dapat men-support kebutuhan di tiap project tertentu.