Device Links
AndroidiPhoneMacWindowsDevice Missing?
Salah satu fitur terbaik Figma adalah memungkinkan Anda dengan cepat mentransfer desain yang Anda buat ke dalam kode. Jika Anda seorang pengembang aplikasi atau bekerja dengan desainer, ini adalah keterampilan yang berharga untuk dipelajari. Dengan bantuan alat bawaan dan banyak plugin, Figma memungkinkan Anda untuk mengekspor desain Anda ke berbagai platform.

Jika Anda ingin mempelajari lebih lanjut tentang mengubah desain Figma Anda menjadi kode, Anda telah datang ke tempat yang tepat. Dalam artikel ini, kita akan membahas cara mengekspor kode di Figma dan alat apa yang perlu Anda gunakan.

Cara Mengekspor Kode di Figma di PC Windows

Jika Anda pengguna Windows dan ingin mengekspor kode di Figma, Anda harus' Saya akan senang mengetahui bahwa Anda dapat menggunakan banyak opsi.

Figma Inspect

Salah satu metode yang dapat Anda gunakan untuk mengekspor kode di Figma adalah Figma Inspect. Fitur ini memungkinkan Anda dengan mudah mengonversi desain ke Android, iOS, atau kode Web. Karena built-in, Anda tidak perlu menginstal plugin atau aplikasi pihak ketiga.

Berikut cara menggunakannya:
Pilih elemen yang Anda minati dan buka tab Inspect.Di bawah bagian "Kode", pilih kode yang ingin Anda ekspor (CSS untuk Web, Swift untuk iOS, atau XML untuk Android).
Alat ini akan menghasilkan kode tergantung pada opsi yang Anda pilih, lalu Anda dapat mengekspornya. Meskipun ini adalah alat yang hebat, ia memiliki beberapa keterbatasan. Yaitu, Anda tidak dapat mengekspor SVG ke HTML. Untuk itu, Anda harus menggunakan plugin.

Figma Plugins

Figma memiliki ratusan plugin yang berguna. Kami akan menyebutkan beberapa yang dapat Anda gunakan untuk mengekspor desain Anda ke HTML.
Figma ke HTML
Plugin memungkinkan Anda untuk mengubah desain Anda menjadi HTML atau CSS, tergantung pada kebutuhan Anda. Ikuti langkah-langkah di bawah ini untuk menginstal plugin dan mengekspor kode:
Akses menu utama dengan menekan ikon di sudut kiri atas. Tekan "Plugins." Tekan "Browse Plugins in Community." Ketik "Figma to HTML" dan pilih "Plugins ” di bagian atas.Tekan “Install.”Kembali ke desain Anda dan pilih elemen yang diinginkan.Kembali ke menu utama, pilih “Plugins,” lalu pilih “Figma to HTML.”Pilih HTML atau CSS.Tekan “Copy ” atau “Unduh”, tergantung kebutuhan Anda. Anima for Figma
Plugin bermanfaat lainnya adalah Anima for Figma. Dengan plugin ini, Anda dapat mengonversi desain Anda menjadi HTML, CSS, React, dan Vue. Ikuti langkah-langkah ini untuk menggunakan plugin:
Buka menu utama dengan memilih ikon kiri atas. Tekan "Plugins." Pilih "Jelajahi Plugin di Komunitas." Ketik "Anima untuk Figma." Tekan "Instal." Pilih elemen yang Anda inginkan untuk mengekspor. Buka menu utama, tekan "Plugins," dan pilih "Anima for Figma." Daftar jika Anda tidak memiliki akun.Pilih jenis kode dan tekan “Ekspor Kode.”
Cara Mengekspor Kode di Figma di Mac

Mengekspor desain Anda ke kode di perangkat Mac dapat dilakukan dengan beberapa cara.

Figma Inspect

Ini built- dalam alat memungkinkan Anda untuk memeriksa dan mengekspor kode dan nilai lain untuk desain Anda. Dengan Figma Inspect, Anda dapat memilih di antara tiga opsi kode: Android, iOS, atau Web (hanya CSS).

