Figma değişkenleri (Variables) adım adım nasıl kurulur ve kullanılır?

Figma Variables ne işe yarar?

Variables, bir tasarım değerini (renk, sayı, metin ya da doğru/yanlış durumu) adlandırıp tek yerde tutmanızı ve tasarımda bu ada başvurmanızı sağlar. Değeri değiştirdiğinizde ona bağlı bütün katmanlar birlikte güncellenir. Sabit bir renk kodunu her yere elle yapıştırmak yerine "yüzey" ya da "birincil" gibi anlamlı bir ada başvurursunuz.

Değişkenlerin asıl gücü modlardır. Aynı değişken farklı koşullarda farklı değer alabilir: açık ve koyu tema, farklı marka renkleri, farklı diller ya da masaüstü ve mobil boşlukları gibi. Tek bir ekranı kopyalamadan, modu değiştirerek bütün senaryoyu görürsünüz. Prototip tarafında ise değişkenler durum tutar: sepete eklenen ürün sayısı, açık bir panel ya da girilen bir ad gibi etkileşim sırasında değişen bilgiyi taşır.

Değişken türleri ve koleksiyonlar nasıl çalışır?

Figma'da değişkenler şu türlerde tanımlanır: renk, sayı, metin (string) ve doğru/yanlış (boolean). Renk değişkenleri dolgu ve çizgilere, sayı değişkenleri boşluk, köşe yuvarlaklığı, boyut gibi ölçülere, metin değişkenleri yazı içeriğine, boolean değişkenleri ise katman görünürlüğü ve prototip koşullarına bağlanır.

Değişkenler koleksiyonlarda gruplanır. Her koleksiyonun kendi modları vardır ve koleksiyon içindeki bütün değişkenler bu modlar için ayrı değer taşır. Koleksiyonu amaca göre bölmek iyi bir alışkanlıktır: ham değerleri tutan bir koleksiyon, anlamlı kullanımları (yüzey, metin, uyarı) tutan bir koleksiyon ve bileşenlere özel değerleri tutan bir koleksiyon. Değişkene başka bir değişkeni takma ad (alias) olarak vermek, ham değerden anlamlı ada uzanan katmanlı bir yapı kurmanızı sağlar.

İlk koleksiyonu kurmanın adımları

Küçük bir örnekle başlayın. Örneğin bir mobil uygulama için açık ve koyu tema kuracaksınız. Yerel değişkenler panelinde yeni bir koleksiyon açın ve adını "renkler" koyun. Açık ve koyu adlı modları ekleyin. Sonra anlamlı adlarla renk değişkenleri oluşturun: arka plan, yüzey, birincil metin, ikincil metin, vurgu, hata. Her değişken için her modda bir değer girin.

Ardından tasarıma bağlayın: bir çerçeve seçin, dolgu rengi alanından değişken seçiciyi açın ve ilgili değişkeni seçin. Metin katmanlarını da aynı yolla bağlayın. Bağlantı tamamlandığında çerçevenin modunu açıktan koyuya çevirin; bütün renkler aynı anda değişir. Değişmeyen bir katman görürseniz, o katmanın rengi hâlâ elle girilmiş demektir. Düzgün bir kurulumda tasarımda elle yazılmış renk kodu kalmaz.

Anlamlı adlandırma ve alias yapısı

Değişken adı kullanım amacını anlatmalıdır, rengi değil. "mavi" adı marka rengi değişince yanıltıcı olur; "birincil eylem" adı ise rengin ne olduğundan bağımsız doğru kalır. Adlarda eğik çizgi ile grup oluşturabilirsiniz (örneğin metin/birincil, yüzey/yükseltilmiş); panel bu adları klasör gibi gösterir ve seçici içinde bulmayı kolaylaştırır.

Katmanlı yapı için önce ham değerleri tutan bir koleksiyon kurun: renk paletinin tonları ve boşluk ölçeği. Ardından kurulacak koleksiyondaki anlamlı değişkenleri bu ham değerlere alias olarak bağlayın. Açık modda yüzeyin hangi tona, koyu modda hangi tona bağlandığını bu koleksiyon yönetir. Marka rengini değiştirmeniz gerektiğinde yalnızca ham değeri değiştirirsiniz; anlamlı katman ve tasarım kendiliğinden izler. Bileşen kütüphanesi kuruyorsanız tasarım sistemi dosyanızda bu yapıyı baştan planlamak sonradan düzenleme maliyetini azaltır.

