Mini Eğitim – Tüm Tasarım Süreci için Figma'nın Özelliklerinden Yararlanma

Gelişmekte olan tasarım araçları dünyası inanılmaz derecede heyecan verici. Umut verici yeni programlar hızla art arda başlatılıyor, ancak özellikle daha büyük ve çoğunlukla dağıtılmış tasarım ekipleri için yavaş yavaş en iyi seçim haline gelen bir program var.

Figma, tüm tasarım sürecini uçtan uca destekleme potansiyeline sahiptir. İlk skeçler, geri bildirim toplama, işbirliği, teste hazır prototipler ve geliştirici aktarımı, yetenekleri dahilindedir. Figma ayrıca diğer tüm paydaşların yanı sıra ürün yöneticilerinin ve tasarım liderlerinin çalışmalarını da basitleştirir.

Peki, Figma'yı rekabetten ayıran nedir? Birkaç kilit nokta var, ancak hepsi Figma'nın web tabanlı olduğu gerçeğine kadar takip edilebilir. Bu, alet ilk piyasaya sürüldüğünde çok fazla ilgi uyandırdı, ancak nihayetinde Figma'nın esnekliğinin ve benzersiz işlevlerinin yolunu açtı.

Sorunsuz Bir Ürün Tasarım Sürecinin Temeli Nedir?

Her takımın ve projenin farklı bir iş akışı olabileceği doğru olsa da, ürün tasarımı ve yönetiminin temel bileşenleri olan işlevler ve aşamalar vardır. Figma her birini kapsar.

1. Erişilebilirlik ve işbirliği . Bir ekibin kullandığı araçlar ne olursa olsun, birlikte çalışmanın, projeler sunmanın, geri bildirim toplamanın ve paydaşları döngüde tutmanın bir yolu olmalıdır. Tüm bu özellikler Figma'da mevcuttur.
2. Teslimatları yineleme ve üretme esnekliği . Figma esnektir ve ilk fikirlerin eskizini yapmak ve tel çerçevelerden yüksek kaliteli maketlere kadar her şeyi yinelemek için ortak bir beyaz tahta olarak kullanılabilir.
3. Prototip oluşturma ve test etme yeteneği . Mobil uygulama mı tasarlıyorsunuz? Etkileşimli prototipler oluşturun ve yayınlayın ve bunları doğrudan akıllı telefonlarda test edin; hepsi Figma'dan.
4. Tek bir hakikat kaynağı oluşturmak . Figma, tamamen çevrimiçi olan ürün tasarım sistemlerini tanımlamanın mükemmel bir yoludur. Varsayılan olarak tek bir gerçek kaynağıdır. Artık merak etmeyin, “Bu en son sürüm mü?”
5. Pürüzsüz devir . Geliştiricilerle bir bağlantı paylaşmanız yeterlidir; tasarımın uygulanması için gereken tüm bilgilere - kırmızı çizgiler, ölçümler ve dışa aktarılmaya hazır grafik varlıkları - erişebilirler.
6. Özelleştirilebilir ve geliştirilebilir çok yönlülük . Figma'nın eklenti API'si, ekiplerin kendi eklentilerini yazmasına veya daha geniş kullanıcı topluluğuna erişmesine ve aracı yeni işlevlerle genişletmesine olanak tanır.

1. Erişilebilirlik ve İşbirliği

Ekibi Gemiye Alın

Figma'nın yukarıda ele alınan altı temel alana nasıl katkıda bulunduğuna daha yakından bakalım. Yeni kullanıcılar ücretsiz bir Figma hesabı oluşturmak, bir ekip kurmak ve Figma'yı kullanmaya başlamayı izlemek isteyebilir. Ekip oluşturulduktan sonra ekip üyelerini ve ilgili paydaşları katılmaya davet edin.

Üç erişim düzeyi mevcuttur. Oldukça açıklayıcıdır, ancak genellikle tasarım ekibine düzenleme hakları verilir ve diğer herkese görüntüleme hakları verilir. Buna, tasarım sürecini takip edebilmesi ve geri bildirim sağlayabilmesi gereken geliştiriciler ve diğer paydaşlar dahildir.

