Figma İle Prototip Sunumları Nasıl Yapılır?

May 06, 2022

Figma prototipleri ürün tasarımında kullanışlı bir özellik. Ürün tasarımında prototipler beraber çalıştığınız ekipten ve projenin diğer paydaşlarından geri bildirimin almak için kritik aşamalardan biri. Prototipler oluşturmak, düzenlemek, paylaşmak ve sunmak için kullanabileceğiniz birçok araç var. Adobe XD, Sketch, Figma, Invision ve MarvelApp bunlardan bazıları. 

Bu makalede, prototip sunmak için Figma kullanımına odaklanacağız. Figma yeni denilebilecek, birçok farklı türde dijital tasarım için kullanabileceğiniz, birçok fonksiyonu bulunan bir tasarım uygulaması.

Figma prototipleme, tasarlama, işbirliği ve paylaşma gibi amaçlarla kullanabileceğiniz birçok farklı araca sahip. Tasarım ve prototipleme amacıyla kullanabileceğiniz diğer uygulamalara kıyasla kullanılabilirliğinin yüksek olması ve kolay arayüzü sayesinde 2017 yılından itibaren hızla popülarite kazanmaya başladı ve özellikle UX/UI tasarımı uzmanları arasında yaygınlaştı.

Web tabanlı bir uygulama olan Figma yalnızca UX/UI tasarımcıları için değil, birçok farklı  uzmanlığa sahip profesyonel için kullanımı kolay özellikler taşıyor. Figma’yı asıl değerli kılan nokta işbirliğini mümkün kılması. Mühendisler, yazılımcılar, tasarımcılar aynı dosya üzerine dinamik bir şekilde çalışabiliyorlar.

Beraber çalışılabilen prototipler sayesinde ürün geliştirme ve tasarlama sürecinde yaygın olan birçok sorun aşılabiliyor. Şema tasarımı, modelleme ve prototipleme için kullanabileceğiniz Figma ile bazen dakikalar içinde fikrinizi sunulabilecek tasarımlara dönüştürebilirsiniz. 

Figma Nedir?

Figma uzaktan işbirliği yapmayı mümkün kılan web tabanlı bir tasarım platformudur. Aynı zamanda bulut tabanlı bir araç olduğundan neredeyse her tarayıcıda ve cihazda, her yerden kullanılabilir. Online olduğundan tüm ekip aynı tasarım dosyasını görüntüleyip aynı anda dosya üzerinde değişiklikler yapabilir.

Tasarımlar canlı olarak güncellendiğinden ekipteki herkes aynı anda aynı güncellemeleri görüntüleyebilir. Böylece dosyaları depolamak, diğerlerine iletmek, üçüncü taraf depolama araçlarıyla paylaşmak zorunda kalmazsınız. 

Figma’nın temel özellikleri gerçek zamanlı işbirliği, pürüzsüz ve kapsayıcı tasarım süreçleri, tasarımdan koda geçişin kolay olması, tasarım sistemleri oluşturma sürecinin esnek ve kolay olması olarak sayılabilir. 

Özellikle tasarımın tamamını henüz oluşturmadıysanız Figma’yı ürün tasarımı için kullanmak idealdir çünkü Figma tasarımcılara ve diğer katılımcılara projenin her aşamasında beraber çalışma şansı verir. Böylece tasarımla ilgili tasarımın tamamını oluşturmadan, kullanılacağı kesin olmayan bir sonuç için çaba harcamadan önce geri bildirim almak kolaylaşır. Ürün döngüsünün hangi aşamasında olursanız olun Figma ile gerçek ürüne çok benzeyen prototipler oluşturabilir ve prototiplerinizi ekiple paylaşabilirsiniz. 

Prototipleme Nedir?

Prototipleme konseptine aşina değilseniz, “Lean UX” kitabının yazarı Jeff Gothelf’in açıklaması sizin için ideal olabilir:

En aslına uygun modeller bile, nihai sonucun değil, yalnızca fikirlerin somut temsilleri anlamına gelir. Paydaşlar etkileşimli bir prototip gördüğünde ve onunla etkileşime girdiğinde, ürünle etkileşimin nasıl hissettirebileceğini ilk elden deneyimleyebilirler.

Jeff Gothelf

Prototipler ile şema tasarımı, modelleme gibi diğer tasarım gösterme yöntemleri arasındaki temel fark işlevsellik olarak özetlenebilir. Prototipler, tasarıma işlev ekleyerek paydaşların ve geliştiricilerin deneyimi deneyimlemesine olanak tanır.

Şema Tasarımı
(Wireframe)
Modelleme
(Mockup)
Prototipleme
(Prototype)
AmaçYapı hakkında iletişim kurmak ve erken geri bildirimler edinmek. Tasarımı göstermek.Tasarımı ve işlevselliği göstermek. 
BağlayıcılıkDüşük.Yüksek.Yüksek.
İşlevsellikYok.Yok.Var.
Yetenek GerekliliğiDüşük.Yüksek.Yüksek.
Zaman İhtiyacıAz.Orta.Çok.
Ürün Döngüsü AşamasıKeşif.Tasarım.Prototipleme ve test. 
Wireframe, Mockup ve Prototipleme Arasındaki Farklar

Tasarımınızı Sunmak İçin Figma Prototiplerini Nasıl Kullanırsınız?

