Ini dimulai dengan permintaan sistem desain. Tim sistem desain kami diminta untuk menambahkan opsi ukuran yang lebih besar ke komponen tombol yang ada. Setelah melihat ukuran lain, kami dapat mengekstrapolasi ukuran lain, tetapi saya penasaran… “bagaimana perbandingan semua ukuran komponen di seluruh sistem desain kami? Apakah ada aturan universal yang harus kita ikuti untuk menentukan ukuran?”

Sayangnya, jawabannya adalah tidak. Beberapa nilai bersifat umum, tetapi tidak ada yang konsisten. Tidak ada aturan yang berlaku untuk membantu memastikan ukuran, jarak, dan skala yang kohesif di seluruh sistem kami.

Kembali ke dasar

Desain hebat biasanya berakar pada mendapatkan dasar-dasarnya dengan benar. Bagi banyak desainer (seperti saya) tipografi adalah elemen fundamental desain yang paling penting. Kami melihat skala tipe kami untuk melihat bagaimana kami dapat membuat desain proporsional yang diskalakan berdasarkan rasio dan metode umum.

Memperkenalkan Proporsi

Proportio adalah aplikasi web bagi para desainer untuk membuat fondasi sistem desain proporsional. Anda dapat menjelajahi skala tipografi dan bagaimana penerapannya pada ikon, ukuran, spasi, dan komposisi komponen. Dengan sistem desain proporsional, ukuran dan kerapatan komponen sangat mudah.

Menciptakan sistem dasar

Anda mulai dengan menentukan skala tipe Anda, yang akan digunakan untuk sebagian besar sistem Anda yang lain. Ukuran font dasar digunakan, bersama dengan faktor skala seperti sepertiga minor (1:1.125). Setiap ukuran font lainnya didasarkan pada rasio ini.

Ukuran ikon secara otomatis berdasarkan skala tipe, karena tipografi dan pemasangan ikon adalah elemen umum dan penting dalam sistem desain.

Penspasian teks-ke-ikon juga proporsional, berdasarkan skala jenis. Ini memastikan jarak antara mereka relatif dan seimbang. Demikian pula, Anda dapat membuat skala ukuran proporsional, skala radius, dan bahkan skala elevasi (bayangan jatuh).

Sistem komponen

Di sinilah segalanya menjadi sangat menarik.

Setelah Anda memiliki sistem dasar kami, Anda dapat memilih untuk menggunakan skala tipe atau skala jarak kami untuk mengukur bantalan dan ketinggian komponen kami. Komponen berukuran dasar (default) menggunakan ukuran tipe dasar Anda (secara default, 16px).

Anda dapat menambahkan ukuran yang lebih kecil dan lebih besar, yang dibuat di UI berdasarkan peningkatan skala yang Anda pilih.

Anda juga dapat menambahkan opsi yang lebih atau kurang padat. Kepadatan mirip dengan ukuran, meskipun hanya memengaruhi padding dan tinggi komponen — ukuran teks dan ikon tetap sama. Ini juga dihasilkan berdasarkan skala Anda, dan Anda dapat mengubah tingkat pertumbuhan atau penyusutan kepadatan Anda.

Anda dapat mengaktifkan tampilan komponen untuk melihat bagaimana komponen Anda muncul saat hanya ada teks, hanya ikon, atau keduanya. Anda juga dapat mengubah tampilan untuk menampilkan spesifikasi komponen.

Sistem kontainer

Sama seperti sistem komponen, Proportio memungkinkan Anda membuat wadah dengan skala proporsional.

Misalnya, popover bisa berupa wadah kecil (radius sudut kecil dan padding). Wadah yang lebih besar seperti kartu dapat memiliki radius dan bantalan sudut yang lebih besar. Dialog modal dapat dianggap wadah yang lebih besar dan membutuhkan radius sudut paling padding dan terbesar agar terlihat sesuai dalam sistem antarmuka.

Menggunakan sistem proporsional yang sama, Anda dapat membuat kontainer dengan padding berskala, radius berskala, dan bahkan elevasi (jika perlu).

Mengekspor nilai

Setelah Anda membuat sistem yang ingin digunakan, sistem tersebut dapat diekspor sebagai Token Desain (format draf W3C) atau sebagai variabel CSS. Ini membuatnya lebih mudah untuk menyerahkan sistem Anda kepada para insinyur.

Saat ini, tidak ada cara untuk menarik nilai ini langsung ke Figma . Jadi dalam kondisi saat ini, ini lebih berguna sebagai prototipe untuk menentukan apa yang ingin Anda gunakan di sistem Anda, daripada "alat desain" yang sebenarnya. Namun demikian, fitur ini dapat ditambahkan jika Anda merasa ingin, karena Proportio adalah alat open source.

Sumber terbuka

Proportio adalah proyek sumber terbuka . Saya sangat percaya dalam memberikan kembali kepada komunitas sistem desain untuk membantu berbagi atau memprovokasi ide-ide baru sehingga kita semua dapat tumbuh bersama.

Alat ini masih dalam masa pertumbuhan, tetapi ada fitur tambahan yang sedang dikerjakan untuk membantu Anda memanfaatkan Proportio dengan sebaik-baiknya untuk desain dan pengembangan.