Ekip düzeyinde (yukarıda gösterilmiştir), proje düzeyinde ve dosya düzeyinde benzer paylaşım seçenekleri mevcuttur. Erişim seviyeleri belirtilmemişse, ekipten projeye ve projeden dosyalara yayılırlar.

Figma tarayıcıda mevcut olduğundan, birinin nasıl davet edildiği veya hangi sistemde olduğu önemli değildir. Kullandıkları cihaz ve tarayıcı minimum gereksinimleri karşıladığı sürece, bir bağlantı ile doğrudan atlayabilirler ve düzenleme veya görüntüleme haklarına sahip olmalarına göre arayüz değişir.

Proje Dosyasını Gömmek

Figma proje dosyaları üçüncü taraf yazılımlara gömülebilir. Örneğin, bir projenin mevcut durumunu sunmak için paylaşılan bir Dropbox Paper belgesi kullanılabilir.

Proje dosyalarını gömmek için dosya görünürlüğünü Bağlantıya sahip olan herkes - görüntüleyebilir , gömme kodunu kopyalayabilir ve proje dosyasını embed.ly'yi destekleyen herhangi bir üçüncü taraf yazılıma gömebilir olarak ayarlayın.

Geribildirim ve Revizyonlar

Ürün tasarım süreci için bir diğer önemli işlev, tasarımları dağıtma, geri bildirim toplama ve revizyonları yönetme yeteneğidir. Figma bağlantısı olan herkes en son sürümü görebilir ve geri bildirimde bulunmak istediği noktaya doğrudan yorum yapabilir.

Ekip üyelerini etiketlemek için @ karakterini kullanın, sistem aralarından seçim yapabileceğiniz bir isim listesi sunacaktır. Bunu yapmak ekip üyelerini bilgilendirir ve geri bildirim işlendikten sonra Çözümle öğesine tıklayarak tartışmalar kapatılabilir.

Takımları uyumlu tutmak için, Figma dosyalarından tartışmaları belirlenmiş bir Slack kanalında yayınlayabilen güzel bir entegrasyon var.

Gerçek Gerçek Zamanlı İşbirliği

Figma'nın daha ilgi çekici işlevlerinden biri, çok oyunculu dedikleri şeydir. Birden fazla ekip üyesinin aynı anda bir tasarım dosyasını açmasına ve üzerinde çalışmasına olanak tanır. Dosya üzerinde çalışan herkes sayfanın sağ üst köşesinde görünür ve avatarları isimlendirilir ve tıklanabilir.

Bunun pratik anlamda ne anlama geldiğini anlamak biraz zaman alabilir. Tasarımcıların bir dosyanın aynı parçası üzerinde aynı anda çalışmak için çok oyunculu modu kullanmaları pek olası olmasa da, özellikle daha büyük dağıtılmış ekipler için dosya sürümü çakışması konusunda endişelenmek zorunda kalmamak inanılmaz derecede rahatlatıcı.

Çok oyunculu, uzaktan sunum yaparken kullanışlıdır çünkü dosyaya bağlı herkesin sunucunun görüş alanını takip etmesini mümkün kılar. Ayrıca ekiplerin ek programları atlamasına ve Figma'yı çevrimiçi bir beyaz tahta olarak kullanmasına olanak tanır (miro gibi belirli çözümler nihayetinde iş için daha uygun olabilir).

Bu amaçla, belirli varlıkları sanal post-it notları veya diyagram öğeleri olarak çoğaltmak için özel bileşenler oluşturmanız önerilir.

2. Çıktıları Yineleme ve Üretme Esnekliği

Ekip üyeleri davet edildikten ve ilk çizimler başladığında, yineleme için Figma kullanılabilir. Figma'nın yaratılmasının ana nedeni arayüz tasarımıdır - beyaz tahta bittiğinde ekipler akış haritalarına ve tel çerçevelere geçebilir. Yine, bu görevler için yeniden kullanılabilecek bileşen kitaplıkları oluşturmak akıllıcadır. Resmi şablon koleksiyonu, başlangıç ​​için ilham ve tasarım düzenlemeleri sağlar.

