Figma Component ve Variant: Tekrar Kullanılabilir UI

İyi bir arayüz tasarımının sırrı, aynı düğmeyi yüz kere yeniden çizmek değil; bir kez doğru kurup her yerde tekrar kullanmaktır. İşte tam burada Figma component ve variant sistemi devreye girer. Bir bileşeni "ana kaynak" haline getirir, durumlarını (hover, disabled, primary/secondary gibi) variant olarak gruplarsan; tasarımın tutarlı, hızlı ve bakımı kolay bir kütüphaneye dönüşür. Bu yazıda boş bir tuvalden başlayıp gerçekten ölçeklenebilir bir bileşen sistemine nasıl ulaşacağını anlatıyorum.

Component nedir, neden önemli?

Figma'da bir component, tekrar kullanmak istediğin bir tasarım öğesinin ana (main) kopyasıdır. Ondan türettiğin her kopyaya instance denir. Ana bileşende bir değişiklik yaptığında bu değişiklik tüm instance'lara otomatik yansır. Bir düğmenin köşe yarıçapını ya da renk tokenını değiştirdiğinde, dosyadaki yüzlerce kullanımı tek tek elle düzeltmek zorunda kalmazsın.

Bir öğeyi component'e çevirmek için seçip sağ tıkla ve Create component de (kısayol: macOS'ta ⌥⌘K, Windows'ta Ctrl+Alt+K). Artık bu öğe mor bir elmas ikonuyla işaretlenir ve sol paneldeki Assets sekmesinden her yere sürükleyebilirsin.

• Tutarlılık: Tek kaynak, her yerde aynı görünüm.
• Hız: Yeni ekran çizerken sıfırdan başlamazsın.
• Bakım: Marka rengi değişti mi? Bir yerde düzelt, her yere yansısın.

Variant ile durumları birleştirmek

Bir düğmenin gerçekte tek bir hâli yoktur: varsayılan, üzerine gelince (hover), basılıyken, devre dışı (disabled)... Bunların her birini ayrı component yapmak yerine, hepsini tek bir component setinde toplayan yapıya variant denir. Variant, mantıksal olarak aynı bileşenin farklı durumlarını bir arada tutar.

Birden fazla bileşeni seçip sağdaki panelden Combine as variants dediğinde Figma bunları kesik çizgili mor bir çerçeve içine alır. Bu çerçeve artık bir component set'tir. Her variant'a, panelin "Properties" bölümünden anlamlı özellik adları ve değerleri verirsin.

Variant özelliklerini (properties) doğru adlandırmak

Variant sisteminin gücü, doğru property yapısından gelir. Bir özelliği bir eksen gibi düşün: örneğin bir düğme için iki eksen tanımlayabilirsin.

• Type = Primary, Secondary, Ghost
• State = Default, Hover, Pressed, Disabled

Bu iki property birleştiğinde 3 × 4 = 12 olası kombinasyon oluşur ve hepsi tek bir component set içinde yaşar. Tasarımcı bir instance kullanırken sağ panelden açılır menülerle Type: Primary ve State: Hover seçer; doğru variant anında görünür.

İsimlendirmede tutarlı ol. Property adlarını ve değerlerini her bileşende aynı yaz; State ile state ya da Disabled ile disable karışırsa Figma bunları ayrı özellikler sanar ve set dağılır. Değerleri kısa, okunabilir ve mantıklı tut.

Boolean ve Instance swap property'leri

Variant tek property türü değildir. Figma'da bir bileşeni daha esnek yapan birkaç property tipi var:

• Boolean property: Bir katmanı aç/kapat. Örneğin düğmedeki ikonu göstermek için Has icon adında bir aç/kapat anahtarı oluşturursun.
• Instance swap property: İçteki bir instance'ı başka bir component ile değiştirmeye izin verir. Bir kart bileşeninin içindeki avatarı, kullanım anında farklı bir avatarla değiştirebilirsin.
• Text property: Bir metin katmanının içeriğini, katmana girip aramaya gerek kalmadan sağ panelden düzenlemeyi sağlar.

Bu property'leri variant'larla birleştirince, tek bir kart ya da düğme bileşeni onlarca farklı senaryoyu tek başına karşılar.

Adım adım: bir düğme bileşeni kuralım

Teoriyi pratiğe dökelim. Sıfırdan, durum varyantlı bir düğme bileşeni şu sırayla kurulur:

• 1. Auto layout'lu (kısayol Shift+A) bir çerçeve çiz: içine metin ve isteğe bağlı bir ikon koy. Padding ve hizalama auto layout ile yönetilsin ki metin uzayınca düğme büyüsün.
• 2. Bu çerçeveyi component'e çevir (⌥⌘K / Ctrl+Alt+K).
• 3. Bileşeni kopyala, rengini koyulaştır ve bunu "Hover" hâli yap. Aynısını "Pressed" ve "Disabled" için tekrarla.
• 4. Hepsini seç ve Combine as variants de.
• 5. Sağ panelden property adını State yap; değerleri Default, Hover, Pressed, Disabled olarak gir.
• 6. Renkleri elle yazmak yerine color variable (renk değişkeni / token) bağla. Böylece marka rengini değiştirince her variant güncellenir.

Bu kütüphane büyüdükçe, renkleri ve boşlukları variable olarak tanımlamak component'lerin gerçek değerini ortaya çıkarır: tasarım sistemin tek bir kaynaktan beslenir.

Sık yapılan hatalar

Bileşen sistemi kuranların düştüğü birkaç tuzak var. Bunlardan kaçınmak, dosyanı uzun vadede temiz tutar.

• Aşırı variant: Her küçük farkı variant yapma. 5 eksen ve 60 kombinasyon yönetilemez hale gelir; bazı farkları boolean veya instance swap ile çöz.
• Detach alışkanlığı: Bir instance'ı "detach" edip elle değiştirmek bağı koparır. Bunun yerine override (yazı, renk, swap) kullan.
• Düzensiz isimlendirme: Property ve değer adlarında büyük/küçük harf tutarsızlığı seti böler.
• Variable kullanmamak: Renkleri sabit hex olarak girmek, ileride toplu güncellemeyi imkânsızlaştırır.

Sık Sorulan Sorular

Component ile variant arasındaki fark nedir?

Component, tekrar kullanılabilir tek bir ana tasarım öğesidir. Variant ise aynı bileşenin farklı durumlarını (örneğin Default ve Hover) tek bir component set içinde gruplayan yapıdır. Yani her variant aslında bir component'tir; variant sistemi onları mantıksal olarak bir arada tutar.

Variant kullanmak performansı düşürür mü?

Pratikte makul sayıda variant performansı etkilemez. Sorun, yüzlerce kombinasyon üreten gereksiz çok eksenli setlerde çıkar. Eksen sayısını sınırlı tutmak ve boolean/instance swap property'lerini kullanmak dosyayı hafif tutar.

Variant'ları sonradan değiştirebilir miyim?

Evet. Bir component set'i seçip yeni variant ekleyebilir, property adlarını yeniden adlandırabilir veya değerleri düzenleyebilirsin. Değişiklikler bağlı tüm instance'lara yansır; bu yüzden adlandırmayı baştan tutarlı kurmak önemlidir.

Tasarım sisteminizi düzene sokmak mı istiyorsunuz? Tekrar kullanılabilir, variant'lı bir Figma bileşen kütüphanesi kurmanıza veya mevcut dosyanızı toparlamanıza yardımcı olabilirim. Benimle iletişime geçin ve projenizi konuşalım.