Figma Özellikleri: Components & Prototype
Tekrardan merhaba arkadaşlar. Bugün Figma’yı diğer tasarım araçlarından farklı hale getiren iki özelliğinden bahsedeceğim. Bunlar; Component ve Prototype.
Ayrıntılara geçmeden önce kısaca bu iki özelliğin mantığından bahsetmek istiyorum.
Bir web sitesi tasarladığımızı varsayalım. Bu site içerisinde bir düzen olması gerekiyor. Bir yazının başlığının puntosu farklı diğerinin farklı olmaması lazım. Kullanıcı siteye girdiğinde kolayca her şeye erişebilmeli ve gözü yorulmamalı. Her sayfada başlıklar için aynı yazı stili ve yazı puntosu olması, menülerin yeri, iconların boyutu vs. Tüm bunlar bakıldığında her yerde kullanıyor ve sürekli tekrar ediyor. Figma tam burada şöyle bir özellik getiriyor: Component. Yazı başlığını genel bir şekilde her şeyiyle tasarla ve onu component haline getir ve istediğin yerde istediğin kadar kullan. Bu tabi ki yazı başlıkları için değil her şey için geçerli.
Bir yerde kullanacağınız nesneyi component haline getir ve her yerde kullan. Bir değişiklik yapmak istediğinde ana component üzerinde yap hepsi etkilensin. Her şeyi tek bir yerden yönet.
İşlem tamam web sitenizi hazırladınız. Müşteriye sunmanız gerekiyor. Ama statik düz bir tasarım göstermek istemiyorsunuz. Keşke etkileşimli olsa dediğiniz anda Figma burada da yardımınıza koşuyor prototype özelliği ile. Etkileşimli bir şekilde sitenizi tasarlayıp gerçeğe en yakın bir biçimde göstermenizi sağlıyor.
Gelin şimdi de mantığını anlattığımız bu özellikleri ayrıntılı işleyelim.
Component
Tasarımda kullandığımız nesneleri projemizde birden fazla yerde kullanmamız gerekebilir. Tüm projede belli bir stil düzeni yakalamak için ve işi daha kolay hale getirdiği için componentler kullanılır Figma’da. Tekrar tekrar kullanılmak istenen nesne bir kez oluşturulur ve projede kopyaları kullanılır. Oluşturulan nesnede bir değişiklik yapılması istendiğinde orijinal nesnede değişiklikler yapılır ve ondan oluşturulan bütün nesneler bu değişikliklerden etkilenir.
Componentler, tasarım projelerimizde yeniden kullanılabilen UI öğeleridir. Bir component bir button, bir icon veya hatta bir veri tablosu gibi karmaşık bir şey olabilir. Tasarımlarda bileşenleri kullanmanın avantajı, bir bileşende herhangi bir değişiklik yaptığınızda, tüm bileşenin örneklerini otomatik olarak güncellemesidir, aksi takdirde tekrarlayan ve sıkıcı işlerde size zaman kazandırır. Bu tasarım iş akışınızı hızlandırır, tasarım sisteminizi daha tutarlı hale getirir ve diğer tasarımcılarla birlikte çalışmayı ve iş birliğini çok daha kolaylaştırır.
· Main Component: Bir UI öğesini ilk kez bir bileşene dönüştürdüğünüzde oluşturulur ve componentin özelliklerini tanımlar.
· The Instance: Tasarımlar arasında yeniden kullanabileceğiniz ana componentin bir kopyasıdır.
Kopyalar ana componentlere bağlıdır. Ana component içerisinde değişiklik yaptığınızda, değişiklikleri örneğe uygular.
Eğik çizgi adlandırma, bileşenleriniz için düzenli bir hiyerarşi oluşturmak üzere eğik çizgi kullanan bir bileşen adlandırma kuralıdır. Örneğin, desteklenen durumlara sahip giriş alanlarınız varsa, ileriye doğru “/” adlandırma kuralını şu şekilde kullanabilirsiniz:
· Girdi/Alan/Metin — Etkin
· Girdi/Alan/Metin — Varsayılan
· Girdi/Alan/Metin — Devre Dışı
Prototype
Yapılan tasarımları birbirine bağlamaya yarayan araç. Yapılan tasarımların canlıda nasıl gözükeceğinin bir ön izlemesini görmemizi sağlar. Prototipi sunduğumuzda, kullanıcı uygulamada gezinmek için bağlantılı öğelere tıklayabilir.
Prototype içerisinde kullanılabilir birkaç özellik:
On Click / On Tap
· Prototipinizde on click özelliği verdiğiniz bir obje tıklandığında (masaüstü) veya dokunduğunda (mobil) eylem gerçekleşir.
· Bir ekrandaki birçok farklı öğeye tıklama veya dokunma tetikleyicileri ekleyebilirsiniz.
On Drag
· Ekrandaki bir öğeyi sürüklediğinizde bir eylem gerçekleştirmenize olanak sağlar.
· Sürüklemeyi herhangi bir yönde kullanabilirsiniz: Sol, Sağ, Yukarı veya Aşağı.
· Animasyonu yapmak istenilen objenin adı diğer ekranda da aynı olmalıdır.
While Hovering
· Fare öğenin üzerine geldiğinde eylemi tetikler.
· Üzerinden çıktığında eski haline geri döner.
· Not: Bu özellik web için geçerli, mobilde üzerine geldiğinde diye bir seçenek olmaz.
· OpenOverlay: Fare öğenin üzerine geldiğinde bir yere gitmesin, oluşması istenen eylem nesnenin üzerinde belirsin. Manuel özelliği seçilmeli nesnenin tam üzerinde olması isteniyorsa.
While Pressing
· Fare ve imleç öğenin üzerine basılı tutulduğunda eylemi tetikler.
· Üzerinden geri çekildiğinde eski haline geri döner.
Key / Gamepad
· Klavyede seçilen tuş veya tuş kombinasyonuna basıldığında eylem gerçekleşir.
Mouse Enter
· Fare seçilen alanın üzerinden geldiğinde eylem gerçekleşir.
· Bu işlemin “While Hovering” özelliğinden farkı; “Mouse Enter” işlemi gerçekleştikten sonra “While Hovering” özelliğindeki gibi eski haline geri dönmüyor.
Mouse Leave
· Fare seçilen alanın üzerinden çıktığında eylem gerçekleşir.
Mouse Down (Touch Down)
· Mobil cihazlarda kullanıcı parmağını ilk ekrana dokunduğunda eylem gerçekleşir.
Mouse Leave (Touch Up)
· Mobil cihazlarda kullanıcı parmağını ilk ekrana dokunup bıraktığında eylem gerçekleşir.
Fix Position Özelliği
· Sayfa aşağı ve yukarı hareket ettirildiğinde seçilen obje sabit yerinde kalır.
· Sol taraftaki alanda da hangi objelerin sabit duracağı gözükür.
Scroll to Özelliği
· Landing page veya uzun mobil tasarımlardaki sayfalarda sayfa içerisinde link verip ekranı kaydırma işlemi.
Scroll Vertical and Horizontal
· Tasarımda dikey veya yatay scroll olmasını istediğimiz yerleri scroll olarak ayarlar.
· Nesnenin bir frame’i bir sınırının olması gerekiyor bu özelliği kullanabilmemiz için.
Preverse Scroll Position
· Yönlendirilen sayfadaki pozisyonu koruyarak yeni sayfaya gider.
Swap Overlay
· Bir objeyi diğerleriyle değiştirmenize olanak tanır.
· Open overlay özelliğine benzer.
· Bir objeye bu özelliği uygularsanız, mevcut objeyle yeni hedef çerçevesiyle değiştirilir. Yani kaplama, orijinal ile aynı kaplama ayarlarını koruyacaktır.
Back
· Link ile gelinen sayfaya geri döner.
Open Link
· Verdiğiniz linke gider ve prototip ile olan bağlantısı kesilir.
Instant Özelliği
· Anında geçiş, link ile hedef sayfaya geçerken herhangi bir efekt uygulanmaz.
Disolve Özelliği
· Geçiş arasında soluklaşarak efekt uygulanır. (Opacity gibi)
Smart Animate Özelliği
· Geçişler arasındaki aynı isme sahip objelerin şekli, yeri değiştiğinde animasyon uygulanır.
