Figma kullanırken sıklıkla duyduğunuz temel terimleri bu bölümde derinlemesine inceleyeceğiz. Bu terimlerin bir kısmı, arayüz tasarımının temel prensipleri ve literatürüyle yakından ilişkiliyken diğer bir kısmı sadece figma özelinde geçerli. O nedenle, terimleri evrensel karşılıklarını öğrenmek sizi figma güdümünden kurtacağı için her bir terimin açıklamasında kullanım alanları ve arayüz tasarımına olan etkilerini de değerlendirdim.
Figma’da tasarlamanın ilk adımını terminolojisini öğrenerek başlarsanız neyi neden yaptığınızı daha iyi kavrayabilirsiniz. Ayrıca aradığınız unsurlara hakim olur ve etkili çözümlere daha hızlı kavuşabilirsiniz. Kullanım diline hakim olarak, araçların işlevlerine hakim olabilir, figma içerisindeki tasarım süreçlerini tanıyabilirsiniz. Bu terimleri öğrendiğiniz takdirde hem figma içerisinde varmak istediğiniz yere daha hızlı gidecek hem de yolunuzu daha hızlı bulacaksınız. Aynı zamanda Figma’nın bize sağladığı takım içi çalışma, işbirliği ilkesindeki verimli ve üretken bir tasarım deneyimi yaratabileceksiniz.
Projeler (Projects)
Proje, Figma’da çalışmalarınızı organize edip yönetebileceğiniz bir yapıdır. Temel itibariyle bunu bilgisayarınızdaki bir klasör gibi düşünebilirsiniz. Farklı dosya türlerini nasıl bir klasörde bir arada tutabilirsek, proje içerisinde de tasarım süreçlerdeki bütün çalışmalarımızı yönetebilir, organize edebiliriz. Figma içerisinde yürüttüğünüz tasarım çalışmalarını gruplamak için projeleri kullanabilirsiniz.
Projeler, görüntüleme veya düzenleme yetkileriyle ekip içerisinde paylaşabilir. Ekip içerisinde işbirliğinin gerçekleştiği temel öğedir.
Dosya (Files)
Proje içerisinde yer alan öğedir. Bir projede birden fazla dosya yer alabilir. Tasarımları içeren .fig uzantılı bireysel belgedir. Figma’daki her dosya, çizim yapabileceğiniz, tasarım yapabileceğiniz ve prototip oluşturabileceğiniz ayrı bir çalışma alanıdır. Örneğin, bir web sitesi tasarlıyorsanız, tasarladığınız her web sayfası farklı bir dosya olabilir.
Bir Figma dosyası, metin, şekiller, resimler ve katmanlar gibi tüm tasarım öğelerinizi içerir. Ayrıca aynı dosya içinde etkileşimli bileşenler ekleyebilir ve prototipler oluşturabilirsiniz. Kısacası, dosyalar, tasarım işini bizzat yaptığınız yerdir.
Figma, tasarım dosyaları için işbirliğini ve gerçek zamanlı düzenlemeyi destekleyen tescilli bir bulut tabanlı biçim kullanır. Dışa aktarmalar için PNG, JPG, SVG ve PDF biçimlerini desteklerken, içe aktarmalar SVG, PNG, JPG ve Sketch’ten dosyaları içerebilir.
Dosya üzerinde üç ana yetki grubu vardır. Birincisi sahip (owner) projenin yaratıcı ve en üst düzey kullanıcısıdır. Görüntüleyiciler (viewer) sadece dosyayı görüntüleme yetkisi olan kullanıcı grubudur. Herhangi bir müdahale edemez, sadece projeyi inceleyebilir. Düzenleyiciler (editor) ise projede düzenleme ve ekleme yapma yetkisine sahip kullanıcı grubudur.
Sayfa (Pages)
Figma dosyası içerisinde yer alan alt bölümleme için kullanılan öğedir. Tasarımların organize edilmesini, amacına veya kullanımına yönelik sınıflandırılmasını sağlar. Figma dosyası bir not defterine benziyorsa, sayfalar da o not defterindeki ayrı sayfalar gibidir.
Figma’daki dosyalar ve sayfalar arasındaki temel fark, bunların organizasyon düzeyidir. Bir dosya, tüm projeniz veya büyük bir kısmı için daha geniş bir kapsayıcıdır; o dosyadaki sayfalar ise projeyi daha yönetilebilir, organize bölümlere ayırır.
Bu yapı, özellikle büyük veya karmaşık tasarımlar için kullanışlıdır ve ilgili tasarım öğelerini düzgün bir şekilde ayırmanıza ancak aynı genel dosya içinde tutmanıza olanak tanır. Bu şekilde, tek bir büyük alanda her şeyi elemeden projenizin belirli bölümlerinde kolayca gezinebilir ve bunlar üzerinde çalışabilirsiniz.
Katman (Layers)
Figma’da her bir nesne, katman üzerinde kullanımlanır. Katmanlar arasındaki hiyerarşi tasarımdaki önceliği ve görünürlüğü sağlar. Farklı öğelerin hiyerarşik olarak düzenlenmesinde yardımcı olan temel bir öğedir. Katmanları üst üste istiflenmiş şeffaf sayfalar olarak düşünün. Her katman, metin, şekil veya resim gibi farklı tasarım öğeleri içerebilir. Bu katmanları belirli bir sırayla düzenleyebilirsiniz; üst katmanlardaki öğeler, bir masanın üzerine kağıt yığmak gibi alt katmanlardaki öğelerin üzerinde görünecektir. Bu düzenleme, tasarımınızın hangi bölümlerinin diğerlerinin üzerinde görüneceğini kontrol etmenizi sağlar.
Katmanlar, tasarımınızın farklı yönlerini ayırmak için de faydalıdır. Örneğin, arka planınız için bir katmanınız, metin için başka bir katmanınız ve resimler veya çizimler için başka bir katmanınız olabilir. Bu ayrım, geri kalanını etkilemeden tasarımınızın belirli bölümlerini düzenlemeyi kolaylaştırır. Figma’da, katmanları gerektiği gibi seçebileceğiniz, yeniden adlandırabileceğiniz, gizleyebileceğiniz veya kilitleyebileceğiniz katmanlar panelini sol tarafta bulacaksınız.
Nudge Değer (Nudge values)
Nudge değerleri, tasarım öğelerinin konumunda ve boyutunda yapabileceğiniz küçük artımlı ayarlamaları ifade eder. Bunları ince ayar araçları olarak düşünün. Klavyenizdeki ok tuşlarını kullanarak bir öğeyi belirli bir miktarda seçili bir yönde (yukarı, aşağı, sola veya sağa) dürtebilirsiniz. Figma’da dürtme ayarlarını ayarlamak için menüye tıklayın, Tercihler > Nudge Miktarı’na gidin ve Küçük dürtme (varsayılan değer 1) ve Büyük dürtme (varsayılan değer 10) için istediğiniz değerleri girin. Hem küçük hem de büyük dürtme değerleri çözünürlükten bağımsız noktalarda ayarlanır.
Bu hassas kontrol, öğeleri tasarımınız içinde doğru bir şekilde hizalamak ve konumlandırmak için değerlidir. Örneğin, bir düğmeyi hafifçe sola dürterek bir metin kutusuyla mükemmel bir şekilde hizalayabilirsiniz. Nudge değerleri, özellikle kullanıcı arayüzünde ve grafik tasarımında piksel mükemmelliğinde hassasiyet gerektiğinde faydalıdır ve her şeyin düzgün bir şekilde hizalanmasını ve cilalı görünmesini sağlar.
Maske (Masks)
Maske, bir tasarımdaki nesnelerin belirli bölümlerinin görünürlüğünü kontrol etmek için kullanılan bir özelliği ifade eder. Bir video için küçük resim görüntünüz olduğunu ve bu görüntünün yalnızca belirli bir bölümünü belirli bir şekil içinde (örneğin bir profil resmi için bir daire veya özel bir özellik simgesi için bir yıldız) görüntülemek istediğinizi düşünün, bir maske uygulayabilirsiniz. Bir maske uygulayarak, resmin seçilen şeklin dışında kalan bölümlerini gizleyebilirsiniz. Bu, bir sahneye kesilmiş bir pencereden bakmaya çok benzer – yalnızca o pencerenin içindekileri görürsünüz.
Maskeler, yalnızca Figma’da değil, çeşitli platformlarda benzer şekilde çalışan tasarım yazılımlarında temel bir araçtır. Karmaşık görüntüler ve düzenler oluşturmak için gereklidir, tasarımcıların tasarımlarının bölümlerini yıkıcı olmayan bir şekilde ortaya çıkarmalarına veya gizlemelerine olanak tanır, yani orijinal görüntüler kalıcı olarak değiştirilmez.
Grup (Groups)
Gruplama, birden fazla öğeyi tek bir birimde birleştirmenizi sağlar. Şekiller, metin ve resimler gibi çeşitli parçalara sahip bir tasarım oluşturduğunuzu düşünün. Her bir parçayı ayrı ayrı taşımak veya düzenlemek yerine, bunları birlikte gruplayabilirsiniz. Bu öğeler gruplandırıldıktan sonra tek bir öğe olarak taşınabilir, yeniden boyutlandırılabilir veya değiştirilebilir. Bu, özellikle karmaşık düzenlerle uğraşırken tasarımınızı yönetmeyi daha basit ve daha verimli hale getirir.
Gruplar, öğelerin birbirlerine göre konumunu ve boyutunu korumak istediğinizde özellikle yararlıdır. Örneğin, metin ve simge içeren bir düğme tasarlıyorsanız, bunları gruplamak bunların tek bir tutarlı birim olarak bir arada kalmasını sağlar. Gerekirse, gruptaki her bir öğeyi yine de ayrı ayrı düzenleyebilirsiniz.
Izgara (Grids)
Izgaralar, tasarımınızdaki öğeleri hassas bir şekilde hizalamanıza ve düzenlemenize yardımcı olur. Tasarım tuvalinizin üzerinde çizgi veya nokta deseni gibi görsel bir yapı sağlarlar. Izgaraları, nesneleri nereye yerleştirdiğinizi ve hizaladığınızı yönlendiren grafik kağıdındaki çizgilere benzer şekilde düşünün.
Örneğin, bir kartvizit tasarlıyorsanız, metinlerin (adlar ve iletişim bilgileri gibi) ve logoların eşit aralıklarla yerleştirildiğinden ve doğru şekilde hizalandığından emin olmak için bir ızgara kullanabilirsiniz. Bu ızgara, son basılı kartın bir parçası olmayacaktır; yalnızca tasarım süreci boyunca size yardımcı olacak bir kılavuzdur.
Figma, sütunlar, satırlar ve tekdüze ızgaralar gibi farklı ızgara türleri sunar ve her biri farklı bir amaca hizmet eder.
Alan (Sections)
Bölümler, tasarım tuvalinizin farklı bölümlerini düzenlemek ve etiketlemek için kullanılabilir ve sizin ve işbirlikçilerinizin tasarım dosyasında daha kolay gezinmenize ve anlamanıza yardımcı olur. Bölümleri, tuvalinizde ilgili fikirleri veya öğeleri gruplayabileceğiniz belirlenmiş alanlar olarak düşünün.
Bölümler, özellikle işbirlikçi projeler için kullanışlıdır. Bunları, ekip beyin fırtınası, fikir üretimi için belirli alanları işaretlemek veya tasarımın son halini almış ve geliştirilmeye hazır bölümlerini belirtmek için kullanabilirsiniz. Bu organizasyon, işbirlikçileri tasarım süreci boyunca yönlendirmeye yardımcı olur ve herkesin tasarımın farklı bölümlerinin durumunu ve amacını anlamasını sağlar.
Bu, bölümleri tuvalinizi her biri tasarım sürecinde kendi odak noktası veya aşaması olan net, gezilebilir bölümlere ayırmak için ideal hale getirir.
Vektör (Vectors)
Vektörler, pikseller yerine matematiksel formüllerle tanımlanan noktalar, çizgiler ve eğrilerden oluşan grafikleri ifade eder. Yeniden boyutlandırıldığında bulanıklaşabilen raster görüntülerin (JPEG veya PNG gibi) aksine, vektörler her boyutta netliklerini korurlar. Bu, logolar veya simgeler gibi kaliteyi kaybetmeden yukarı veya aşağı ölçeklenmesi gereken tasarımlar için idealdir.
Figma’da bir vektör oluşturduğunuzda veya düzenlediğinizde, noktalarını ve yollarını değiştirirsiniz. Her noktanın, eğrilerin şeklini ve yönünü değiştirmek için sürükleyebileceğiniz tutamakları vardır. Bu, karmaşık şekiller ve tasarımlar oluşturmada size büyük esneklik ve hassasiyet sağlar.
Vektörler, ölçeklenebilirlikleri ve küçük dosya boyutları nedeniyle özellikle UX/UI tasarımında kullanışlıdır. Simgeler ve düğmeler gibi öğelerin, küçük akıllı saatlerden büyük masaüstü monitörlere kadar her boyuttaki ekranda keskin görünmesini sağlar ve onları her tasarımcının araç setinde temel bir araç haline getirir.
Cetvel (Rulers)
Cetveller, tasarımınızdaki öğeleri ölçmenize ve hizalamanıza yardımcı olan araçlardır. Tuvalin üst ve sol kenarları boyunca görünürler ve piksel cinsinden ölçümler gösterirler. Cetvelleri dijital bir ölçüm bandı gibi düşünün, tasarım öğelerinizi doğru bir şekilde yerleştirmek ve aralıklandırmak için bir referans sağlarlar. Örneğin, bir web sayfası tasarlıyorsanız ve metnin ve resimlerin sayfanın üstünden tutarlı bir şekilde hizalanmasını sağlamak istiyorsanız, sizi yönlendirmesi için üstteki yatay cetveli kullanabilirsiniz. Benzer şekilde, soldaki dikey cetvel öğeleri yan yana hizalamaya yardımcı olabilir.
Eklenti (Plugins)
Eklentiler, standart Figma uygulamasının işlevselliğini genişleten ek araçlardır. Akıllı telefonunuz için uygulamalar gibidirler, yeni işlevler ekler veya görevleri kolaylaştırırlar. Örneğin, bir eklenti tasarımınızdaki öğeleri otomatik olarak düzenlemenize, görüntüleri daha verimli bir şekilde içe aktarmanıza veya renk kontrastı gibi erişilebilirlik sorunlarını kontrol etmenize yardımcı olabilir.
Özellikle tekrarlayan veya özel görevler için kullanışlıdırlar ve tasarımın yaratıcı yönlerine daha fazla odaklanmanızı sağlarlar. Figma’nın topluluk kütüphanesinde çok çeşitli eklentileri keşfedebilirsiniz. Erişmek için araç çubuğundaki Kaynaklar simgesine tıklamanız ve Eklentiler sekmesine gitmeniz yeterlidir. Burada, Figma deneyiminizi geliştirmek için eklentilere göz atabilir, bunları yükleyebilir ve yönetebilirsiniz.