UI/UX tasarımında son birkaç yılda tek bir araç öne çıktı: Figma. Tarayıcı üzerinden çalışır, birden fazla kişinin aynı dosyada eş zamanlı çalışmasına izin verir ve ücretsiz bir planla başlanabilir. Bu üç özellik, tasarımcıların çalışma alışkanlıklarını büyük ölçüde değiştirdi. Bu rehberde Figma'nın sunduklarını, temel özelliklerini ve öğrenmeye nereden başlanacağını sırayla ele alıyorum.
Figma Nedir, Neden Bu Kadar Popüler
Figma, web sitesi ve mobil uygulama arayüzleri tasarlamak için kullanılan, tamamen tarayıcı tabanlı bir araç. Kurulum gerektirmez; figma.com adresine gidip doğrudan çalışmaya başlayabilirsiniz. Bu, Sketch ve Adobe XD gibi masaüstü uygulamalarından ayrıldığı temel nokta.
Tasarımlar otomatik olarak buluta kaydedilir; bu sayede dosya kaybı riski ortadan kalkar ve herhangi bir cihazdan kaldığınız yerden devam edebilirsiniz. Ücretsiz plan, üç aktif proje ve sınırsız kişisel dosyayla başlamaya izin verir. Bu da aracı riske girmeden denemenizi sağlar.
Masaüstü uygulamaları kurulum, güncelleme ve platform uyumluluğu gerektirir. Figma bu adımların hiçbirini istemez. Windows, Mac veya Chromebook fark etmeksizin, güncel bir tarayıcınız olduğu sürece aynı deneyimi alırsınız.
Dijital tasarım araçları ve web teknolojileri hakkında genel referanslara MDN Web Docs üzerinden ulaşabilirsiniz. Tasarımdan koda geçişte CSS ve düzen kavramlarını pekiştirmek isteyenler bu kaynaktan faydalanabilir.
Gerçek Zamanlı İşbirliği
Figma'yı rakiplerinden ayıran en belirgin özellik, birden fazla kişinin aynı dosyada eş zamanlı çalışabilmesi. Google Dokümanlar'da olduğu gibi her kullanıcının imleci farklı bir renkle görünür ve yapılan değişiklikler anında ekrana yansır.
Bu işbirliği yalnızca tasarımcılarla sınırlı değil. Bir geliştirici ya da ürün yöneticisi tasarım dosyasını açıp doğrudan yorum bırakabilir. Herkesin aynı dosyaya erişmesi, ayrı ayrı ekran görüntüsü paylaşmaktan çok daha verimli.
@mehmet bu buton rengi marka kılavuzuna uygun mu?
Tasarımın belirli bir noktasına eklenen bu tür yorumlar, e-posta zincirlerine göre çok daha hızlı bir geri bildirim döngüsü sağlar. Çözülen yorumlar işaretlenip kapatılabilir; bu da geri bildirim sürecini takip edilebilir kılar.
Bileşenler ve Tasarım Sistemleri
Figma'nın en güçlü özelliklerinden biri, bileşen (component) sistemi. Bir düğmeyi bir kez tasarlayıp tasarımın her yerinde tekrar kullanabilirsiniz. Ana bileşeni güncellediğinizde, o bileşenin tüm örnekleri otomatik olarak güncellenir.
Bu mantık, büyük ölçekte bir tasarım sistemine dönüşür. Renkler, tipografi, boşluk kuralları ve bileşenler tek bir kütüphanede tanımlanır ve tüm ekip bu kütüphaneye bağlanarak tutarlı bir görsel dil kullanır.
Bir tasarım sisteminde stil tanımlama genellikle şu adımlarla ilerler:
- Renk stilleri: marka renklerini adlandırıp tek bir yerden yönetin.
- Metin stilleri: başlık, gövde ve etiket tipografisini standart hâle getirin.
- Efekt stilleri: gölge ve blur gibi tekrar eden efektleri kütüphaneye kaydedin.
- Bileşen kütüphanesi: düğme, form alanı ve kart gibi tekrar kullanılan öğeleri tanımlayın.
Bir stili güncellediğinizde, o stili kullanan her yer otomatik olarak yeni haliyle güncellenir. Büyük bir üründe onlarca ekranı tek tek düzeltmek yerine, kaynağı bir kez değiştirmek yeterli olur.
Bu sistem, paylaşılan kütüphaneler aracılığıyla ekipler arasında da çalışır. Bir tasarım sistemi kütüphane olarak yayınlandığında tüm ekip aynı bileşenlere ve stillere erişir. Bu da marka tutarlılığını korurken tasarım sürecini hızlandırır.
Prototipleme: Statik Tasarımdan Etkileşime
Figma, statik ekranları etkileşimli prototiplere dönüştürmenize izin verir. Ekranlar arasında geçişler tanımlayabilir, düğmelere tıklama davranışı ekleyebilir ve basit animasyonlar oluşturabilirsiniz.
Prototip modunda bir ekrandaki düğmeyi seçip başka bir ekrana bağlarsınız. Bu bağlantı, tarayıcıda gerçek bir uygulama gibi test edilebilen bir akış oluşturur. Kod yazılmadan önce bir fikrin nasıl çalışacağını görmek, hem tasarımcı hem de paydaşlar için değerli bir aşama.
Kullanıcı testleri için bu prototipler doğrudan paylaşılabilir bir bağlantıya dönüştürülür. Gerçek kullanıcılara bu bağlantıyı göndererek, tasarımınızın nasıl algılandığını kod yazmadan önce gözlemleyebilirsiniz. Bu erken geri bildirim, sonradan yapılacak pahalı düzeltmelerin önüne geçer.
Paydaş sunumlarında da aynı prototip işe yarar. Statik bir görsel yerine tıklanabilir bir akış göstermek, ekip dışındaki kişilerin tasarım fikrini çok daha net anlamasını sağlar ve toplantılarda uzun açıklamalara gerek bırakmaz.
Tasarımcı-Geliştirici İşbirliği
Tasarımdan geliştirmeye geçiş, geleneksel olarak sürtüşmenin en yoğun yaşandığı aşamaydı. Figma, bu boşluğu doldurmak için geliştiricilere tasarım dosyasından doğrudan ölçüm ve stil bilgisi çıkarma imkânı sunar.
Bir öğeyi seçtiğinizde sağ panelde piksel cinsinden boyutlar, renk kodları ve yazı tipi bilgileri görünür. Geliştirici bu bilgileri tahmin etmek yerine doğrudan kopyalayabilir. Bu da "bu boşluk kaç piksel olacaktı" gibi soruları ortadan kaldırır.
/* Figma'dan kopyalanan örnek değerler */
color: #1A73E8;
font-family: "Inter";
font-size: 16px;
Bu şeffaflık, tasarım niyetinin koda doğru biçimde aktarılmasını sağlar ve iki ekip arasındaki iletişim yükünü azaltır. Geliştirme hızı artar, son üründeki tutarsızlıklar da gözle görülür biçimde azalır.
Figma, çeşitli geliştirme araçlarıyla da entegre çalışır ve tasarımdan koda geçiş sürecinde tahmin yapma ihtiyacını büyük ölçüde ortadan kaldırır. Bu entegrasyon, özellikle sık dağıtım yapan ekiplerde tasarım ile üretim arasındaki gecikmeyi kısaltır.
Eklentiler ve Topluluk Kaynakları
Figma'nın eklenti ekosistemi, aracın yeteneklerini genişletir. İkon kütüphanelerinden otomatik düzenleme araçlarına, erişilebilirlik denetleyicilerinden içerik üretme araçlarına kadar binlerce eklenti bulunuyor.
Figma topluluğu da değerli bir kaynak. Tasarımcılar kendi şablonlarını, ikon setlerini ve bileşen kütüphanelerini toplulukla paylaşır. Bu hazır kaynaklar, sıfırdan başlamak yerine mevcut bir temel üzerine inşa etmenizi sağlar.
Renk kontrastını kontrol eden erişilebilirlik eklentileri özellikle faydalı. Bir eklenti, tasarımdaki metin ve arka plan renk kontrastını otomatik tarayıp WCAG standartlarına uyup uymadığını gösterebilir. Bu, erişilebilir tasarımı sürecin başından itibaren dahil etmenin pratik bir yolu.
Eklenti kurmak birkaç tıkla tamamlanır. Sağ menüden eklenti aramasını açarsınız, istediğiniz aracı seçersiniz. Ardından eklenti, doğrudan tasarım dosyanızın içinde çalışır. Ayrı bir uygulama açmaya ya da yeniden başlatmaya gerek kalmaz.
Figma'ya Nasıl Başlanır
Figma'ya başlamanın en kolay yolu, ücretsiz hesap açıp küçük bir projeyle denemek. Bir mobil uygulama ekranı ya da basit bir web sayfası taslağı tasarlamak, temel araçları (dikdörtgen, metin, bileşen) hızlıca kavramanızı sağlar. Karmaşık bir projeyle başlamak yerine tek bir ekranı baştan sona tamamlamak, aracın mantığını daha hızlı oturtur.
Klavye kısayollarını öğrenmek büyük fark yaratır. R tuşu dikdörtgen aracını, T tuşu metin aracını açar. Ctrl+G (Mac'te Cmd+G) ise seçili öğeleri gruplar. Bu kısayolları öğrenmek, fareyle menülerde gezinmekten çok daha hızlı çalışmanızı sağlar.
Otomatik düzen (auto layout) özelliğini erken öğrenmekte fayda var. Bu özellik, içerik değiştiğinde öğelerin otomatik olarak yeniden boyutlanmasını sağlar ve duyarlı tasarımlarla çalışırken vazgeçilmez hâle gelir. Temel araçları öğrendikten sonra bileşenler, stiller ve prototipleme gibi daha ileri konulara adım adım geçebilirsiniz. Her yeni özellik önceki bilginizin üzerine inşa edilir ve iş akışınızı hızlandırır.
Figma topluluğunun paylaştığı hazır şablonları incelemek de öğrenme sürecini kısaltır. Başka tasarımcıların bir bileşeni nasıl kurduğunu, hangi otomatik düzen ayarlarını kullandığını görmek, sadece dokümantasyon okumaktan çok daha hızlı öğretir. Birkaç haftalık düzenli kullanımdan sonra Figma'nın arayüzü ve kısayolları neredeyse alışkanlık hâline gelir.
Kaynaklar ve doğrulama
Bilgileri uygulamadan önce güncel ayrıntıları aşağıdaki birincil veya alan otoritesi kaynaklardan kontrol edin.
Yazan Celil Uyanikoglu
Bilgisayar mühendisiyim; 25 yılı aşkın süredir bilgi işlem sektörünün içindeyim. Bu blogu 2020'de, işimde her gün karşılaştığım sorunların çözümlerini bir yere yazmak için açtım: Linux, güvenlik, tarayıcılar, yapay zeka araçları. Yazdığım her rehberi önce kendi bilgisayarımda ya da sunucumda deniyorum; çalıştığını görmediğim adımı yayınlamam. Hatalı ya da eskimiş bir şey görürsen iletişim sayfasından yaz — düzeltirim.
Henüz yorum yok.
Sohbete katıl. Yorumlar yayınlanmadan önce moderasyondan geçer.