Beranda UXMagic
  • Fitur
  • Pustaka
  • Komunitas
  • Harga
  • Afiliasi
  • Sumber Daya
Beranda UXMagic
Beranda UXMagic

Pustaka

Komunitas
Harga
Afiliasi

Sumber Daya

Ikuti kami di:
  • Ikuti kami di Slack
  • Ikuti kami di Twitter
  • Ikuti kami di LinkedIn
  • Ikuti kami di YouTube
  • Ikuti kami di Instagram
Pusat Bantuan
  • 🚀Memulai
  • ✨Membuat desain
  • 🎨Mendesain & mengedit
    • Mengedit layar
    • Mengedit lewat obrolan
    • Tema dan panduan gaya
    • Huruf dan tipografi
    • Gambar dalam desain Anda
    • Versi dan riwayat
    • Varian responsif dan per perangkat
    • Pustaka komponen dan sistem desain
  • 📦Ekspor & penyerahan
  • 🌐Menerbitkan situs
  • 🤝Berbagi & berkolaborasi
  • 🔌Integrasi & developer
  • 💳Paket, kredit & penagihan
  • 🛠Pemecahan masalah

Masih buntu?

Tim kami menjawab dari dalam produk.

Hubungi dukungan →
  1. Pusat Bantuan/
  2. Mendesain & mengedit/
  3. Varian responsif dan per perangkat

Varian responsif dan per perangkat

Buat versi ponsel dan desktop dari sebuah layar dan jaga keduanya selaras.

Terakhir diperbarui: 27 Agustus 2026

Di halaman ini

  • Membuat varian
  • Biaya
  • Menjaga varian tetap selaras
  • Tema dipakai bersama
  • Kode hasil ekspor

Membuat varian#

Minta saja, atau pakai kontrol perangkat pada layar:

Buat versi ponsel dari halaman arahan.

Varian itu adalah layar baru di kanvas, disesuaikan dengan lebar tujuan — bukan pengubahan ukuran yang mengalir. Tata letak benar-benar disusun ulang: bagian berkolom banyak menumpuk, navigasi mengecil, tipografi turun skala.

Biaya#

Mengubah layar ke ukuran perangkat lain ditagih per layar dengan tarif sama seperti pembuatan ulang, karena memang begitu. Mengubah delapan layar memakan biaya delapan kali lipat — sebaiknya cek saldo dulu.

Menjaga varian tetap selaras#

Varian adalah layar terpisah, jadi pengeditan belakangan pada versi desktop tidak otomatis mengalir ke versi ponsel. Dua pilihan:

  • Minta perubahan pada keduanya secara eksplisit: “Di halaman arahan desktop dan ponsel, ubah CTA menjadi ‘Mulai gratis’.”
  • Atau selesaikan dulu desain desktop, lalu buat variannya sekali di akhir. Ini biasanya urutan yang lebih murah.

Tema dipakai bersama#

Kedua varian memakai tema proyek, jadi perubahan warna dan huruf otomatis berlaku untuk keduanya. Hanya tata letak yang khas tiap varian.

Kode hasil ekspor#

Kode hasil ekspor mencerminkan layar yang Anda ekspor. Kalau Anda butuh satu implementasi yang benar-benar responsif alih-alih dua tata letak tetap, ekspor layar desktop lalu sesuaikan, atau ekspor keduanya dan gabungkan di breakpoint — lihat Ekspor kode.

Apakah artikel ini membantu?

Artikel terkait

Mengedit layar

Tiga cara mengubah desain — obrolan, mode edit, dan tema — dan kapan masing-masing jadi alat yang tepat.

Tema dan panduan gaya

Cara kerja tema proyek, cara mengubahnya dengan aman, dan mengapa warna tidak boleh diedit layar per layar.

Ekspor kode (HTML, React, Tailwind)

Ekspor satu layar atau satu proyek penuh sebagai kode front-end siap produksi.

← SebelumnyaVersi dan riwayatBerikutnya →Pustaka komponen dan sistem desain

Di halaman ini

  • Membuat varian
  • Biaya
  • Menjaga varian tetap selaras
  • Tema dipakai bersama
  • Kode hasil ekspor

idemu yang berikutnya
layak untuk diwujudkan

berhenti cuma memikirkannya. langsung ketik saja. Berantakan, setengah jadi, apa pun itu. Kami yang akan mengubahnya jadi sesuatu yang nyata.

Produk

  • Komunitas
  • Paket Harga
  • Program Afiliasi
  • UXMagic MCP
  • Claude MCP
  • Info AI

Sumber Daya

  • Pusat Bantuan
  • Pustaka Figma
  • Pustaka React
  • Template Aplikasi Mobile
  • Dokumentasi
  • Tutorial

Fitur

  • Prompt ke UI
  • Gambar ke UI
  • Sketsa ke UI
  • Kloning situs web
  • Impor dari Figma
  • AI Wireframe Generator
  • AI Mockup Generator
  • AI Prototype Generator
  • AI Dashboard Generator
  • Semua Fitur

Bandingkan

  • vs UX Pilot
  • vs Relume
  • vs MagicPath
  • vs Magic Patterns
  • vs Banani
  • vs Galileo AI
  • vs v0
  • vs Lovable
  • vs Base44
  • Semua Kompetitor

Blog

  • AI dalam Alur Kerja Desain UX: Apa yang Benar-Benar Berhasil
  • Template Prompt untuk Dashboard SaaS
  • Prompt Nyata yang Kami Gunakan untuk Membuat Alur Produk
  • Prompt Engineering untuk Desainer UX
  • Alat Wireframing Terbaik 2026: Perbandingan 10 Opsi Gratis & Pro
  • Semua Blog

Perusahaan & Dukungan

  • Karier
  • Hubungi Kami
  • Kebijakan Privasi
  • Ketentuan Penggunaan
  • Pengaturan Cookie
  • Ikuti kami di Slack
  • Ikuti kami di Twitter
  • Ikuti kami di LinkedIn
  • Ikuti kami di YouTube
  • Ikuti kami di Instagram

© 2026 UXMagic AI Technologies Inc.