Skip links

Figma 101: Kullanıcı Arayüzü Tasarlamaya Başlayın

Dijital projeler için tasarlanan bulut tabanlı prototiplere figma adı verilir. Figma sayesinde kullanıcılar aynı projelerde ortak bir şekilde çalışabilir. Her yerden bu projelere erişme imkanı vardır. Tüm platformlarda çalışabildiği için diğer bulut tabanlı tasarım araçlarından farklıdır. Mac veya Windows kullansanız bile proje için dosyaları paylaşırken herhangi bir sıkıntı yaşamazsınız. Figma ile kullanıcı arayüzü tasarımı yaparken şu adımları izlemelisiniz:

  • Yeni çerçeveler kurma: Sağ kısımda bulunan özellikler paneline girerek A ve F’ye basın ve çerçeve seçenekleri görün. Bunlar arasından çalışmak istediğiniz boyutu seçebilir veya kendi çerçevenizi çizebilirsiniz.
  • Kılavuz ve sütunlar: Eğer mobil uygulama tasarlayacaksanız 8 noktalı ızgarayı tercih edebilirsiniz. Sağ taraftaki ızgara menüsünden ayarlama yapabilirsiniz.
  • Katmanlar: Ekranın sol kısmındaki katmanlar panelinden şunları yapabilirsiniz: Katmanlar, katmanları gruplama, sayfalar, varlıklar ve iç içe çerçeveler.
  • Resimler: Resmi çalıştığınız alan sürükleyip bırakın. Özellikler penceresinden Doldur seçeneğine tıklayıp görüntü özelliklerini değiştirebilirsiniz.
  • Tipografi: Google fontlarını veya yerel fontları kullanabilirsiniz. Projeye erişen herkeste aynı yazı tiplerinin yüklü olması gerekir.

Figma Nasıl Kullanılır?

Bir tasarım programı olan Figma’nın kullanımı son derece basittir. Genellikle web arayüzü tasarlamak için tercih edilse de mobil uygulama tasarımı için de kullanılır. Kullanıcı arayüz tasarım programları arasında kullanışlılığı ile ön plana çıkmıştır. Çünkü öncelikle bulut tabanlı bir web tarayıcısı programıdır. Yani herhangi bir indirme veya yükleme zahmeti yoktur. Ayrıca çalışmaları otomatik olarak kaydettiğinden çok kullanışlıdır. Hem Windows hem de MacOS sistemli cihazlarda açılabilen tek tasarım programıdır. Bu yüzden oldukça fazla kişi tarafından kullanılır. Özellikle ekip çalışması yapan kişilerin sıklıkla tercih ettiği bir programdır. Çünkü herkes farklı tabanlı sistemlerden çalışır. Figma sayesinde farklı bilgisayarlardan çalışmaları takip etmek mümkündür.

Figma’da tasarım yapmaya başlamak için yalnızca web sitesine girip üye olmanız yeterlidir. Sonrasında ücretsiz bir şekilde çalışmaya başlayabilirsiniz. Ayrıca mobil uygulamasını indirerek her yerde erişimi daha da hızlandırabilirsiniz. Figma nasıl kullanılır sorusuna kaba hatlarıyla bu şekilde yanıt verilebilir. Tasarımda kullanılan diğer araçları kullanmak Figma’ya üye olup detayları inceleyebilirsiniz.

Figma Kullanmanın Avantajları Nelerdir?