Ikuti langkah-langkah di bawah ini untuk menggunakan Figma Inspect di Mac:
Pilih elemen yang ingin Anda ekspor.Buka tab “Inspect” di kanan.Pilih antara CSS, iOS, atau Android.Salin kode Anda.
Jika Anda hanya tertarik pada CSS, iOS, dan Android, ini adalah alat yang sangat baik untuk digunakan. Namun, jika Anda ingin mengekspor desain Anda ke HTML, Anda harus menggunakan metode yang berbeda.

Plugin Figma

Jika Anda ingin mengubah desain Anda menjadi HTML, Figma menawarkan lusinan plugin yang melayani tujuan ini. Proses instalasi sederhana. Kami akan mencantumkan beberapa yang paling populer.
Figma ke HTML
Plugin ini memungkinkan Anda mengonversi desain ke CSS atau HTML. Berikut cara menginstalnya:
Pilih ikon kiri atas untuk membuka menu utama. Tekan "Plugins." Pilih "Jelajahi Plugin di Komunitas." Ketik "Figma ke HTML" di bilah pencarian dan pilih "Plugin" di bagian atas. Tekan "Instal." Kembali ke desain Anda dan pilih elemen yang ingin Anda ekspor. Buka menu utama, pilih "Plugins," lalu pilih "Figma ke HTML." Pilih HTML atau CSS. Tekan "Salin" atau "Unduh. ”Figma ke Code
Dengan plugin ini, Anda dapat mengonversi desain Figma Anda ke HTML, Tailwind, Flutter, atau UI Swift. Ikuti langkah-langkah di bawah ini untuk menginstal dan menggunakannya:
Tekan ikon kiri atas untuk mengakses menu utama. Pilih "Plugins." Tekan "Browse Plugins in Community." Ketik "Figma to Code" di bilah pencarian dan pilih "Plugins" di bagian atas untuk mendapatkan hasil yang relevan.Tekan "Install."Buka desain Anda dan pilih elemen yang diinginkan.Akses menu utama lagi, pilih "Plugins," lalu pilih "Figma to Code."Pilih kode yang diinginkan.Tekan " Salin ke Clipboard.”
Dapatkah Saya Mengekspor Kode dalam Figma di iPhone?

Aplikasi iPhone Figma baru hanya tersedia sebagai versi beta melalui Testflight untuk 10.000 iPhone pertama, tetapi perusahaan menyatakan peluncuran penuh akan segera hadir. Aplikasi ini memungkinkan Anda untuk menelusuri dan mengakses desain Anda dan melacak perubahan langsung di iPhone Anda saat mengedit desain di komputer Anda.

Pada saat itu, tidak mungkin untuk mengedit desain melalui aplikasi iPhone, yang berarti tidak ada cara untuk mengekspor kode melalui itu .

Figma juga menawarkan aplikasi Figma Mirror di App Store. Aplikasi ini memungkinkan Anda untuk mencerminkan desain Anda ke perangkat iOS apa pun tanpa terhubung ke jaringan yang sama. Dengan begitu, Anda dapat memeriksa tampilan desain Anda pada perangkat tertentu (dalam hal ini, iPhone) dan melacak perubahannya. Meskipun berguna, aplikasi ini tidak mengizinkan Anda mengekspor kode di iPhone Anda. Untuk itu, Anda harus mengambil komputer Anda.

Anda juga dapat mengakses desain Anda melalui browser Anda. Namun, Anda tetap hanya dapat melihat desain dan melacak perubahan langsung.

Dapatkah Saya Mengekspor Kode dalam Figma di iPad?

Sayangnya, tidak mungkin mengekspor kode di Figma jika Anda menggunakan iPad. Figma bekerja pada aplikasi seluler, dan ada versi beta, tetapi tidak tersedia untuk tablet, hanya untuk iPhone dan Android.