Ürün ve tasarım hakkında ortak bir anlayışa ulaşmak ürünün başarısı ve tarafların memnuniyeti için en önemli noktalardan biri. Sürekli geri bildirim almanın ve bakış açılarını dinlemenin birçok yolu var. Tasarıma işlevsellik ve etkileşim kazandıran prototipler de bunlardan biri. 

Figma’yı prototipler oluşturmak ve sunmak için kullanabilirsiniz. Figma’nın efektifliği gerçek ürüne yakın sonuçlar oluşturabilmenizde saklıdır. Figma’nın özellikleri prototiplemenin yanı sıra izleyicilerin tasarımla etkileşime girmesini de kolaylaştırır. Projenin katılımcıları, müşteriler veya çalışma arkadaşlarınız prototiplerle etkileşim kurduğunda tasarıma yönelik anlamlı geri bildirimler sağlamaya meyillilerdir.  

Figma_kullanarak_prototip_sunumu_nasıl_yapılır

Figma’da prototipler oluşturarak çerçeveleri birbirine bağlayabilir ve tetikleyiciler kurabilirsiniz. Gerçek sonuca yakınlaştırmak için geçiş görüntüleri ekleyebilirsiniz. Takip edebileceğiniz bir Figma’da prototipleme süreci bu adımlardan oluşur:

  1. Prototipleme modunu açın. 
  2. Prototip etkileşimlerinizi tasarlayın. 
  3. Elementleri seçin.
  4. Animasyonlarınızı seçin. 
  5. Başlangıç çerçevelerini özelleştirin. 
  6. Elementleri aynı çerçevede birbirine bağlayın.
  7. Önizleyin. 

Sunumlar İçin 3 İpucu 

Figma’nın prototipinizi müşteriye veya projenin diğer paydaşlarına sunmak için sunum görünümü bulunur. Prototipi e-postayla veya link göndererek paylaşabilir, kimin görüntüleyebileceğini kontrol edebilirsiniz. Doğrudan dosyayı müşteriyle paylaşarak dosya üzerinde değerlendirme ve geri bildirim talep etmeniz de mümkündür. 

Figma sunumları oldukça kolay hale getiren özelliklere sahip olsa da, bazı ipuçlarını dikkate almak işinizi kolaylaştırabilir. Prototiplerinizi sunmak için kullanabileceğiniz 3 ipucunu bu yazıda listeledik: spesifik cihazlar için özelleştirme, ideal ölçeğinizi bulma ve tam ekran modu.

1. Spesifik Cihazları Bulun

Eğer prototipinizin spesifik cihazlar için yapıldıysa veya ürünün belirli cihazlardaki fonksiyonları sunumunuz için önemliyse, çerçevelerinizi o cihazda görüntülemek için Figma’daki seçenekleri kullanabilirsiniz. Cihazın rengini bile seçebilirsiniz. (Iphone 13 Pro’nun yeşili henüz seçenekler arasında değil, Figma’nın bunu fark etmesini bekliyorum. 🙄)

Bu özellik sayesinde prototipiniz sonuç ürüne en yakın haliyle deneyimlenebilir. Aşağıdaki ekran görüntüsünde olduğu gibi, amaçladığınız cihazı seçmeniz yeterli: 

Figma_kullanarak_prototip_sunumu_nasıl_yapılır
Figma_kullanarak_prototip_sunumu_nasıl_yapılır

2. İdeal Ölçeğinizi Bulun

Ekran boyutları ürünün hissini prototip aşamasında yansıtmak için çok önemli. Figma kanvas boyutunu değiştirmenize izin verir. Eğer tasarım sunum yapmak için seçtiğiniz cihazın ekran ölçülerine uygun değilse tasarımı yeniden ölçeklendirmeniz gerekir. 

Ölçeklendirme için seçenekleriniz ekrana sığdır, gerçek boyutta tut ve genişliği  uydur olarak 3 tanedir. Mutlaka bunlardan biri sizin durumunuz için işe yarayacaktır. 

Figma_kullanarak_prototip_sunumu_nasıl_yapılır

3. Zen Modunda Kalın: Tam Ekran

Son olarak, sunum sırasında sizin ve izleyicilerin odağını kaybetmemesi çok önemli, değil mi? Sunum modundayken üst sağ köşedeki genişlet butonunu kullanarak sunumunuzu tam ekran yapabilirsiniz. Böylece ekrandaki tüm dikkat dağıtıcı elementler ekranınızdan uzaklaşacaktır. 

Diğer prototip akışlarına atlarsanız, hepsi sol kenar çubuğunda listelenir. Örneğin Masaüstü, Tablet ve Mobil akışlar için akışlar oluşturabilirsiniz.

Figma_kullanarak_prototip_sunumu_nasıl_yapılır

Özetle,

Figma, projenizi bir sonraki seviyeye taşıyabilecek gelişmiş prototipleme ve işbirliği özelliklerine sahiptir. Figma’yı doğru bir şekilde kullanarak fikirleri sergilemekten daha fazlasını yapabilirsiniz. Böylece ekibinizin ve müşterilerinizin neyi anlatmak istediğinizi göreceğinden emin olabilirsiniz.

Reyda Dönmez

Reyda Dönmez

OUR E-BOOK

Startup Founder'sActionable Guide toDigital Products

Startup Founder’s Actionable Guide to Digital Products

SOCIAL @ INSTAGRAM

@tio.ist

@tio.ist

@tio.ist

@tio.ist

@tio.ist

@tio.ist

@tio.ist

@tio.ist

ALSO ON TWITTER, LINKEDIN, YOUTUBE