Figma Tasarım Aracında Uzmanlaşma: Faydalı İpuçları ve Nasıl Yapılır

Yayınlanan: 2019-03-26

Google Dokümanlar ile çalışan herkes bunun ne kadar kullanışlı olduğunu bilir - dosyalarınızı web'de düzenlemek, ortak çalışmak ve kaydetmek kolaydır. Ya web tasarımcıları projeleri için aynı araca sahip olsaydı? Aslında bir taneleri var ve bu Figma. Bu Figma incelemesinde, platformu tasarımcıların tercihi aracı yapan en parlak özellikleri konusunda size rehberlik edeceğiz.

Figma nedir

Figma, yalnızca Mac OS veya Windows üzerinde çalışan diğer popüler tasarım araçlarının aksine Linux üzerinde de çalışabilen bulut tabanlı bir tasarım aracıdır. Böylece bu platform, farklı işletim sistemleri kullanan ve çalışmaları için SVG kodu, CSS ve iOS veya Android kodu oluşturması gereken tasarımcıların işbirliğine olanak tanır.

Platform, kullanıcılarının tek bir platformda tasarımlar oluşturmasına, prototipler yapmasına ve geri bildirim toplamasına olanak tanır.

Neden Figma'yı kullanmalısınız?

Figma tasarım aracının güzelliklerine dalmadan önce, bu platformu tasarımcılar için bu kadar çekici yapan şeyin ne olduğuna bir göz atalım.

  1. Web tabanlı. Figma tarayıcınızda çalışır ve projelerinizi bilgisayarınıza ayrı dosyalar olarak kaydetmenize gerek kalmadan çalışabilirsiniz - tüm düzenlemeler otomatik olarak bulutunuza kaydedilir. Ancak unutmayın, tüm değişiklikleri kaydetmek için aktif bir internet bağlantısına ihtiyacınız olacak.
  2. Takım çalışmasına izin verir . Figma ile, tümü fiyatlandırma planınıza bağlı olarak, iki ila sınırsız sayıda editörden oluşan bir ekibe sahip olabilirsiniz. Tek bir proje üzerinde kaç ekip üyesinin çalıştığını ve ne gibi değişiklikler yaptıklarını her zaman görebileceksiniz.
  3. Yalnız tasarımcılar için ücretsizdir. Tüm özellikler, herhangi bir deneme süresi olmadan tamamen ücretsizdir.

Genel olarak, Figma'nın üç fiyatlandırma planı vardır. Platformun her biri için hangi işlevleri sağladığını keşfedelim.

Figma fiyatlandırma planları

marş Profesyonel organizasyon
Özgür

Platformu test etmek ve temel işlevleri hakkında fikir edinmek için bu planı kullanın: prototip oluşturma, kod nitelikleri, yorum yapma, sınırsız depolama alanı ve sınırsız görüntüleyici, Sketch içe aktarma ve içe aktarılacak çeşitli dosya biçimleri.

editör/ay başına 12$

Projeniz ekip düzenlemesi ve paylaşımı gerektiriyorsa aşağıdaki plana geçin. Bu planla sınırsız sayıda düzenleyici, proje ve ücretsiz görüntüleyicinin yanı sıra sınırsız sürüm geçmişi ve depolamanın keyfini çıkarabilirsiniz. Ayrıca, tüm ekibin kullanabileceği paylaşılan UI bileşenleriyle özel projeler ve sistemler oluşturabileceksiniz.

editör/ay başına 45$

Bu plana yükseltin ve daha da geniş bir işlevsellik yelpazesinin keyfini çıkarın: sınırsız sayıda ekip, taslak sahiplik, bağlantı erişim kontrolleri veya paylaşılan yazı tipleri. Etkinlik günlükleri raporları, merkezi üye yönetimi, tek oturum açma (SSO) ve kuruluşun kimlik sağlayıcısıyla uzaktan sağlama ile sağlanan hesap kontrolleriyle daha derine inebileceksiniz.

Figma'yı kullanmaya başlama