Aplikasi Figma Mirror tersedia di iPad. Aplikasi ini memungkinkan Anda untuk melacak perubahan yang Anda buat pada desain Anda melalui komputer dan memeriksa tampilannya di layar iPad. Sayangnya, opsi untuk mengekspor kode dalam aplikasi tidak tersedia.

Jika Anda tidak ingin menginstal aplikasi, Anda dapat mengakses Figma melalui browser Anda dan melacak perubahan pada desain. Namun, mengekspor kode di Figma hanya dapat dilakukan di komputer.

Dapatkah Saya Mengekspor Kode di Figma di Android

Figma saat ini bekerja di aplikasi Android dan menawarkan versi beta untuk 10.000 ponsel Android. Anda dapat menjadi penguji dengan mengunduh aplikasi dari Play Store dan mengakses tautan ini. Anda dapat menelusuri, melihat, dan berbagi desain Anda dan melacak perubahan dalam aplikasi bahkan ketika Anda tidak berada di dekat komputer Anda.

Meskipun aplikasi ini berguna untuk banyak tujuan, itu tidak memungkinkan Anda untuk mengekspor kode untuk saat ini.

The Figma Mirror aplikasi juga tersedia untuk Android. Tujuan utamanya adalah untuk melacak perubahan yang Anda buat pada desain di komputer Anda dan memastikannya terlihat bagus di semua perangkat Android. Opsi untuk mengekspor kode tidak tersedia.

Anda juga dapat menggunakan Figma dalam browser Anda jika Anda tidak ingin menginstal aplikasi. Namun, Anda tetap tidak dapat mengekspor kode. Untuk itu, Anda harus menggunakan komputer Anda.

Tanya Jawab Tambahan
Bagaimana cara mengekspor warna dari Figma ke Xcode?


Sayangnya, tidak mungkin mengekspor warna dari Figma ke Xcode karena Figma tidak mendukungnya. Tapi, ada solusi yang bisa Anda gunakan yang disebut Figma Export. Ikuti langkah-langkah di bawah ini untuk menggunakannya:

1. Jika Anda belum melakukannya, instal Figma Export.

2. Buka "Terminal.app."

3. Buka folder dengan file "figma-export".

4. Luncurkan "figma-ekspor."

5. Ekspor warna menggunakan “./figma-export colors -i figma-export.yaml”.

Bagaimana cara mengekspor kode HTML dari Figma?


Seperti yang disebutkan sebelumnya, alat bawaan bernama Figma Inspect memungkinkan Anda untuk mendapatkan CSS, tetapi bukan HTML . Jika Anda memerlukan kode HTML, Anda harus menginstal sebuah plugin.

Figma menampilkan lusinan plugin yang melayani tujuan ini. Rekomendasi kami adalah Figma ke HTML. Berikut cara menggunakannya:

1. Buka menu utama. Ini adalah ikon kiri atas.

2. Tekan “Plugin.”

3. Pilih “Jelajahi Plugin di Komunitas.”

4. Ketik "Figma ke HTML" di bilah pencarian dan pastikan "Plugin" dipilih di bagian atas.

5. Pilih "Instal."

6. Kembali ke desain Anda dan pilih elemen yang ingin Anda konversi ke HTML.

7. Buka menu utama, pilih "Plugins," dan buka "Figma to HTML."

8. Tekan HTML.

9. Pilih antara "Salin" atau "Unduh."


Dapatkan Kode yang Anda Butuhkan

Figma memungkinkan Anda mengekspor berbagai jenis kode menggunakan beberapa metode. Anda dapat menggunakan alat bawaan atau mengunduh plugin yang berbeda, tergantung pada kebutuhan Anda. Untuk saat ini, mengekspor kode hanya dapat dilakukan melalui komputer. Figma merilis versi beta aplikasi seluler (terbatas pada 10.000 perangkat iPhone atau Android), tetapi tidak menampilkan opsi ini. Untungnya, mengekspor kode di komputer cepat dan mudah.

Bagaimana cara mengekspor kode di Figma? Apakah Anda menggunakan salah satu metode yang kami sebutkan di artikel ini? Beri tahu kami di bagian komentar di bawah.