Sistem desain seluler baru kami untuk iOS dan Android – Beragampengetahuan

Memberikan pengalaman seluler yang konsisten adalah sulit.

Aplikasi seluler terkadang terasa terfragmentasi karena perbedaan bahasa desain iOS dan Android, versi komponen asli yang berbeda, dan bahasa desain beragampengetahuan sendiri. Desainer dan pengembang akhirnya menggunakan bahasa yang berbeda, menduplikasi pekerjaan, dan memberikan pengalaman yang tidak konsisten pada platform yang berbeda.

Di beragampengetahuan, kami pasti merasakan gesekan ini. Alur kerja desain seluler kami tidak seefisien yang seharusnya. Kami menghabiskan terlalu banyak waktu untuk menciptakan kembali roda, mengumpulkan tangkapan layar secara manual, dan mengejar lawan aplikasi web kami. Kami tahu kami membutuhkan cara yang lebih baik.

Jadi kami membangunnya.

Bertemu 🍿 Bawa pulang popcorn

beragampengetahuan adalah sistem desain seluler baru untuk iOS dan Android. Ini adalah jawaban kami terhadap kekacauan ini, dan baru saja lulus ujian besar pertamanya: membantu kami mengirimkan aplikasi iOS menggunakan bahasa desain Liquid Glass baru Apple saat iOS 26 diluncurkan pada September 2025.

Mari kita gali lebih dalam. 🍿

mengapa kami membangunnya

Sebelum Popcorn To Go, proses pengembangan seluler kami mengalami beberapa titik hambatan yang menyakitkan:

• Komunikasi yang buruk antara desain dan teknik. Tanpa bahasa desain bersama, handoff bisa menjadi lambat dan rawan kesalahan. Aplikasi iOS kami memiliki lebih dari 300 warna, sebagian besar memiliki corak yang sedikit berbeda dengan warna yang sama. Tidak ada sumber kebenaran.
• Keputusan desain dibuat dengan cepat. Tanpa sumber kebenaran, para insinyur dibiarkan berimprovisasi dan membuat keputusan desain sambil lalu agar segala sesuatunya berjalan lancar.
• Antarmuka pengguna tidak konsisten dan tidak dapat diakses. Ada perbedaan halus antar platform dan bahkan antara layar berbeda pada platform yang sama. Aplikasi kami tidak terasa sempurna, dan kami tidak memanfaatkan sepenuhnya fitur aksesibilitas yang ada di komponen asli.
• Tampilan dan nuansa kuno. Ketika semua hal ini menumpuk, semakin sulit untuk mengadopsi komponen asli terbaru atau membuat perubahan pada keseluruhan tampilan dan nuansa beragampengetahuan.

Masalah-masalah ini mulai menghambat kami. Visi kami untuk Popcorn To Go sederhana saja: menciptakan sistem yang memberikan efisiensi, konsistensi, aksesibilitas, dan masa depan tanpa mengorbankan fitur dan manfaat unik yang diberikan komponen asli kepada tim mobile kecil seperti kami.

Popcorn To Go Tujuan

Kami telah menetapkan empat tujuan yang jelas:

1. Efisiensi tim teknik dan desain Melalui komponen standar dan penggunaan komponen platform asli secara cerdas.
2. bahasa desain terpadu Kurangi miskomunikasi dan ulangi lebih cepat.
3. Fitur aksesibilitas sudah ada di dalamnya Dengan mewarisi praktik terbaik komponen asli iOS dan Android.
4. Bersiaplah untuk evolusi platformseperti Liquid Glass di iOS 26, sehingga kami dapat bergerak cepat saat platform berubah.

cara kerjanya

Pada intinya, Popcorn To Go dibangun berdasarkan dua konsep utama: Token Dan paket komponen.

Token adalah keputusan desain yang menentukan bahasa visual—seperti warna, spasi, tipografi, dan radius batas. Anggap saja sebagai bahan dalam resep. Daripada melakukan hardcoding “gunakan merek hijau #8FC67D” kami mendefinisikan token seperti ini fill-brand Secara otomatis beradaptasi dengan mode terang, mode gelap, dan platform berbeda. Ini berarti kecil kemungkinan terjadinya kesalahan warna pada setiap saat.

