Export Figma to React

by | Dec 8, 2022 | Blog, Design

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.

unify_type

Hasil export ke HTML:

html unify
html unify 2

Hasil export ke React:

react unify
react unify 2
react unify 3

Hasil export ke React Native:

react native unify
react native unify 2

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
props
Bindings
bindings
bindings 2
Functions
functions
Features
features
features 2

Hasil export ke JavaScript:

quest JS
quest JS 2
quest JS 3

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
quest pricing
MUI for Figma Pricing
mui for figma

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.