Figma Nedir?
Figma, arayüz tasarımı ve prototipleme için kullanılan, tarayıcıda çalışan bir tasarım aracıdır. Masaüstü uygulaması da vardır, ama asıl farkı dosyaların bulutta durması ve aynı dosyada birden çok kişinin aynı anda çalışabilmesidir. Bir tasarımcı ekranı çizerken bir başkası metni düzeltebilir, siz de kenara yorum bırakabilirsiniz.
Bileşenler ve varyantlar sayesinde bir buton, kart ya da menü bir kez tasarlanır ve sitenin her yerinde aynı kalır. Auto Layout, öğelerin içerik değiştikçe kendiliğinden yerleşmesini sağlar; değişkenler (variables) renk, yazı boyutu ve boşluk gibi değerleri tek yerden yönetir. Böylece tasarım bir görselden çok, kurallarıyla yaşayan bir sisteme dönüşür.
Prototip özelliğiyle ekranlar birbirine bağlanır; tasarım, gerçek bir site gibi tıklanarak gezilebilir. Geliştirici modu (Dev Mode) ise ölçüleri, renk kodlarını, yazı ayarlarını ve dışa aktarılacak görselleri yazılım ekibine hazır hâlde sunar. Figma'yı dünyada pek çok ürün ve tasarım ekibinin standart aracı yapan da bu uçtan uca akış.
Figma'yı Nerede Kullanıyoruz?
Kod yazmadan önce bütün kararları Figma'da veriyoruz. Bir web projesinde Figma'yı en çok şu işler için açıyoruz:
Tel Çerçeve ve Sayfa Yapısı
Önce sayfaların iskeletini kuruyoruz: hangi bölüm nerede, hangi bilgi önce gelir, ziyaretçi hangi adımla teklif formuna ulaşır. Renk ve görsel olmadan yapı üzerinde anlaşıyoruz.
Masaüstü ve Mobil Tasarım
Her ekranı hem geniş ekran hem telefon için ayrı ayrı tasarlıyoruz. Telefon tasarımı masaüstünün küçültülmüş hâli değil; dokunma alanları ve okuma sırası ayrıca düşünülüyor.
Tasarım Sistemi
Markanızın renklerini, yazı ölçeğini, butonlarını ve kartlarını bir bileşen kütüphanesinde topluyoruz. Siteye yeni bir sayfa eklendiğinde aynı parçalarla, tutarlı biçimde kuruluyor.
Prototip ve Onay
Önemli akışları tıklanabilir prototipe dönüştürüp sizinle paylaşıyoruz. Yorumlarınızı doğrudan ekranların üzerine bırakıyorsunuz; geri bildirim e-posta zincirlerinde kaybolmuyor.
Neden Figma?
Aynı Dosyada, Aynı Anda
Tasarımcı, yazılımcı ve siz aynı dosyaya bakarsınız. Kimse eski bir sürüm üzerinde çalışmaz; her değişiklik herkese anında yansır.
Tutarlılık Sistemin İçinde
Bileşenler ve değişkenler sayesinde bir rengi ya da butonu değiştirdiğimizde, kullanıldığı her ekranda güncellenir. Büyüyen sitelerde bile görünüm dağılmaz.
Tasarımdan Koda Kayıpsız Geçiş
Geliştirici modu ölçüleri ve değerleri olduğu gibi aktarır. Ekranda gördüğünüz tasarımla yayına çıkan site arasında “yaklaşık” bir fark kalmaz.
Projenizde Nasıl İlerliyoruz?
Keşif görüşmesinden sonra sayfa yapısını tel çerçevelerle çıkarıyor, onayınızla görsel tasarıma geçiyoruz. Ana sayfayı ve kilit bir iç sayfayı önce tasarlayıp yönü birlikte netleştiriyor, ardından kalan ekranları aynı sistemle tamamlıyoruz.
Tasarım onaylandığında Figma dosyası geliştirme için tek doğru kaynak olur; kodlarken ölçüleri ve renkleri doğrudan buradan alırız. Siteye ileride eklenecek sayfalar da aynı bileşenlerle tasarlandığı için site büyüdükçe görünümü dağılmaz.
