Figma temelleri: geri kalan her şeyi kuran dört kavram

Figma tam olarak nedir ve neden tarayıcıda yaşıyor?

Figma bir arayüz tasarım aracıdır; fotoğraf düzenleyici ya da sayfa düzeni uygulaması değildir. Yaptığı şu: bir ürünün ekranlarını kurarsınız, tekrar eden parçaları bir kez tanımlarsınız ve ekranları birbirine bağlayıp tek satır kod yazılmadan akışı görürsünüz.

Photoshop ve Illustrator'dan yapısal farkı dosyanın nerede durduğudur. Dosya onların sunucusunda kalır, siz tarayıcıda üzerinde çalışırsınız. Bunun üç doğrudan sonucu var ve üçü de önemli. Birincisi, birkaç kişi aynı anda tek dosyanın içindedir ve birbirinin imlecini görür; böylece tasarım incelemesi sohbete ekran görüntüsü göndermekten çıkıp doğrudan öğeye iliştirilmiş bir yoruma dönüşür. İkincisi, "son sürüm 3" ortadan kalkar, çünkü sürümler dosya değil geçmiştir. Üçüncüsü ve daha az söyleneni: dosyanız birinin hesabında yaşar ve o hesabın şartları da size ait değildir.

Bu dersi bir arayüz turundan ayıran şey o üçüncü maddedir. Müşteriyle gizlilik anlaşmanız varsa, dosyanın nerede tutulduğu teknik bir ayrıntı değil kararın parçasıdır. Aşağıda Figma'nın yapay zekâ ayarlarının küçük planlarda hangi varsayılana sahip olduğunu göreceksiniz.

Öğrenilmesi yeten dört kavram

Çerçeve bir kaptır. Her ekran, her kart, her düğme bir çerçevedir ve çerçeveler iç içe geçer. Çerçevenin üzerine oturan en önemli yetenek otomatik yerleşimdir: Figma'ya bu çerçevenin çocuklarını belirli bir boşlukla arka arkaya dizmesini söylersiniz ve o andan sonra metni uzayınca düğme kendi büyür. Düğmeleri bir kez elle kaydırmış olan herkes bunun neden ilk sırada olduğunu anlar.

Bileşen, bir kez kur her yerde kullan demektir. Ana kopyayı değiştirirsiniz ve bütün örnekler onunla değişir. Varyantlar aynı bileşenin durumlarıdır: normal, imleç üzerinde, devre dışı, yükleniyor. Yeni başlayanlar genellikle yalnızca normal durumu kurar ve teslim tam orada dağılır, çünkü kodun beşine de ihtiyacı vardır.

Stiller ve değişkenler, renge, yazıya ve boşluğa ad vermek demektir. "Ana mavi" bir karardır; bir hex kodu ise yalnızca bir sayıdır. Bir şeyin adı olduğunda tek yerde değiştirilip her yere ulaşabilir ve daha önemlisi sizin seçtiğiniz ad, geliştiricinin koda yazdığı ad hâline gelir.

Prototip, ekranlar arasındaki bağlantıdır. Gerçekte yaptığı şey güzel bir animasyon göstermek değildir; kod yazılmadan önce kullanıcının nereye gittiğini ve nerede takıldığını ortaya çıkarmaktır. Ayrıca müşterinin kendi telefonunda açtığı, paylaşılabilir bir bağlantı verir ve o bağlantı herhangi bir PDF'ten daha iyi iş görür.

Figma'daki diğer her şey, neredeyse istisnasız, bu dört kavramın üzerindeki bir kısayoldur.

Figma'nın ücretsiz planı nereye kadar gidiyor?

Sayıları ikinci elden karşılaştırmalardan değil, Figma'nın kendi sayfalarından okuyoruz.

Fiyat sayfası Starter planını sınırsız taslak, arayüz kitleri ve şablonlar ve günde 150, ayda 500'e kadar yapay zekâ kredisi olarak listeliyor. Planlar yardım sayfası ise fiyat sayfasının bu kadar açık koymadığı bir sınırı yazıyor: tek klasör ve üç dosyalı tek bir takım ve 30 günlük sürüm geçmişi. Professional planı tam koltuk başına ayda 16 dolar.

Taslak ile takım dosyası arasındaki fark, yeni başlayanların tam olarak takıldığı yer. Taslaklar sizindir ve sınırsızdır; üçle sınırlanan şey takım dosyalarıdır. Yalnız çalışıyor ve işinizi taslaklarda tutuyorsanız ücretsiz plan uzun süre yeter. Biri sizinle birlikte düzenlemek zorunda kaldığı anda üç dosya hızla biter.

30 günlük geçmiş de gerçek bir sınır ve pazarlamanın üzerinde durmadığı bir sınır. Bir proje altı ay sürüyorsa, üç ay önceki sürümünüz ücretsiz planda artık geri getirilemez. Basit ve ücretsiz çözümü: projenin dönüm noktalarında ana ekranları dışa aktarıp proje dosyalarının yanında saklayın.