paket komponen adalah blok penyusun UI bawaan (tombol, kartu, bilah navigasi) yang menggunakan token ini. Mereka ada di Figma untuk para desainer dan diimplementasikan dalam kode untuk para insinyur, menciptakan sumber kebenaran bersama.

Bagian yang sulit? keseimbangan kekhususan platform Dan Konsistensi lintas platform.

iOS dan Android memiliki bahasa desainnya sendiri: Pedoman Antarmuka Manusia Apple dan Desain Material Google. Kami tidak ingin meratakan segala sesuatunya ke dalam pengalaman “persamaan terendah” yang umum. Sebaliknya, Popcorn To Go menghormati pola asli setiap platform sambil mempertahankan nuansa beragampengetahuan yang kohesif.

Pendekatan ini memiliki keuntungan: kami dapat menggunakan komponen siap pakai yang telah diuji ketahanannya untuk platform asli dalam hal aksesibilitas dan kompatibilitas lintas perangkat—sebuah aset besar bagi tim teknisi seluler yang terdiri dari dua orang.

Inilah cara kami membangunnya di Figma:

Hubungan markup antara file Figma di sistem desain web dan seluler

• Ponsel/gaya: Lapisan dasar kami menampilkan warna asli dan token khusus platform. Kami menggunakan penamaan Material 3 untuk Android dan penamaan khusus untuk Apple. Warna asli mencerminkan warna di aplikasi web kita.
• Seluler/Android M3: Komponen yang dibuat menggunakan bahasa Ekspresif Google Material 3, sepenuhnya ditautkan ke token Android kami.
• Seluler/iOS dan iPadOS 26: Komponen asli iOS 26 menggunakan bahasa desain Liquid Glass Apple dan terikat dengan token Apple kami.
• Seluler/iOS dan iPadOS 18: Ketuk Kit untuk versi iOS sebelumnya (karena kami mendukung satu versi).
• Komponen seluler/kustom: Komponen khusus beragampengetahuan yang tidak ada secara asli di platform mana pun.

Tantangan Operasi Desain yang Kami Selesaikan

Membuat sistem ini berfungsi dengan lancar berarti memecahkan beberapa tantangan operasi desain yang sulit:

• Tautan Figma: Tantangan terbesar yang kami hadapi adalah menghubungkan primitif. Idealnya, warna asli akan datang langsung dari Popcorn, sistem desain utama kami, dan Popcorn To Go hanya akan memetakan warna tersebut ke markup khusus Android atau Apple. Namun, rangkaian fitur Figma saat ini tidak mendukung hal ini. Kita harus membuat file primitif baru untuk Popcorn To Go, yang secara manual mencerminkan primitif jaringan.

• Penamaan token: Membuat sistem penamaan di Web, iOS, dan Android yang agak disederhanakan dengan tetap menghormati konvensi khusus platform.

• Bentuk perlengkapan: Terapkan token kami ke paket khusus platform sambil menjaga fleksibilitas untuk pembaruan di masa mendatang. Ini memerlukan penggunaan beberapa plugin praktis, seperti Figma Tokens dan Variables Importer.

Jujur saja, ini bukanlah sistem yang sempurna, terhubung dengan lancar, dan berjalan lancar yang diimpikan setiap desainer saat membangun sistem desain.

Rangkaian komponen Apple sangat rumit dan terkadang tidak konsisten, sedangkan penamaan token Android sangat spesifik dan rumit. Namun kami menemukan solusi pragmatis yang berfungsi untuk penggunaan sehari-hari dan mencapai tujuan yang ingin kami capai.

Waktu yang strategis: pengujian iOS 26

