Implementasi Semantic Color di Figma — Design System Series

Mengaplikasikan semantic color dengan figma variable

Photo by Eaters Collective on Unsplash

Seperti yang sudah saya bahas dalam seri sebelumnya soal color dan bagaimana pentingnya kita sebagai UI designer menggunakan semantic color untuk design kita. Nah dalam seri ini saya akan membahas bagaimana mengimplementasikan semantic color pada figma.

Perlu dicatat permainan color pada setiap designer pasti akan berbeda, jadi apa yang saya tulis dan demokan disini jangan dianggap sudah betul 100% ya, tapi coba ambil tekniknya :) Dalam keseharian saya sebagai product designer biasanya ketika menghadapi sebuah product / project baru saya akan memulai dari color. Saya selalu menggunakan list berikut sebagai dasar dari design saya

• Primary
• Secondary
• Success
• Info
• Warning
• Danger
• Dark
• Light

Setelah menemukan 8 color tersebut biasanya saya akan melanjutkan dengan shading, dan shading yang saya ikuti adalah menggunakan 50–900. Saya sarankan anda memulai di variable untuk lebih cepat (di artikel selanjutnya saya akan bahas bagaimana melakukan optimalisasi pemilihan color, so tunggu ya).

Setelah anda memiliki shading lengkap, maka anda bisa memulai untuk memasukan kedalam variable, masukan satu per satu shade yang ada dan lakukan grouping, pada demo ini kita akan mencoba bermain dengan 1 variable dulu yaitu primary.

Create a Primary variable set

Setelah itu anda bisa melanjutkan pembuatan shade yang lainya dan melakukan grouping menjadi 2 tingkat ( basic / primary / 50–900 ). Figma menyediakan cara grouping yang unik juga, anda bisa melakukan grouping dengan mengganti format nama dengan menambahkan “/” dari primary menjadi “basic/primary” maka anda otomatis akan memiliki group parent yang baru

Create a Basic set

Nah ini step berikutnya anda akan membuat semantic color, caranya sangat mudah yaitu dengan menggunakan fitur alias dari figma variable. Hal ini membuat anda bisa melakukan linking antar variable.

Bagaimana mudah bukan, terkait dengan nama dan variasi dari semantic saya sarankan anda memahami kondisi tempat anda bekerja dulu, penentuan bisa didasarkan pada kebutuhan. Anda bisa mendalami juga terkait dengan pemilihan semantic dengan memahami naming convention best practice untuk semantic color.

Kali ini pada bagian terakhir saya akan mencoba mendemokan bagaimana semantic color bisa membantu anda dalam melakukan maintain color.

Simulasi ini akan menunjukan bagaimana semantic color bisa membantu anda, saat ini anda memiliki kondisi seperti berikut

• 20 screen
• 3 component (button, label dan icon)
• 2 color (danger and primary)
• button akan memiliki warna primary
• icon dan label memiliki warna danger

Penampilan kondisi yang kita miliki

Case : anda diminta mengganti warna shape menjadi warna lain

Style methodology

kenapa style masih belum cukup untuk anda

Apa yang kira kira anda akan lakukan untuk melakukan ini, anda mungkin akan melakukan blok 1 per 1 component, melakukan detach ke style dan mengganti baru. Bisa terbayangkan jika halaman ini terpecah di banyak page.

Semantic methodology

anda bisa melihat bahwa pada metode ini kita menerapkan semantic untuk masing masing element, dimana masih menggunakan warna yang sama tapi kita memecah menjadi 3 semantic yaitu , button, shape dan label. Maka anda cukup mengganti dari panel variable saja

bagaimana mudahnya semantic menangani kasus seperti ini

Mungkin semantic belum terasa ketika anda masih mendesain dalam jumlah kecil, tapi ketika jumlah sudah terlalu banyak dan anda tidak melakukan maintenance dengan baik maka waktu anda akan habis hanya untuk memaintenance. Mungkin sekian untuk materi semantic, saya akan coba untuk membawa materi lain tentang design system dan ops.

Tertarik ngobrolin design system, bisa approach saya di linkedin dan yuk kita ngobrol sana sini.