Teslim: güzel dosyanın kötü koda dönüştüğü yer

Figma'nın asıl getirisi çizimde değil teslimdedir. Geliştirici dosyanızdan iki şey ister: ad ve sayı. Adı olmayan bir renk, tekrarlarını tahmin etmek zorunda kaldığı altı haneli bir koddan ibarettir.

Tam da bu siteden bir örnek. rgb.ir'in bütün renk ve biçim katmanı tek bir root bloğunda tanımlı: 28 belirteç, bunların 19'u renk ya da gradyan ve dört yarıçap kademesi: 12, 18, 26 ve 34 piksel. Bu sitenin geliştiricisi hiçbir zaman renk kodu yazmaz; ad yazar. Sonuç şu: kapsül biçiminin siteden gitmesine karar verdiğimizde düğme yarıçapı tek yerde 15, çip tek yerde 12 oldu ve bütün site değişti. Aynı karar kırk Figma çerçevesinde elle tekrarlanmış olsaydı bir günlük iş olurdu.

Yani teslim edilebilir dosya şu demek: her renk, rolüyle adlandırılmış bir stil ya da değişken; boşluklar keyfî sayılar yerine tanımlı bir ölçekten; her bileşen bütün durumlarıyla; ve bir insanın okuyabileceği katman adları. Bu dördü herhangi bir teslim belgesini geçer.

Tartışmayı bitiren bir alışkanlık: Figma adlandırmanızı kodda zaten var olana yaklaştırın. Kodda --blue varsa stil de blue olsun, "açık mavi 2" değil. Bu dersin sonundaki hızlı yol tam olarak bunu, canlı siteden yapıyor.

Figma'da Farsça ve sağdan sola metin

Figma'nın kendi yardım sayfası, Arapça, İbranice, Farsça ve Urduca dâhil sağdan sola metnin desteklendiğini, yönün dil algılamasıyla otomatik yönetildiğini ve bunu elle geçersiz kılabileceğinizi yazıyor. Denetimler üç yerde: kenar çubuğu, Cmd ya da Ctrl ve eğik çizgiyle açılan hızlı eylemler menüsü ve ana menüde Text ile Text direction. Aynı sayfa özelliğin her planda çalıştığını ve Figma Design ile FigJam dosyalarında bulunduğunu söylüyor.

Farsça için daha önemli cümle aynı sayfanın başka bir yerinde: seçtiğiniz yazı tipi girdiğiniz bir karakteri desteklemiyorsa Figma o karakteri bir Noto yazı tipiyle gösterir. Yani metniniz ekranda sağlam görünürken aslında iki yazı tipinden oluşuyor olabilir. Tasarımın sitede yayına girenden ayrılmaya başladığı yer burasıdır ve yakalaması zordur, çünkü hiçbir şey hata vermez.

Kendilerinin yazdığı bir başka sınır: bir metin katmanı yalnızca tek bir hizalama ayarı taşır ve farklı hizalama gereken metin parçası kendi katmanı olmak zorundadır. Farsçada bu sık olur: Farsça paragrafın üstünde Latin bir başlık ya da yerinde kalması gereken bir sayı.

Ve belgelerden değil işi yapmaktan gelen bir nokta: Farsça cümle, İngilizce karşılığıyla aynı uzunlukta değildir. İngilizce tasarımda sığan bir düğme Farsçada taşar ya da boşluk yapar. Yanıtı ilk sütundaki otomatik yerleşim: düğmenin ölçüsünü elinizden değil metinden alın ve her bileşeni bir kez en uzun Farsça metniyle sınayın.

Figma nerede yanlış araçtır?

Yalnızca bu araç iyidir diyen bir ders işin yarısını yapmıştır. Figma'nın yanlış seçim olduğu dört yer var.

• Baskı işi. Katalog, broşür, CMYK ve kesim işaretleriyle matbaaya giden her şey sayfa düzeni aracının işidir.
• Fotoğraf işi. Rötuş, pozlama düzeltme, birkaç fotoğrafın birleştirilmesi; bunlar piksel aracına aittir ve Figma hiçbirini ciddiye almaz.
• Tek sayfalık bir el ilanı. Bir kez yapılan ve tekrarı olmayan iş için bileşen ve stil kurmanın maliyeti geri dönmez.
• Bağlantı güvenilir olmadığında. Tarayıcıda çalışan ve dosyayı sunucuda tutan bir araç internete bağımlıdır. Bu gizlenecek bir kusur değil; bir kullanım koşuludur.

Bir de hukuki bir nokta var; grafik tasarım araçları dersinde daha ayrıntılı: Figma'nın hizmet şartlarında ihracat denetimi ve yaptırımlar için ayrı bir madde var ve uyum için platforma erişimi askıya alabileceklerini yazıyorlar. Bunu kendi belgelerinden aktarıyoruz ve bugün sizin bağlantınızda ne olacağına dair bir iddiamız yok.