Kami secara khusus meluncurkan Popcorn To Go. iOS 26 akan segera hadir, menghadirkan bahasa desain Liquid Glass baru dari Apple: efek kaca buram, animasi yang disempurnakan, dan visual yang ditingkatkan menghadirkan estetika yang segar dan modern.

Dengan membuat Popcorn To Go maju Setelah rilis iOS 26, posisi kami adalah:

• Bersiaplah sejak hari pertama Saat iOS 26 turun
• Manfaatkan fitur platform terbaru langsung
• Memberikan penyegaran visual pada aplikasi kita Maksimalkan pengaruh dengan bahasa desain baru Apple.

Itu berhasil. Saat iOS 26 diluncurkan pada bulan September, kami akan siap. Aplikasi iOS kami yang diperbarui hadir dengan Liquid Glass Dan Estetika merek beragampengetahuan yang diperbarui menghadirkan pengalaman modern dan halus yang terasa asli pada platform, dengan tetap mempertahankan gaya unik beragampengetahuan.

apa selanjutnya

Popcorn To Go sudah aktif dan berjalan, tapi kami baru saja memulai. Inilah yang ada di peta jalan:

jangka pendek:

• Tersedia untuk Android dan disempurnakan berdasarkan masukan dari kedua platform.
• Perluas cakupan tanda melampaui warna (skala jarak, radius batas, skala tipografi).
• Tingkatkan kemampuan untuk ditemukan melalui dokumentasi yang lebih baik.

Jangka menengah:

• Bangun pustaka komponen khusus kami menggunakan pola khusus beragampengetahuan.
• Buat panduan penggunaan yang komprehensif untuk sistem.
• Ketika iOS dan Android terus melakukan iterasi, pembaruan platform terus berkembang.

panjang:

• Ikuti perkembangan platform (iOS 27 dan yang lebih baru, pembaruan Desain Material, dll.).
• Jelajahi peluang untuk mengembalikan pembelajaran Anda ke Popcorn, sistem desain web kami.

mengapa ini penting

untuk kita desainer dan insinyurPopcorn To Go berarti kolaborasi yang lebih lancar, pembuatan prototipe lebih cepat, dan lebih sedikit waktu yang dihabiskan untuk pekerjaan berulang. Tim dapat fokus pada pemecahan masalah yang lebih kompleks dan membangun pengalaman yang lebih baik, daripada terobsesi dengan warna mana yang akan digunakan.

untuk pengguna penyanggayang berarti aplikasi yang lebih sempurna, konsisten, dan mudah diakses. Ketika sistem desain bekerja dengan baik, pengguna mungkin tidak menyadarinya – tetapi mereka melakukannya Merasa dia. Interaksi lebih lancar, antarmuka pengguna lebih mudah diprediksi, dan semuanya berjalan lebih baik.

menaikkan standar

Menciptakan Pengiriman Popcorn bukan hanya tentang memecahkan masalah saat ini, namun juga tentang mempersiapkan masa depan.

Platform seluler terus berkembang. Pergeseran tren desain. Ekspektasi pengguna meningkat. Dengan berinvestasi pada landasan yang kokoh sekarang, kami dapat lebih mudah mengimbangi, memberikan hasil lebih cepat, dan mempertahankan kualitas seiring pertumbuhan kami.

Proyek ini benar-benar merupakan upaya tim: desainer, insinyur iOS, insinyur Android, dan pemimpin produk semuanya bekerja sama untuk mewujudkan hal ini. Pekerjaan semacam ini tidak selalu mendapat sorotan, namun itulah yang memungkinkan kami membangun segalanya.

Kami bangga dengan semua yang telah kami ciptakan dan bersemangat untuk mengembangkannya. Jika Anda ingin melihat Popcorn To Go beraksi, unduh aplikasi iOS kami dan cobalah pengalaman Liquid Glass yang baru.

Tidak menggunakan perangkat Apple? Harap diperhatikan bahwa Popcorn To Go akan segera hadir di Android!

Hal ini untuk kolaborasi yang lebih lancar, aplikasi yang lebih baik, dan konsistensi yang lebih baik di tengah kekacauan. 🍿