Figma, tasarım sürecini kolaylaştıran iki ana kenar çubuğuna sahiptir. Organizasyona odaklanan sol kenar çubuğu, Katmanlar ve Varlıklar panellerini görüntüler. Sağ kenar çubuğunda, işlevsellik seçilen öğelere göre değişir. Renk ve tipografi gibi görsel yönleri kontrol eden Tasarım panelini, etkileşim eklemek ve kullanıcı arayüzü davranışını tanımlamak için Prototip panelini ve geliştiricilerin kod parçacıklarını çıkarmada yararlı olan Geliştirme Modu/İnceleme panelini içerir.
Bu kenar çubukları, organizasyon araçları, tasarım özelleştirmesi ve iş birliği özelliklerinin bir karışımını sundukları için Figma’nın arayüzünü kullanarak tasarım yapmanın ayrılmaz bir parçasıdır.
Tasarım Paneli
Tuvalde hiçbir şey seçilmediğinde, Tasarım paneli dosyaya özgü stillere ve değişkenlere, tuvalin arka plan rengini güncelleme olanağına ve tüm sayfayı dışa aktarma seçeneklerine erişim sağlar. Ancak, bir katman seçildiğinde panelin yetenekleri önemli ölçüde genişler.
Seçili katmanlar için Tasarım paneli aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli ayarlar sunar:
Hizalama ve dağıtım: Öğelerin birbirlerine göre konumlandırılmasını ayarlar.
Konum ve boyutlar: Döndürme dahil olmak üzere konum ve boyut parametrelerini ayarlar.
Kısıtlamalar ve düzen ızgarası: Duyarlı davranışı ve düzen yapısını tanımlar.
Bileşen özellikleri ve örnekleri: Yeniden kullanılabilir bileşenleri ve örneklerini yönetir.
Otomatik düzen: Öğe aralığını ve hizalamayı otomatikleştirir.
Metin, dolgu, kontur ve efektler: Tipografi, renk, kenarlıklar ve gölgeler gibi görsel nitelikleri özelleştirir.
Prototip Paneli
Figma’da Prototip paneli etkileşimli prototipler oluşturmak için çok önemlidir. Başlamak için tuvalinizdeki herhangi bir nesneyi seçin. Ardından şunlara geçebilirsiniz:
Akış başlangıç noktası ekleyin: Bu, kullanıcıların prototipinizde gezinmeye başlayacağı ilk kareyi belirler.
Bir etkileşim ekleyin: Etkileşim Ayrıntıları modunu açarak prototipinizin kullanıcı girdilerine nasıl tepki vereceğini tanımlayabilirsiniz. Buna tetikleyicileri (tıklama veya gezinme gibi), eylemleri (tetikleyici gerçekleştiğinde ne olur) ve yumuşak bir geçiş için animasyonları ayarlamak dahildir.
Kaydırma davranışını tanımlayın: Prototipinizin kaydırıldığında nasıl davranacağını seçin. Bu, özellikle uzun veya kaydırmalı sayfalar için gerçekçi etkileşimler oluşturmak için önemlidir.
Prototip ayarlarını göster: Cihaz çerçevesi ve arka plan dahil olmak üzere prototipinizin ayarlarını düzenleyin.
Ayrıca, nesneler arasında bağlantılar oluşturmak için tıklayıp sürükleyerek Prototip panelinde doğrudan tuvale etkileşimler ekleyebilirsiniz.
Dev Mode/Inspect Paneli
Araç çubuğundaki bir geçiş düğmesiyle erişilen Dev Modu, Figma’nın arayüzünü, özellikle sağ kenar çubuğunu, geliştirici odaklı şu özellikleri görüntüleyecek şekilde dönüştürür:
Özellikleri görüntüleme ve kopyalama: Geliştiriciler, özellikleri, değerleri ve hatta kod parçacıklarını doğrudan tasarım bileşenlerinden kolayca görüntüleyebilir ve kopyalayabilir, bu da doğru kod uygulamasına yardımcı olur.
Çerçeve sürümü karşılaştırması: Geliştiriciler, son görüntülemelerinden bu yana bir çerçevenin farklı sürümlerini karşılaştırarak değişiklikleri takip edebilir.
Tasarımları inceleme ve gezinme: Dev Modu, daha kolay gezinme ve inceleme için önemli katman bilgilerini vurgular.
Geliştirmeye hazır tasarımları belirleme: Bölüm durumlarıyla, geliştiriciler tasarımın hangi bölümlerinin koda dönüştürülmeye hazır olduğunu hızla bulabilir.
İş akışı entegrasyonu: Dev Modu, Jira, Storybook ve GitHub gibi araçlarla entegrasyonları destekleyerek geliştirme iş akışını kolaylaştırır.
Bağlantılar ve kaynaklar ekleme: Geliştiriciler, kolay referans için bileşenlere ilgili bağlantıları ve kaynakları ekleyebilir.
Yorum Paneli
Sağ kenar çubuğundan erişilebilen Yorum paneli, doğrudan tasarım dosyası içinde iş birliği için güçlü bir araçtır. Ekip üyelerinin yeni yorumlar eklemesine veya mevcut yorumları görüntülemesine olanak tanır, geri bildirimlerin ve fikirlerin paylaşılabileceği ve verimli bir şekilde yanıtlanabileceği iş birliğine dayalı bir ortam yaratır. Yorum panelinden, dosyadaki tüm yorumların kapsamlı bir görünümüne sahip olursunuz.
İşlemi kolaylaştırmak için:
Yorumları arayın: İlgili anahtar sözcükleri yazarak belirli yorumları hızlıca bulmak için arama alanını kullanın.
Yorumları filtrele: Yorumları gönderildikleri zamana göre sıralamak veya yalnızca okunmamış yorumları görüntülemek için bir filtre seçeneği mevcuttur.
Ayarları ve bildirimleri yönetin: Ayarlar simgesi, daha temiz bir görünüm için yorum simgelerini gizlemenize veya dosyadaki yeni yorumlar veya güncellemeler hakkında bilgi sahibi olmak için bildirimleri yönetmenize olanak tanır.
Özellik Paneli
Sağ kenar çubuğundaki Özellikler paneli, tuvaldeki katmanları incelemek ve yönetmek için “Yalnızca görüntüle” erişimi olan kişiler tarafından kullanılabilir. Kullanmak için, bir katman seçerek başlayın. Bu, doğrudan tuval üzerinde veya sol kenar çubuğundaki Katmanlar paneli aracılığıyla yapılabilir. Şekiller, metin, gruplar veya çerçeveler dahil olmak üzere herhangi bir katman türünü seçebilirsiniz. Bir katman seçildikten sonra, Özellikler paneli katman hakkında adı, düzeni ve renk özellikleri gibi çeşitli ayrıntıları görüntüler.
Tuvaldeki bir katmana sağ tıklamak, aşağıdakiler gibi daha fazla seçeneği açar:
Katmanı kopyalama
Katmanı kod olarak (web için CSS veya iOS veya Android için platforma özgü kod), SVG olarak veya PNG olarak kopyalama veya yapıştırma
Katmana veya özelliklerine giden bağlantıyı kopyalama
Geçerli seçim içinde farklı bir katman seçme
Katman Paneli
Katmanlar paneli tasarımınızı düzenlemek için çok önemlidir. Projenizdeki metin, şekil ve resim gibi tüm öğelerin bir listesini, türlerini belirten belirli simgelerle görüntüler. Öğeler bir hiyerarşide, yani nasıl istiflendikleri veya iç içe yerleştirildikleri şeklinde gösterilir. Bu panelde öğeleri seçebilir, yeniden düzenleyebilir, gruplayabilir veya gizleyebilirsiniz.
Birden fazla katmanı farklı şekillerde seçmek için Shift veya Command (Mac) ve Ctrl (Windows) tuşlarına basın. Kolay tanımlama için bir öğeyi yeniden adlandırmak üzere çift tıklayın. Bir öğeye sağ tıklamak, çoğaltma veya silme gibi daha fazla seçenek sunar. Ayrıca, Menü > Tercihler altında bulunan, üzerine gelindiğinde katmanları vurgulama ayarı da vardır.
Profesyonel İpucu! Sol kenar çubuğunun görünürlüğünü değiştirmek için Command Shift (Mac) veya Ctrl Shift \ (Windows) tuşlarına basın.
Varlık Paneli
Figma’daki Varlıklar paneli, tasarımlarınıza kolayca sürükleyip bırakabileceğiniz yeniden kullanılabilir tasarım bileşenleri ve stilleri için bir kütüphanedir. Bileşenler, düğmeler veya simgeler gibi yeniden kullanılabilir öğelerdir; stiller ise renkler veya metin biçimleri gibi önceden tanımlanmış niteliklerdir. Varlıkları kullanarak tasarımınız genelinde tutarlılık sağlar ve zamandan tasarruf edersiniz.
Varlıklar panelini açmak için Katmanlar panelindeki “Varlıklar” başlığına tıklayın veya klavye kısayolunu kullanın:
Mac: Seçenek 2
Windows: Alt 2
Varlıklar paneline bir bileşen eklemek için üzerine sağ tıklayın ve Varlıklara Ekle seçeneklerini seçin. Ekledikten sonra, bunları panelden sürükleyerek projenizin herhangi bir yerinde kullanabilirsiniz.
Varlıklar panelinde ayrıca bileşenleri arayabilir, Kitaplık modali aracılığıyla kitaplıkları yönetebilir, Izgara ve Liste görünümleri arasında geçiş yapabilir, bileşenleri kitaplığa göre filtreleyebilir, Yerel bileşenleri görüntüleyebilir ve etkin kitaplıkları inceleyebilirsiniz.
Profesyonel İpucu! Figma, Varlıklar panelindeki bileşenleri bir yol olarak sunulan dosya, sayfa ve çerçeveye göre düzenler. Bir dosyayı, sayfayı veya çerçeveyi keşfetmek için oka tıklayarak her başlığı genişletebilirsiniz.
Kütüphaneler
Figma’daki kütüphaneler, tasarım öğelerini birden fazla dosyada paylaşmanıza ve standartlaştırmanıza olanak tanır. Dosyanızın stillerini ve bileşenlerini (düğmeler, simgeler, metin stilleri ve renk şemaları gibi) bir kütüphaneye dönüştürebilirsiniz. Yayımlandıktan sonra, bu öğeler diğer dosyalarda kullanılabilir. Bu, tasarımda tutarlılık sağlar ve yaygın olarak kullanılan öğeleri yeniden oluşturmanız gerekmediği için zamandan tasarruf sağlar.
Bu paylaşılan öğeleri kullanmak için, Varlıklar panelinden kütüphanelerinize erişin. İşte nasıl yapılır:
Kitaplık modal penceresini açmak için Varlıklar panelindeki kitap simgesine tıklayın.
Modal penceresinde, kullanılabilir kütüphanelerin bir listesini göreceksiniz.
Kullanmak istediklerinizi açarak etkinleştirin.
Etkinleştirildikten sonra, bu kütüphanelerdeki bileşenler ve stiller Varlıklar panelinizde görünecektir.
Sayfalar
Figma’daki sayfalar, projenizin çeşitli öğelerini organize etmek için yapılandırılmış bir yol sunarak, bir tasarım dosyası içindeki ayrı sayfalar gibi işlev görür. Tasarımın farklı aşamalarını, kullanıcı akışlarını veya belirli bileşenleri kategorilere ayırmak için idealdirler. Her sayfada, her eksende -65.000 ile +65.000 arasında bir boyut aralığına sahip bir tuval bulunur; burada çerçeveleri, grupları ve katmanları düzenleyebilirsiniz.
Sayfaları yönetmek, sol kenar çubuğundaki Katmanlar panelinden yapılır:
Sayfalara erişim: Tüm sayfaları görmek için geçerli sayfanın adına tıklayın
Yeni sayfalar oluşturun: Sayfa listesinin altındaki + simgesine tıklayın
Sayfaları çoğaltın: Adına sağ tıklayın ve Çoğalt’ı seçin
Sayfaları yeniden adlandırın: Sağ tıklayın ve Yeniden Adlandır’ı seçin veya adına çift tıklayın
Sayfaları silin: Sağ tıklayın ve Sil’i seçin
Sayfaları yeniden sıralayın: Tıklayın ve listede istediğiniz konuma sürükleyin
Katmanları sayfalar arasında taşıyın: Sağ tıklayın ve Sayfaya taşı’yı seçin, ardından hedef sayfanızı seçin.
Profesyonel İpucu! Kullanım kolaylığı için, çift yönlü bir ok görünene kadar sol kenar çubuğunun sağ kenarının üzerine gelin, ardından genişliğini ayarlamak için tıklayıp sürükleyin.
Tuvaller
Figma’daki tuval, tasarımlarınızı oluşturduğunuz çalışma alanıdır. Öğelerinizi düzenlediğiniz sanal bir kağıt parçası gibidir. Bunu tasarım dosyanızın görünür kısmı olarak düşünebilirsiniz. Her tuval, her eksende -65.000 ile +65.000 arasında değişen belirli boyutlara ayarlanabilir ve farklı bölümlerinde çalışmak için yakınlaştırıp uzaklaştırabilirsiniz.
Tuvalde bir öğe seçtiğinizde, boyut, konum, renk ve daha fazlası gibi özelliklerini ayarlamak için sağ kenar çubuğunu kullanabilirsiniz. Tasarım öğelerinizin görünümünü ve davranışını ince ayar yaptığınız yer burasıdır. Tüm katmanları seçerek ve sağ kenar çubuğunun Arka Plan bölümündeki renk seçiciyi kullanarak tuval arka plan rengini değiştirebilirsiniz.
Profesyonel İpucu! Varsayılan olarak, vektörler tuvalde çözünürlükten bağımsız yollar olarak görüntülenir. Ancak, raster varlıkların hassas bir şekilde düzenlenmesi için Piksel Önizlemesini 1x ve 2x çözünürlüklerde etkinleştirebilirsiniz.