Kaydolduktan sonra kullanıcı, katılım için gerekli bağlantıları içeren bir hoş geldiniz e-postası alır: yardım merkezi, video eğitimleri, forum ve faydalı kaynaklar.

figma welcome email
Figma'dan hoş geldiniz e-postası

Ayrıca, kullanıcılar araçla çalışmaya başladıklarında, onlara hızlı bir platform incelemesi sunulur. Hem çevrimiçi çalışabilir hem de iş akışınızı çevrimdışına ayarlamak için Figma masaüstü sürümünü indirebilirsiniz. Aslında, projenizin öğelerini içeren Katmanlar Paneli, araçlar ve kullanılabilir seçenekler içeren bir araç çubuğu ve sağ taraftaki Özellikler Paneli ile arayüz oldukça sezgiseldir.

figma interface
Figma arayüzü

Şimdi Figma'nın en öne çıkan özelliklerini ve seçeneklerini sıralayalım ve bunları nasıl uygulayabileceğinizi görelim.

Figma özellikleri ve kullanışlı seçenekler

prototipleme

Figma, ihtiyacınız olduğu kadar çok ekran oluşturarak bir web sitesinin veya uygulamanın tıklanabilir bir sürümünü oluşturmanıza olanak tanır. Bu şekilde, sekmeler arasında geçiş yapmak zorunda kalmadan herhangi bir özelliği (düğme işlevselliği, öğelerin rollover'ı, kalıcı pencere animasyonu) test edebilir, düzenleyebilir veya ayarlayabilirsiniz. Tasarımınızın gerçek bir ortamda nasıl görüneceğini simüle etmek için bağlantılar ve sıcak noktalar oluşturabileceksiniz.

Özellikler Panelinde Prototip'e geçin ve yollar ve etkileşimler oluşturmaya başlayın.

figma prototyping
Figma Prototipleme Modunu kullanarak elemanlar arasında etkileşimler oluşturma

Bileşenler

Bunlar, projelerinizde yeniden kullanılabilen UI öğeleridir. Bu özellik, onları çevirerek simetrik bileşenler oluşturmanıza veya bileşenleri döşeyerek desenleri tekrarlamanıza olanak tanır. Düğmelerden, alanlardan veya menülerden bileşenler oluşturabilirsiniz. Bir Ana bileşen oluşturmak için Seçenekler Menüsünde Bileşen Oluştur düğmesini tıklayın veya katmana sağ tıklayın ve Bileşen Oluştur seçeneğini seçin.

Örnekler oluşturarak Ana Bileşenleri yeniden kullanabilirsiniz. Bu bileşenleri ayrıca renkler, bloklar, düğmeler, şekiller ve açılış sayfaları gibi UI öğelerinden ayrı bileşenler olarak da yapabilirsiniz.

Örnek Bileşenleri oluşturmak için Ana Bileşeni seçin, kısayol tuşunu basılı tutun (sırasıyla Windows ve Mac OS için Alt veya D), örneği bileşenden sürükleyin ve gerekirse başka bir konuma kopyalayın.

figma components
Örnek bileşenleri oluşturma

Unutmayın, oluşturduğunuz Eşgörünümler Ana bileşenlere bağlıdır; bu, ikincisinde yaptığınız tüm değişikliklerin öncekilerin tümü için geçerli olacağı anlamına gelir. Örneğin, Ana Bileşen'deki düğmenin şeklini veya rengini güncelleyerek, alt bileşenlerini web sitesi tasarımınızda güncelleyeceksiniz.

Vektör Ağları

Bu Figma özelliği, artık iki noktadan gelen iki çizgiyle sınırlı kalmadığınız için karmaşık vektör şekilleri oluşturmanıza olanak tanır. Oluşturduğunuz şeklin herhangi bir noktasından fazladan çizgiler çizmek için kalem aracını kullanabilirsiniz.

figma vector networks
Kullanılan Vektör Ağları

Bunun da ötesinde, Vector Networks HTML rutininizi kolaylaştırabilir, çünkü SVG kodunu harici kaynaktan kopyalayabilir ve bir vektör katmanı olarak doğrudan Figma'ya yapıştırabilirsiniz. Figma vektörlerini SVG kodları olarak da kopyalayabilirsiniz. Bunu yapmak için öğeye sağ tıklayın, SVG olarak kopyala'yı seçin ve kodu HTML'ye veya oluşturduğunuz herhangi bir web projesine yapıştırın.

Yerleşik yorum yapma, düzenleme ve paylaşma

Figma ile bir ekip oluşturabilir ve her ekip üyesinin projelerinizle ne yapma iznine sahip olduğunu seçebilirsiniz: ya görüntüleyin ya da görüntüleyin ve düzenleyin. Ayrıca ekip üyelerinin tasarımı gerçek zamanlı olarak nasıl güncellediğini veya değiştirdiğini de izleyebilirsiniz.

figma editing
Gerçek zamanlı ekip düzenleme

Ekibiniz, doğrudan çalışma alanında geri bildirim bırakabilir veya projenin herhangi bir öğesini tartışabilir ve tıpkı Google Dokümanlar'da olduğu gibi tuvalin herhangi bir yerine sabitleyebilir. Yorumlarınızı bırakmak için üst menüden konuşma balonunu seçin, yorum yapmak istediğiniz öğeye tıklayın ve geri bildiriminizi yazın.

figma commenting
Figma tasarım aracı ile oluşturulan bir proje hakkında yorum yapma

sürüm kontrolü

Figma ile her bir ortak çalışanın geçmişini takip edebilir ve hatta önceki sürüme geri dönebilirsiniz. Kullanıcılar proje ile sekmeyi kapattıklarında veya 30 dakika içinde herhangi bir değişiklik yapılmadığında, hizmet sürümleri otomatik olarak kaydeder. Bu seçeneğe hızlı erişim sağlamak için araç çubuğunda proje adının solundaki açılır simgeyi seçin. Belirli bir sürümü adlandırma, geri yükleme veya çoğaltma seçeneğiyle birlikte sürüm geçmişini sağınızda göreceksiniz.

figma version history
Sürüm geçmişi menüsü

Figma tasarım aracı iş başında

Platforma ve işlevselliğine aşina olduktan sonra, Figma tasarım seçeneklerini denemeye ve bir e-Kitap için basit bir sayfa oluşturmaya karar verdik. İlk olarak üst menüde bulunan “+” işaretine tıkladık. Ardından araç çubuğundaki “Çerçeve” ikonuna tıklayarak bir çerçeve oluşturduk ve tasarımımızı tuval üzerinde düzenledik. Ardından, projemizi gerekli katmanlarla (metin blokları, dikdörtgenler ve resimler) doldurduk ve öğeler arasındaki tüm boşlukları yapılandırdık.

İşte oluşturmayı başardıklarımız:

figma design example
Figma tasarım aracıyla oluşturulmuş bir e-Kitap sayfası

Platformda boyama için birincil palet - CMYK paleti - veya milimetre ve santimetre arasında boyut geçişi olmadığı için kaliteli bir baskı yapamayacağınızı unutmayın.

son çekim

Figma, tasarımcılar tarafından tasarımcılar için dikkatlice düşünülmüş bir araç gibi hissettiriyor. Platform şunları yapmanızı sağlar:

  • bilgisayarınızın depolama alanına bağımlı kalmadan çevrimiçi çalışın ve tasarımlarınızı bir buluta kaydedin;
  • çeşitli işletim sistemlerinde tasarımlar oluşturmak;
  • ekiple gerçek zamanlı olarak işbirliği yapın, dosyaları yorumlayın, düzenleyin ve paylaşın;
  • Tasarımınızı düzenlemek, test etmek, ayarlamak ve olanaklarını genişletmek için prototip oluşturma, vektör ağları, bileşen oluşturma ve bunların örnekleri gibi yararlı işlevlerin keyfini çıkarın.

Figma incelememizin platformun içindeki hileleri temizlediğini ve denemek için yeterince ilham aldığınızı umuyoruz. Figma ile tasarımlarınızı, SendPulse ile pazarlama projelerinizi oluşturun. Görüşürüz!