3. Prototip Oluşturma ve Test Etme Yeteneği

Figma ile interaktif prototipler oluşturmak oldukça kolaydır. Düzenleme haklarına sahip bir Figma dosyası açıldığında, tasarım ve prototipleme modu arasında geçiş yapmak mümkündür. Prototip modundayken, sahneden veya katmanlar kenar çubuğundan etkileşimli hale getirmek için bir öğeye tıklamak mümkündür.

Prototip modunda bir eleman seçiliyken, yanda küçük bir daire belirir. Sürüklendiğinde mavi çizgiler belirir ve etkileşimin sonucunu göstermek için ekrana veya duruma bırakılabilir.

Figma'da ortak geçişler mevcuttur, bu da yüksek kaliteli prototipler oluşturmayı çok daha kolay hale getirir. Aslında, Figma ekibi kısa süre önce akıllı bir canlandırma ve sürükleme tetikleme özelliği yayınladı. Akıllı animasyon özelliği, benzer öğelerin hareketini enterpolasyon yaparken, sürükleme tetiği yeni bir etkileşim türüdür. Her ikisi de etkileşimli prototiplerin kalitesini büyük ölçüde artırır.

Kullanıcı Testi

Yine, kullanıcı testi için bile Figma prototiplerini dağıtmak için gereken tek şey bir bağlantıdır. Sağ üstteki küçük oynat simgesine tıklamak prototipi başlatır ve yeni bir URL oluşturulur. URL'yi kopyalamak veya mavi Share Prototype düğmesini kullanmak mümkündür. Kullanıcılar bağlantıyı açtıklarında, kendilerine etkileşimli bir prototip sunulur ve istenirse yorum bırakabilirler.

Mobilde Test Etme

Mobil cihazlar için tasarımlar, prototipi çevreleyen gerçek bir cihazın maketi ile sunulur. Etkileşimi test etmek için daha fazla gerçekçilik gerekiyorsa, cihaza özel testler için Figma Mirror uygulamasını indirmek en iyisidir.

4. Tek Bir Hakikat Kaynağı Oluşturmak

Sürüm Geçmişi

Proje dosyalarının her zaman güncel olması ve sürekli yedeklenmesi harika olmaz mıydı? Bu işlevsellik, varsayılan olarak Figma'da bulunur. Her dosya üzerinde çalışırken otomatik olarak kaydedilir ve Figma, 30 dakika boyunca işlem yapılmadığında sürüm geçmişinde yeni bir giriş oluşturur. Otomatik olarak kaydedilen tüm sürümlerin bir günlüğü oluşturulur ve gerekirse her sürüm geri yüklenebilir.

Elbette, otomatik sürüm oluşturma, işten tasarruf etmek için tek seçenek değildir. Bir sürümü manuel olarak kaydetmek veya sürüm geçmişinde belirli bir sürümü düzenlemek mümkündür.

Tasarım Sistemleri ve Bileşen Kitaplıkları

Figma'nın öne çıktığı bir diğer yön, tasarımcıların bileşen kitaplıkları oluşturmasına, düzenlemesine ve dağıtmasına nasıl izin verdiğidir. Herhangi bir dosya bir kitaplık olarak yayınlanabilir ve diğer Figma dosyalarında kullanılmak üzere her renk, metin stili, efekt, ızgara veya bileşen mevcuttur.

Kitaplıktaki herhangi bir öğede değişiklik yapıldığında, düzenlemeler yayınlanabilir ve bu öğeleri kullanan dosyalara yayılabilir. Bu dosyalar üzerinde çalışan tasarımcılar daha sonra düzenlemeleri kabul edip etmemeye karar verebilir.

Kitaplık öğelerinin görünürlüğünü veya görünmezliğini değiştirme seçeneğiyle birlikte kitaplıkların nasıl dağıtılacağına karar verme yeteneği, tüm deneyimi sorunsuz ve güçlü kılar.

Bileşenler ve kitaplıklar, ilgili herkes için her şeyin sürümlendirildiği ve güncel olduğu karmaşık tasarım sistemleri oluşturmak üzere iç içe yerleştirilebilir. Ve tüm bileşenlere yorumlar eklenebilir.