Figma kullanımı ile birbirinden güzel tasarımlar oluşturabilirsiniz; hem de çok kolay bir şekilde. Figma’nın sunduğu artılar şu şekilde sıralanabilir:

  • Diğer tasarım araçlarında olduğu gibi Figma’da kurulum veya deneme süresi yoktur. Ücretsiz bir şekilde web sitesinde üye olabilirsiniz. Ancak deneyiminizi yükseltmek ve daha profesyonel çalışmak için ücretli paketleri satın alabilirsiniz. Web tarayıcısında girip tasarım yapmanız mümkün. Eğer isterseniz mobil uygulamasını da indirebilirsiniz.
  • Özellikle uzaktan çalışan bir ekipseniz tam size göre. Tasarım yaparken ortak çalışmak isterseniz tercih edebilirsiniz. Geri bildirim gönderebilir veya çalışmalara yorum yapabilirsiniz. Ekiple paylaşım yapmak için Figma tasarım dosyasının linkini göndermeniz yeterli.
  • Figma’yı dilerseniz Slack ile entegre edebilirsiniz. Bu sayede yapılan değişiklikler ve yorumlar hakkında anında bilgi sahibi olabilirsiniz.
  • Gerçekleşen tasarım aşaması tamamen web tarayıcısından olduğu için her şey oldukça hızlıdır. Çökme ve gecikme olmadan sorunsuz bir şekilde tasarım yapabilirsiniz.
  • Bulut tabanlı çalıştığı için çalışmaları otomatik olarak kaydeder. Bu yüzden tasarımınızı kaydetmeyi unutma konusunda endişelenmenize gerek kalmaz.
  • Prototip haline getirmek oldukça basittir. Başka bir platforma yükleme yapmaya gerek kalmadan tasarımlarınızı prototipleştirebilirsiniz.
  • Figma’nun mobil uygulaması olan Figma Mirror ile telefonunuzdan da kullanım yapabilirsiniz. Hem telefonunuzdan hem de bilgisayar ekranınızdan eşzamanlı olarak görüntüleyebilirsiniz. Ayrıca prototip deneyimi yaparak gerçeğe en yakın kullanılabilirliği de test edebilirsiniz.
  • Geliştirme ekibi, tasarımlarınızı düzenleme yetkileri olmadan yalnızca görüntüleyebilir. Tasarımdaki herhangi bir varlığı dışarı aktarabilir. Bu sayede developer’a aktarmak için başka bir uygulamaya gerek duymazsınız.

Kolay bir Figma eğitimi ile siz de arayüz tasarımları yapmaya başlayabilirsiniz.

Kullanıcı Arayüzü Nedir?

İngilizcesi user interface olan kullanıcı arayüzü kısaca UI şeklinde gösterilir. Kullanıcıların isteklerini ve ihtiyaçlarını tahmin edip bunlar üzerine bir arayüz geliştirmeyi içerir. Kullanıcılar, web sitelerinde ilk olarak arayüzle karşılaşır. Bu yüzden web sitesinin arayüzü kullanıcılar açısından ilgi çekici olmalıdır. Arayüzler farklı amaçlarla kullanılabilir. Kimi hemen bilgiye ulaşmak için, kimi zaman geçirmek için, kimi oyun oynamak için kullanabilir. Bu noktada önemli olan tek şey tabii ki tasarım değildir. Kullanılabilirlik, erişilebilirlik, verimlilik de ön planda tutulmalıdır. Web arayüz tasarımı kadar mobil uygulama tasarımında da UI oldukça önemlidir. Etkileşimi artırmak için UI tasarımında pek çok bileşen bulunur. Bu bileşenler doğru seçmek, kullanıcı deneyimi açısından oldukça önemlidir. İyi bir kullanıcı arayüzü tasarımında bulunması gereken unsurlar şunlardır:

Görsel tasarım: Renk, font, resim gibi görsel ögeleri içerir. Bunların birbirleriyle uyum içinde olması sitenin estetik açıdan daha değerli olmasını sağlar. Görsel tasarım ne kadar profesyonel olursa kullanıcıların site deneyimi o kadar iyileşir.

Etkileşimli tasarım: Kullanıcıların teknoloji ile kurdukları iletişim üzerine odaklanır. İyi bir etkileşimli tasarım yalnızca kullanıcıların siteyle kurdukları iletişimini tespit etmekle kalmaz; ayrıca hataları da hızlı bir şekilde çözer.

Bilgi inşası: Kullanıcıların ihtiyaçları olan bilgilere ulaşabilmelerini sağlar. Bir yardımcı gibi de düşünülebilir. Web sitesi içeriğinin daha erişilebilir ve sürdürülebilir olması için gerekli düzenlemeleri kapsar.

Kullanıcı arayüzü nedir ve neleri kapsar sorularına kısaca bu şekilde yanıt verilebilir.