Figma Variantlarda Master Komponent Kullanım İpucu
Figma’daki yeni özelliklerden biri variant (Artık sürekli yeni özellikler ekleniyor, variantlar hala yeni sayılır mı emin değilim 😄). Ben de bu özelliği ilk kullandığımdan beri bazı pro tipler keşfettim. Küçük ve hızlıca öğrenilebilecek, ama projenizde önemli derecede zaman kazandıracak.
Varianta sahip komponentlerin en bilindiği butonlar. Ben de kendi projelerimde butonları varianta çevirdim. Bunları anlatırken variantları bildiğinizi varsayıyorum. Eğer bilmiyorsanız bu kısa Figma YouTube videosundan ya da Figma Community’deki variantlar dosyasından öğrenip okumaya devam edebilirsiniz.
Buton Oluşturmak
4 özelliğe sahip bir buton oluşturdum. Örneğin görselde: Size; Large, Style; Text+Icon, Type; Primary, Hover; Off özelliklerine sahip bir variant görüyorsunuz.
Buton hakkında biraz daha bilgi vereyim. Yukarıda örnek olarak sunduğum buton sağa ve sola 16px; yukarı ve aşağı 5px padding değerine sahip. İkon 34px yükselikliğinde ve genişliğinde. Font, SF Pro Rounded Bold 34px. Arka plan rengi ise #194FDA. Bu buton bir komponentin variantı durumunda.
Ve bütün variantlar da aşağıdaki gibi görünüyor.
Variantları kullanıyorum, her şey yolunda. Peki stil rehberimde değişiklik yapmak istediğimde ne olacak? Örneğin ana renk olarak kullandığım rengi değiştirmek istediğimde, tüm variantların olduğu Button komponentini seçerim. Ardında sağ panelden toplu olarak rengi değiştirim. İşte böyle;
Her birini seçmek uğraştırıcı olsa da bunu yapabilirim. Bu şekilde renkleri, stroke özelliklerini, efekt özelliklerini ve padding değerlerini toplu seçim ile değiştirebilirim. Fakat konu tipografi, ikon özellikleri v.b. olduğunda iş biraz daha zor oluyor. Örnek vermek gerekirse ikonları genelde frameler içinde kullanırız. Yani bir ikon değiştireceğimizde frame içindeki ikon seçilene kadar birden fazla kez tıklama yapmamız gerekiyor. Ve yine bunu 10 tane ikon için yaptığınızı düşünün… Can sıkıcı.
Denerseniz göreceksiniz, toplu seçim bile olsa işlemler uzun sürüyor ve mesai harcıyorsunuz, zamanınızı alıyor.
Master Button Oluşturmak
Bunun çözümü; variantların dışına bir master komponent oluşturmak. Size özelliği ile Small, Medium ve Large olmak üzere 3 variantı var.
Master komponent ne işe yarar? Yeni komponentler oluştururken Master komponentten instance (miras/kopya) alırız ve değişiklikleri onun üzerine uygularız. Böylece tüm variantlar aslında master komponente bağlı olur. Kısaca ben master komponent üzerinde bir değişiklik yaptığımda, bu değişiklik tüm variantlara yansır. GIF üzerinde 24px olan ikonu 34px ile değiştiriyorum ve tüm variantlara yansıyor;
Neye dikkat etmek gerekiyor?
Önemli! Master komponentten variant oluştururken önce tüm kopyaları çıkarıp en sonunda multiple component seçimi yapmanız daha doğru oalcaktır. Bu şekilde variantların hepsi direkt olarak master komponentten kopyalanmış bir nested kompenent olacak.
Aksi halde (master komponentten kopyaladığınız bir nested komponenti kullanırsanız) tüm butonlar birbirinden kopyalanmış nested komponentler olacak. Ne demek istediğimi şöyle göstereyim.
Üstteki görselde iki buton kopyaladım. Butonları master komponentten kopyaladıktan sonra, her ikisini master komponentten miras alacak şekilde komponent yaptım. Benim kullandığım yöntem bu.
Alttaki görsel ise benim kullanmaktan sakındığım ve önermediğim yöntem;
Burada ilk kopyayı komponent yaptım. Ardından First Instance şeklinde adlandırdım. First Instance komponentini de kopyalayıp ikinci kopyayı komponent yaptım. Ona da Second Instance dedim.
Görsele bakarsak iç içe geçmiş (nested) yapıyı görebiliriz. Şekil 2’de yalnızca First Instance üzerinde bir değişiklik yapmak istersek bu mümkün değil. Çünkü Second Instance ondan miras alıyor. Yaptığımız tüm değişiklikler Second Instance komponentine de uygulanır.
Ama Şekil I’de her komponentte ayrı ayrı değişiklikler yapabiliriz. Her komponent sadece master komponentten miras alıyor.
Sonuç
Master komponent kullanmak bizi manuel stil değişikliklerden kurtaracaktır. Hem zaman olarak tasarruf edeceğiz hem de kesinlikle daha az yorucu olacak. Eğer sisteminize uyum sağlıyorsa, en azından denemenizi tavsiye ederim. Ve dikkat: Yalnızca master komponentten miras almaya özen gösterin ✌️
İletişim için Twitter ya da iletisim@alicorak.com adreslerini kullanabilirsiniz.