5. Pürüzsüz Aktarım

Geliştirici Aktarımı

Figma ile tasarımcılar ve geliştiriciler, aktarımı yönetmek için Zeplin gibi ayrı bir araca ihtiyaç duymazlar. Yalnızca görüntüleme erişimiyle bile dosyaları açabilir ve sağ kenar çubuğunda Kod moduna geçebilirler.

Kod modu etkin olduğunda, sahnede bir öğenin seçilmesi, uygulama için gereken tüm ilgili bilgileri ortaya çıkaracak ve diğer öğelere göre bileşen konumuyla ilgili tüm diğer bilgiler görünür olacaktır. Benzer çözümlerde olduğu gibi, oluşturulan kodun tamamen kopyalanıp yapıştırılması amaçlanmamıştır, ancak bu kadar kolay erişime sahip olmak yararlıdır.

6. Özelleştirilecek ve Geliştirilecek Çok Yönlülük

Figma API'leri ve Özel Eklentiler

Figma'nın API ve eklenti sistemi, çok çeşitli tasarım ekiplerinin ve disiplinlerin programı kendi özel süreç ihtiyaçları için özelleştirmesini kolaylaştırır. Figma'nın esnekliği, kullanıcılara platformla programlı olarak etkileşim kurma yeteneği verir. Birkaç örnek:

Gerçek Verileri Kullanma

Maket ve prototiplerde gerçek verileri kullanabilmek son derece değerlidir ve Figma, harici kaynaklardan içeriğin içe aktarılmasına izin vererek bunu mümkün kılar. Gerçek içerikten yararlanarak tasarım bileşenlerini stres testi yapmak, maketleri güncel tutmak ve tasarımla ilgili olmayan ekipleri dahil etmek mümkündür.

Google Sheets Sync adlı bir eklenti, neler yapılabileceğinin mükemmel bir örneğidir. Bu eklenti, Figma dosyalarındaki bileşenlerin içeriğini doldurmak ve senkronize etmek için Google E-Tablolar'ı bir kaynak olarak entegre etmeyi kolaylaştırır.

Gelişmiş İş Akışları

Bir tasarım sistemini bir UI tasarım programı içinde barındırma yeteneği, yalnızca sistemin müşteriye dönük ekranlarda tutarlı bir şekilde uygulanması durumunda değerlidir. Neyse ki, yardımcı olabilecek Figma API'leri, eklentiler ve entegrasyonlar var.

Storybook eklentisi, Figma dosyalarını senkronize eder ve Figma tasarım bileşenlerini, uygulanan bileşenlerin yanında bir panelde gösterir. Bir başka ilginç kullanım örneği, Figma bileşenlerini koda dönüştüren bir iş akışı geliştirmesi olan Figma to React Converter'dır.

Figma'nın Özellikleri Tüm Tasarım Süreci İçin İdealdir

Her tasarımcının veya tasarım probleminin ihtiyaçlarını karşılayabilecek tek bir tasarım programı yoktur ve bu iyi bir şeydir. Tasarım araçları arasındaki rekabet, tasarımcılar için avantajlıdır. Araçlarımızı yapan firmaların ihtiyacımız olanı dinlemesini sağlar ve yaptığımız işlere uygun güncel özellikleri bize sunar.

Bununla birlikte, Figma, tüm dijital tasarım sürecinin üstesinden gelmekten daha fazlasını kanıtlamış, gelişmiş ancak sezgisel bir araçtır. Bireysel tasarımcılar ve ekipler, benzersiz işbirliği ve yineleme özelliklerinden yararlanabilir ve programın yetersiz kaldığı yerlerde çok sayıda eklenti boşluğu doldurur.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Bir Tasarım Aracı Olarak Figma'nın Gücü
• Figma - Sketch - Axure - Göreve Dayalı Bir İnceleme
• Mini Eğitim – Figma Düğme Bileşenleriyle Çalışma
• Bu En İyi UX Araçları ile İşinizde Ustalaşın
• Hassas Tasarım – Bir Adobe XD İncelemesi