Figma İçerisindeki Araçlar

Merve Abdullahoğlu
Teknopar Akademi
Published in
3 min readFeb 24, 2022

Bir önceki yazımda Figma hakkında temel bilgileri anlatmıştım. Yazıya buradan ulaşabilirsiniz. Şimdi ise Figma kullanmaya karar verenlere yardımcı olacağını düşündüğüm bir konu üzerine yazmayı düşünüyorum. Konumuz Figma içerisindeki araçlar(tools).

Figma içerisinde birçok araç(tool) bulunmakta. Burada hepsinden bahsetmeyeceğim merak etmeyin 😊 Benim en çok kullandığım ve sizlere de yardımcı olacağını kullanacağınızı düşündüğüm birkaç araçtan(tools) bahsedeceğim.

Frame Tool

Frame Tool; figma çalışma alanı üzerinde frame oluşturmak için kullanılan bir tool. Belirli bir ekran boyutu için tasarım yapıyorsak, bu tasarımlar için bir sınır belirlememiz gerekir. Frame’ler bu kısımda devreye giriyor. Oluşturmak istenilen tasarım için bir sınır belirterek işleri daha kolay hale getiriyor. Figma’da diğer çerçevelerin içinde çerçeveler oluşturabilirsiniz. Bu işleme “nesting” deniliyor. Bu karmaşık arabirimler oluşturmak için farklı özelliklere sahip çerçevelerin birleştirilmesine olanak tanır.

Çalışma alanında yeni bir frame oluşturmak istediğinizde önceden belirlenen cihazların boyutlarını seçebilir ya da kendi boyutunuzu oluşturabilirsiniz. Frame bir üst nesnedir. Bu içine yerleştirilen tüm alt nesneleri kontrol edebileceği veya etkileyebileceği anlamına gelir.

Frames

Frame Özellikleri

· Corner Radius: Nesnenin kenarlarını yuvarlatmak için kullanılıyor.

· Clip Content: Çerçevenin sınırlarını aşan tüm nesneleri çerçeve içinde gizle.

· Layout Grids: Tasarımlarınızın görsel yapısına yardımcı olacak kılavuz çizgileri oluşturun.

· Auto Layout: Dinamik çerçeveler oluşturmak için kullanılıyor.

· Fill: Frame’in arka planını değiştirmek için kullanılıyor.

· Stroke: Kenarlık ve ana hat oluşturmak için kullanılıyor.

· Effects: Frame’ efekt eklemek için kullanılyor.

Frame Hiyerarşisi

Top-level frames: Doğrudan tuval üzerinde bulunan herhangi bir çerçeve. Bir çerçevenin üst düzey çerçeve olması için onu başka bir çerçeve, grup veya nesne içine yerleştiremezsiniz.

Nested frame: Başka bir çerçeve içine yerleştirilmiş herhangi bir çerçeve. Çerçeveleri üst düzey çerçevelere veya diğer iç içe çerçevelere yerleştirebilirsiniz. İç içe çerçeveler hem ebeveyn hem de alt öğedir.

Children: Çerçeve içindeki herhangi bir nesne.

Pen Tool

Pen Tool, yeni vektör noktaları oluşturmanıza veya mevcut noktaları düzenlemenize olanak tanır. Figma’daki kalem aracı, kâğıda çizim yapıyormuşsunuz gibi 3B formlar oluşturmak için yolları kapalı şekillere bağlamanıza olanak tanır. Vektör çizgilerinizi eğmek için yeni bir vektör noktası oluştururken tıklamayı basılı tutabilirsiniz.

Shape Tool

Şekiller, herhangi bir tasarımdaki katmanlarınızın çoğunu oluşturur. Toolbar üzerinden erişilebilir. Mevcut şekiller şunlardır: Dikdörtgen, Çizgi, Ok, Elips, Çokgen ve Yıldız.

Text Tool

Metin, arayüz tasarımının çok önemli bir yönüdür. Metin özellikleri, metnin görünümünden ve konumundan yeniden boyutlandırma davranışına ve OpenType özelliklerine kadar her şeyi kontrol etmenizi sağlar.

OpenType, bir yazı tipinde bulunan bir biçime veya bir dizi özellik veya işleve atıfta bulunabilir. Figma, tüm yazı tiplerinde OpenType özelliklerini destekler. Tüm yazı tipleri aynı OpenType özelliklerini desteklemez.

Auto Layout

Auto Layout, Figma’yı diğer tasarım araçlarından ayıran çok yönlülüğü ile en önemli özelliklerden biridir. Kısacası, bileşenleri ve çerçeveleri otomatik olarak büyüyecek şekilde yapılandırmanıza, kapsayıcının içeriğinin boyutuna uyum sağlamasına veya tam tersi şekilde yapılandırmanıza olanak tanır.

Auto Layout, öğelerine yanıt veren dinamik çerçeveler tasarlamanıza olanak tanır.

Parent, tasarımınızın öğelerini ve nesnelerini içeren çerçevelerdir(frame).

Children, Auto Layout çerçevesinin(frame) içindeki öğeler ve nesnelerdir.

Parent

Ebeveynin(parent) dört özelliği vardır. Bu özellikleri anlamak düzeninizin nasıl çalıştığını anlamanıza ve Auto Layout’ı anlamanıza yardımcı olacaktır.

Direction- Tasarım düzeninizin Sütunlarda (Yatay) veya Satırlarda (Dikey) olmasını sağlar.

Puding- Nesnelerin etrafındaki boşlukları belirler. (Children)

Spacing- Nesnelerin arasındaki boşluğu kontrol eder.

Resizing- Dinamik veya sabit bir genişliğe sahip olunmasını sağlar.

Düzen(Parent)

Children

Children, ebeveyne(parent) kıyasla çok az ve daha az karmaşık özelliklere sahiptir. Bu özellikler esasen hizalama ve konumlandırma kontrolleridir (Üst yönüne göre).

Alignment- Nesneleri bir eksen boyunca hizalayın.

Position- Nesnelerin yerleşimini değiştirme yeteneği.

Düzen(Children)

--

--