C
Başlatan CodeHunter

Figma’da koyu modu renkleri tersine çevirerek değil, değişkenlerle kurmak

2 Yanıt 11 Görüntülenme
değişkenler figma koyu-mod tasarım-sistemi
Puanlayanlar
Katılımcılar
C
W
P
Cuma saat 13:54 İlk mesaj
Konuyu Açan #1
Bir arayüzün koyu modu ilk bakışta “arka planı koyulaştır, metni aç” kadar basit görünüyor; ama durum renkleri, kart yüzeyleri ve devre dışı kontroller devreye girince bu yaklaşım hızla dağılıyor. Ben renkleri bileşenlere doğrudan bağlamak yerine Figma Variables içinde anlamsal adlarla yönetmeye çalışıyorum.

Örneğin surface/default, text/primary ve action/primary gibi değişkenleri açık ve koyu modlarda ayrı değerlere eşlemek, aynı bileşenin iki temada da tutarlı kalmasını sağlıyor. Buradaki püf nokta, “mavi-500” gibi palet adlarını arayüzde kullanmak yerine anlamı tarif etmek: Birincisi ham renk, ikincisi ise tasarım kararının kendisi.

İki noktada özellikle dikkat ediyorum:

  • Koyu modda her yüzeyi saf siyaha çekmiyorum; kartları ve sayfayı ton farklarıyla ayırmak hiyerarşiyi koruyor.
  • Hata, başarı ve uyarı renklerini otomatik olarak ters çevirmiyorum. Metinle arka planın birlikte okunaklı kalıp kalmadığını her modda ayrıca kontrol ediyorum.


Bileşen varyantlarını da mümkün olduğunca aynı semantik değişkenlere bağlayınca tema değişimi tek tek katman düzeltme işine dönüşmüyor. Siz Figma’da tema değişkenlerini nasıl adlandırıyor ve istisna renkleri tasarım sisteminizde nasıl yönetiyorsunuz?
Cuma saat 14:11
#2
CodeHunter şöyle dedi:
Koyu modda her yüzeyi saf siyaha çekmiyorum; kartları ve sayfayı ton farklarıyla ayırmak hiyerarşiyi koruyor.


Kesinlikle; saf siyah yerine birkaç yüzey seviyesini ayrı token’larla tanımlamak, kartların ve menülerin arka plandan kopmasını sağlıyor. Ben adlandırmayı üç katmanda tutmayı faydalı buluyorum: ham palet değişkenleri (ör. neutral/900), anlamsal değişkenler (surface/raised) ve gerekiyorsa bileşene özel değişkenler. Böylece marka rengini değiştirirken bileşenlerin neyi temsil ettiğini kaybetmiyorsunuz.

İstisna renklerinde de “status/error” gibi token’ları doğrudan her yere vermek yerine, metin ve yüzey kullanımını ayırmak iyi oluyor: status/error/text ile status/error/surface gibi. Devre dışı kontrollerde ise yalnızca opaklığı düşürmek bazen kontrastı fazla azaltıyor; her tema ve durum kombinasyonunu gerçek arka plan üzerinde kontrol etmek daha güvenilir.
Cuma saat 14:27
#3
WebMasterX şöyle dedi:
Ben adlandırmayı üç katmanda tutmayı faydalı buluyorum: ham palet değişkenleri (ör. neutral/900), anlamsal değişkenler (surface/raised) ve gerekiyorsa bileşene özel değişkenler.


Bu ayrım iyi çalışıyor; yalnız bileşene özel token katmanını her bileşen için açmamakta fayda var. Aynı anlamsal rolü paylaşan kartların ayrı ayrı token’lara bağlanması, tema değişikliğinde bakım yükünü artırabiliyor. Ben önce genel token’larla ilerleyip gerçekten farklı davranması gereken bileşenlerde özelleştirirdim.

Bir de değişken modlarını yalnızca açık/koyu diye düşünmemek gerek: Figma’da koleksiyon ve mod yapısı, marka teması gibi başka eksenleri de düzenlemeye izin veriyor. Ancak kombinasyonlar çoğaldıkça test yükü de artıyor. Özellikle disabled durumunda opaklık tek başına güvenilir ölçüt değil; metin, ikon ve kontrol sınırlarını gerçek yüzeyleri üzerinde ayrı ayrı kontrol etmek daha sağlam.

Yanıt vermek için giriş yapmış olmalısınız.

Giriş Yap Kayıt Ol
0 alıntı seçildi