Komponen yang didukung kit UI

[Artikel ini adalah dokumentasi prarilis dan dapat berubah.]

Aplikasi Buat dari KIT UI Figma mendukung komponen tertentu. Dalam artikel ini, Anda akan mempelajari komponen-komponen itu.

Untuk informasi terbaru tentang komponen yang didukung dan untuk melihat contoh rinci, Anda dapat mengunjungi halaman Komponen yang Didukung di dalam Buat Aplikasi dari Kit UI Figma.

Penting

Jangan ganti nama komponen atau ubah layer. Jika tidak, komponen tidak akan mengkonversi properti dalam Power Apps.

Bagian yang dapat digulir

Bagian yang dapat digulir adalah bagian pada layar. Jika konten melampaui bagian tersebut, konten akan tetap dapat diakses saat pengguna menggulir.

Bagian yang dapat digulir di dalam kit UI tersedia dalam dua format berbeda: ponsel, dan Tablet.

Formulir

Gunakan bagian Formulir bila Anda ingin agar pengguna mengisi bidang dan mengirimkan data.

Pada Power Apps, bagian ini akan dapat di-scroll.

• Tempatkan hanya komponen kartu data vertikal atau horizontal pada bagian formulir.
• Jangan gabungkan dan cocokkan kartu data vertikal dan horizontal.
• Jangan gunakan komponen dasar dalam frame formulir.

Kontainer (vertikal)

Gunakan bagian kontainer (vertikal) bila Anda ingin konten di-scroll. Contohnya, jika Anda memerlukan bagian dari konten penjelasan yang panjang.

Tip

Anda juga dapat menambahkan formulir kecil di dalam bagian kontainer (vertikal).

• Menggunakan komponen dasar dan formulir dalam frame kontainer.
• Jangan letakkan komponen kartu vertikal atau horizontal di bagian kontainer (vertikal).

Kartu data vertikal dan horizontal

Kartu data vertikal dan horizontal adalah komponen yang menyusun sendiri secara otomatis pada formulir.

Catatan

Pastikan semua kartu data diletakkan langsung di dalam komponen formulir. Kartu data tidak dapat digunakan di luar formulir.

Header dan pembatas

Kotak input teks, menurun, dan kombo

Pengalih, kotak centang, dan radio

Penggeser, peringkat

Date picker

List box

Teks kaya

Pengatur Waktu

Ukuran, status, dan jenis komponen

Ukuran tombol

Status tombol

• Jika Anda menginginkan tombol kisi dengan goresan, atur gorepesan ke tengah di Figma karena Power Apps hanya mengkonversi goresan tengah.

Ukuran label

Catatan

Gunakan hanya satu font dan ukuran font dalam label teks. Jika Anda ingin menggunakan lebih dari satu font atau ukuran font dalam label teks, buat label terpisah dengan variasi tersebut. Selain itu, pastikan teks untuk label tidak membentang di luar kotak batas, atau teks tidak akan dikonversi dengan benar.

Pilih ukuran input

Pilih status input

Pilih jenis input

Ukuran kotak kombo

Status kotak kombo

Ukuran Drop down

Status drop-down

Ukuran kotak centang

Keadaan kotak centang

Ukuran tombol radio

Keadaan tombol radio

Jenis tombol radio

• Simpan semua tombol radio dan teks dengan warna yang sama. Saat mengkonversi ke aplikasi, Power Apps akan menggunakan warna tombol radio pertama untuk semua tombol yang tersisa. Warna lain yang mungkin Anda gunakan tidak akan dikenalinya.

Ukuran tombol pengalih

Status tombol pengalih

Jenis tombol pengalih

Ukuran Pemilih tanggal

status Pemilih tanggal

Jenis Pemilih tanggal

Ukuran slider

status slider

Jenis slider

Ukuran peringkat

status Peringkat

Jenis Peringkat

• Jaga semua bintang memiliki warna yang sama saat merancang di Figma. Saat mengkonversi ke aplikasi, Power Apps akan menggunakan warna bintang pertama untuk semua bintang yang tersisa. Warna lain yang mungkin Anda gunakan tidak akan dikenalinya.

Ukuran kotak daftar

Status kotak Daftar

Jenis kotak daftar

Ukuran Teks Kaya

status Teks Kaya

Ukuran timer

Status timer

Konten yang diabaikan

Gunakan komponen ini untuk membuat catatan, komentar, atau berbagai konten yang tidak perlu ditampilkan dalam aplikasi final. Konten kemudian akan diabaikan saat Anda mengkonversi desain dalam Power Apps.

Gambar dan persegi panjang

Gambar dan persegi panjang akan ditampilkan saat desainnya diubah menjadi aplikasi.

Gambar

Persegi panjang

• Gunakan hanya persegi panjang dengan sudut runcing karena hanya dapat Power Apps mengkonversi persegi panjang dengan sudut runcing. Dalam Figma, ini berarti jari-jari sudut harus diatur ke nol.

Baca juga

• Membuat aplikasi kanvas dari Figma