Boşluk, yuvarlaklık ve metin için değişken kullanımı

Değişkenler yalnızca renk için değildir. Sayı değişkenleriyle boşluk ölçeğini (küçük, orta, büyük) ve köşe yuvarlaklığını tanımlayabilir, bunları auto layout aralıklarına, iç boşluklara ve köşe değerlerine bağlayabilirsiniz. Mobil ve masaüstü için ayrı modlar açarsanız aynı bileşen farklı ekran sınıfında farklı boşluk değerleriyle görünür.

Metin (string) değişkenleri çok dilli tasarımda ve içerik testinde işe yarar. Düğme etiketi gibi bir metni değişkene bağlayıp her dili ayrı mod yaparsanız, mod değiştirerek Türkçe ile başka dildeki uzunluk farkının düzeni bozup bozmadığını görürsünüz. Uzun bir dil karşılığı taşma yaratıyorsa bunu geliştirmeye geçmeden yakalarsınız. Boolean değişkenleri ise bir katmanı göstermek ya da gizlemek için kullanılır; örneğin kayıtlı kullanıcı modunda profil rozeti görünür, misafir modunda gizlenir.

Prototipte değişkenle durum yönetimi

Prototipte etkileşime "değişken ayarla" eylemi eklenebilir: bir düğmeye tıklandığında bir sayı artar, bir boolean tersine döner ya da bir metin değişkeni yeni değer alır. Bu değişken ekrandaki bir metne bağlıysa kullanıcı değişikliği anında görür. Böylece gerçek bir arka uç olmadan sepet sayacı, sekme seçimi ya da basit bir form durumu simüle edilir.

Koşullu akışlar için aynı değişkenler koşul olarak kullanılır: eğer boolean doğruysa bir ekrana, değilse başka ekrana git. Örneğin giriş yapılmış bir kullanıcı doğrudan ana sayfaya, yapmamış kullanıcı giriş ekranına yönlenir. Bu yapı, geliştirmeye devredilecek akış mantığını tasarım dosyasında gösterip tartışmayı kolaylaştırır. Prototip değişkenlerini kullanırken başlangıç değerlerini dikkatle ayarlayın; her oynatmada değişkenler başlangıç değerine döner ve beklenmeyen durumlar çoğunlukla yanlış başlangıçtan çıkar.

Sık yapılan hatalar ve kontrol listesi

En sık hata, değişken oluşturup tasarıma bağlamayı unutmaktır. Bağlanmamış katmanlar mod değiştirdiğinde yerinde kalır ve tutarsızlık yaratır. Başka bir hata, her rengi ayrı değişken yapıp anlamlı katmanı atlamaktır; bu durumda marka değişikliğinde yine yüzlerce bağlantıyı elle düzeltirsiniz. Bir başka hata, koleksiyonları karıştırmak ve ham değer ile anlamlı değeri aynı yerde tutmaktır.

Yayımlamadan önce şu kontrolleri yapın:

• Tüm modlar için her değişkenin değeri dolu mu
• Elle yazılmış renk ya da boşluk değeri kaldı mı
• Değişken adları kullanım amacını anlatıyor mu
• Alias zincirleri döngüye girmiyor mu
• Prototip değişkenlerinin başlangıç değerleri doğru mu
• Ortak kütüphaneye yayımlanan değişkenler ekipçe adlandırma kuralına uyuyor mu

Bu beceri Mindset programlarında nerede çalışılır?

Mindset'in Figma ile Etkileşimli Prototipleme ve Variables Kullanımı eğitimi, ürün ve arayüz tasarımcılarına, ayrıca prototip üzerinden akışı doğrulamak isteyen ürün yöneticilerine yöneliktir. Müfredat prototip hedefi ve kapsamı, bileşen yapısı ve varyantlar, etkileşim ve geçişler, Variables ile durum yönetimi, koşullu akışlar ve senaryolar ile test, paylaşım ve devir modüllerini içerir.

Kurumsal tasarım ekipleri için bu yapı, prototiplerin geliştirme ekibine devredilirken mantığıyla birlikte aktarılması ve ortak bir değişken yapısı üzerinde çalışılması ihtiyacına karşılık gelir.