Figma tasarım, prototip ve kod oluşturma araçlarına sahip ve tarayıcı tabanlı bir tasarım uygulaması. Bireysel çalışmaların yanı sıra en çok ekip olarak kullanılması uygulamanın favori listelere girmesinde büyük rol oynuyor. UI ve UX tasarım ekiplerinin arayüz tasarımı sürecinin hemen her aşamasında oldukça iş kolaylaştırıyor. Herhangi bir web tarayıcısı çalıştıran tüm işletim sistemlerinde çalışabilen tek tasarım aracı olma özelliğine sahip. Ayrıca donanımı farketmeden tüm kullanıcı mağazalarında Figma dosyalarını paylaşabilir, düzenleyebilirsin.
Bu yazıda; Figma'yı hangi durumlarda kullandığımızı ve tavsiye ettiğimiz özelliklerden birkaçını listeledik.
Tasarım sistemi oluşturmak en temel hareketlerden biri. Tasarımcıların daha hızlı çalışmasına olanak tanır. Mevcut bir ürün için tasarım odaklı düşünme yöntemi uygulamak istiyorsan bu sistemi kurgulamanın büyük artısı olacaktır. Bir tasarım sistemi iyi inşa edilirse ilgili güncellemeleri ve yeniden tasarlama adımlarını da sorunsuz bir şekilde gerçekleştirebilirsin.
Tasarım sistemini oluşturan bileşenlerden dokümantasyona tüm adımları nasıl düzenleyeceğini Figma’nın hazırladığı, üstte yer alan video serisinden öğrenebilirsin.
Figma’da en çok kullanılan tasarım sistemlerinden biri olan “Material Design”ı ve bununla birlikte bir mobil arayüz tasarlamanın yöntemlerini eğitmenimiz Ferdi Çıldız (UI/UX Consultant) eşliğinde öğrenebileceğin Uygulamalı Figma Eğitimimizi de incelemeyi unutma!
Sunum hazırlamamız gerektiğinde -Apple marka bir cihaz kullanıyorsak- aklımıza gelen ilk araç Keynote oluyor. Ancak çok farklı araçlarla ve onların çeşitli imkanlarıyla sunum hazırlamak mümkün. Figma da bunlardan biri. Figma ile kolay ve güzel sunumlar hazırlayabilir hatta Producthunt’ın paylaştığı Figma tasarım template’lerini (ücretsiz) kullanarak sunumunu ilgi çekici görünüme ulaştırabilirsin.
Figma’da tasarımlarının nasıl kodlanacağını yapılandırabiliyorsun. Figma çalışma yüzeyi olarak çerçeveleri kullanan bir yapıya sahip. Ekranı içerik alanlarına ayırmak için bu çerçeveleri farklı boyutlarda üst üste yerleştirerek gruplayabilirsin. Bileşenleri gruplama ve doğru konumlandırmalarla birleştirdiğinde daha hızlı ve düzenli tasarımlar elde edebilirsin. Figma’daki bir çerçeve HTML’daki görünüme benzediği için tasarımını bir Developer’a ilettiğinde senin UI öğeleriyle birlikte oluşturduğun bu kalıp sayesinde kodlamayı daha planlı bir şekilde ve kolaylıkla yapabilecek.
Tasarım ekibinle ofis duvarlarına post-it’ler yapıştırarak yaptığın beyin fırtınasını dijitalde Figma ile yapabilirsin. Uygulamada açtığın bir dosyaya araştırma bulgularını yazıp benzer kavramları temalar halinde ve belli bir mantık sıralamasında gruplandırarak bir ilgi diyagramı kurgulamış olursun. Aynı anda ekipteki herkes gerekli düzenlemeleri yapabilir böylece araştırmanın bir sonraki adımı ve proje için gerekli yapı kurulabilir.
Vectary 3D adlı eklenti sayesinde Figma içerisinde özelleştirilebilir ve etkileşimli 3D öğelere erişebilirsin. Figma’da yaptığın 2D tasarımlara, eklentideki halihazırda tanımlanmış 3D öğeleri yerleştirebilir, tasarımını masaüstü, mobil cihaz ya da ürün ambalajı gibi modellere yerleştirebilirsin. İstediğin perspektifi vererek de ihtiyacına uygun ürün görünümüne ulaşabilirsin.
Figma’nın Smart Animate özelliği etkileşimli tasarım fikirlerini hayata geçirmene olanak tanıyor. Özellikle kullanıcılara ürünün/hizmetin nasıl çalışacağını önceden gösterebilmek için oldukça faydalı. Özellik sayesinde benzer nesnelere otomatik olarak animasyon uygulayabiliyor ve mevcut işlem geçişlerini iyileştirebiliyorsun. Nasıl yapacağını tüm detayları ve örnekleriyle birlikte Figma’nın Smart Animate içeriğinden inceleyebilirsin.
Tasarımı animasyona dönüştürme aşamasını izleyerek öğrenmek istersen de yine Figma’nın hazırladığı videoyu şuraya bırakıyoruz:
Figma üzerindeki çalışmaların esnasında ekibinle iletişim kurmak istiyorsan Slack’ten faydalanabilirsin. Slack’te açacağın bir Figma kanalı sayesinde Figma içerisinde ekip arkadaşlarının yaptığı yorumları ya da tasarımdaki düzenlemelerin bildirimlerine erişebilir, anlık takip edebilirsin.
Ayrıca Figma’nın oluşturduğu “Friends of Figma” adlı topluluğa ait aktif bir çalışma alanı olan Slack kanalına katılabilirsin.
Bir sosyal medya postu hazırlarken her platform için ayrı ölçülerde görseller hazırlıyoruz. Figma'da yeni bir dosya açtığında, klavyede A tuşuna basarak açılan menüden sosyal medya kategorisinde platformların ölçülerine otomatik olarak ulaşabiliyorsun. Sitesinden de ulaşabileceğin sosyal medya görsel boyutu kılavuzu ile platformlardaki görsel özelliklerinin farklılıklarını ve teknik detaylarını öğrenerek paylaşımlarını iyileştirebilirsin.
Userspots olarak yeni yıla geri sayım yaptığımız Aralık ayında 2 haftalık bir UXmas takvimi konsepti paylaşmıştık. Görevler ve ödüller verdiğimiz bu süreçte takipçilerimiz Figma ile birçok keyifli tasarım oluşturdu. Bunlardan biri de uzaktan çalıştığımız bu dönemi birbirimize görsellerle aktarmak oldu. Noah Levin (Director of Design @Figma) ve ekibinin yapmış olduğu bu çalışmadan esinlendik ve katılımcılar evdeki çalışma ortamını Figma ile sanallaştırarak Space Club komünitemizle paylaştı. Levin’in paylaştığı template’leri de kullandık. Sen de istersen komünitemize katılabilir, çalışmaları Ana Sayfa’da yer alan UXmas 4. gün paylaşımımız altından inceleyebilirsin :).
Ayrıca Space Club özelinde düzenlediğimiz; iki haftada bir ürettiğimiz içeriklerle tool’ları anlattığımız hatta soru-cevap yaparak bilgilerimizi güçlendirdiğimiz “Tool of the Week” adlı serimizde 15-25 Ocak tarihlerinde Figma’yı konuşuyor olacağız. Figma ile daha neler yapabileceğini keşfetmek istiyorsan serimizi takip et! Çünkü bu liste Figma tool’la yapılabileceklerin minik bi’ kısmıydı :).
.jpg)
