Ekspor kode (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

Apa yang bisa diekspor#

• Satu layar sebagai HTML atau sebagai komponen React.
• Satu proyek penuh sebagai proyek React berisi banyak layar, sudah dirangkai dan bisa diunduh sebagai arsip.

Gayanya memakai Tailwind CSS, dengan tema proyek Anda dinyatakan sebagai design token, sehingga kodenya membawa sistem yang sama dengan kanvas.

Mengekspor satu layar#

1. Pilih layarnya.
2. Ekspor → Kode.
3. Pilih HTML atau React.
4. Salin, atau unduh.

Mengekspor satu proyek penuh#

Ekspor proyek berjalan sebagai tugas latar — ia membuat setiap layar, lalu merangkainya menjadi satu struktur proyek. Proyek lebih besar butuh waktu lebih lama; Anda bisa memantau kemajuannya dan mengunduh saat selesai.

Seperti apa kodenya#

Ini kode front-end sungguhan yang terbaca: markup semantik, kelas utilitas Tailwind, token tema untuk warna dan huruf, dan gambar yang dirujuk lewat URL dari penyimpanan aset proyek Anda.

Dua hal untuk diantisipasi:

• Aset bersifat jarak jauh secara bawaan. Unduh ke repositori Anda sebelum rilis, supaya situs produksi Anda tidak bergantung pada URL aset UXMagic.
• Ini front-end. Tidak ada lapisan data, perutean, atau pengelolaan state — Anda yang menyambungkannya ke aplikasi Anda.

Responsif#

Kode hasil ekspor mencerminkan layar yang Anda ekspor, pada lebar layar itu. Kalau Anda membuat varian ponsel dan desktop terpisah, ekspor keduanya dan gabungkan di breakpoint Anda. Lihat Varian responsif dan per perangkat.

Langsung ke repositori#

Anda bisa mengirim kode hasil ekspor langsung ke GitHub alih-alih mengunduhnya — lihat Sinkronisasi GitHub.