Figma ile Dark Mode Uyumlu ve Ölçeklenebilir Arayüz Tasarımı

Tasarım Sistemlerinde "Local Variables" Devrimi

Modern mobil uygulama tasarımlarında artık "siyah arka plan üzerine beyaz yazı" diyerek Dark Mode tasarımı yapılamıyor. Marka kimliğini koruyan, onlarca farklı ekranın aynı anda hem aydınlık (Light) hem karanlık (Dark) temada sorunsuz görünmesini sağlayan sistematik bir UI/UX mimarisi kurmak zorundayız.

Renk Paletlerini Değişkenlerle (Variables) Yönetmek

Figma'ya eklenen Local Variables özelliği sayesinde, eskiden renk stilleriyle (Color Styles) yaptığımız hantal yapıyı terk ediyoruz. Süreç şu şekilde işliyor:

Primitive Colors (Temel Renkler): Önce doğadaki renklerin hex kodlarını sabitleriz. (Örn: Blue-500 = #3B82F6, Gray-900 = #111827). Bunlar asla doğrudan tasarıma atanmaz!

Semantic Colors (Anlamsal Renkler): Temel renkleri görevlerine göre isimlendiririz. Örneğin bir düğmenin arka plan rengine Button-Primary-Background deriz.

Mode Geçişi (Aliasing): Button-Primary-Background değişkenine Light modda Blue-500 değerini, Dark modda ise Blue-300 (daha açık ve okunabilir bir mavi) değerini atarız.

Bu mimariyi (Design Tokens) kurduktan sonra, Figma'daki bir ekranı (Frame) seçip modunu Dark olarak değiştirdiğinizde, tek bir tıklamayla tüm arayüzdeki yazılar, ikonlar ve arka planlar karanlık temaya otomatik olarak dönüşür. Bu değişken yapısı doğrudan CSS, Tailwind veya Swift değişkenleri olarak kodlanarak yazılımcılara 1:1 aktarılır.