web tasarım

Web Tasarım İçin Faydalı 15+ Figma Eklentisi

Figma, günümüzde gittikçe popülerliği artan bir arayüz tasarım uygulamasıdır. Bu yazımızda web tasarım için sık kullanılan ve sevilen eklentilerini topladık.

Figma, arayüz tasarlamak için mükemmel bir araç olup günümüzde bu alandaki popülerliği gittikçe artmaktadır. Rakiplerine göre en büyük farkı, tasarım işlerinizi daha hızlı ve daha kolay hale getiren şablonlar, simgeler, araçlar ve eklentiler sayesinde harika kaynak akışı sağlayan bir topluluğa sahip olmasıdır.

Sürekli eklenen ve güncellenen eklentiler sayesinde web tasarım işlerimizi verimli bir süreçte yönetmeyi başarıyoruz. Web tasarımlarımızı gerçekleştirirken faydalandığımız eklentilerin ve araçların yararlı bir listesini yaptık.

1. Content Reel

Content Reel, yer tutucu metinleri, görüntüleri ve simgeleri tek bir pencereden ekleyerek arayüzleri daha verimli tasarlamanıza olanak tanır. Eklenmiş metinler, resimler ve simgelerden oluşan koleksiyonlara ulaşmak için uygulama arayüzü üzerinden görüntüleme veya arama yapma seçenekleriyle beraber metin ve resim içeriğinizi kendiniz oluşturmanıza da izin vererek işinizi kolaylaştırır.

Eklenti İndirme Adresi

Content Reel Ekran Görüntüsü

2. Unsplash

Unsplash, en çok indirilen Figma eklentilerinden biridir. Bunun sebebi, arayüz tasarımlarınıza yüksek kaliteli fotoğraflar bulmak ve eklemek için en iyi eklenti olmasıdır. Belirli veya özellikle güzel görüntüler bulmanız gerektiğinde çok kullanışlıdır.

Eklenti İndirme Adresi

Unspalsh Figma Ekran Görüntüsü

3. Blush

Blush, iyi tasarlanmış önceden oluşturulmuş illüstrasyonlardan oluşan geniş bir kütüphaneye sahiptir. Ayrıca, illüstrasyonları arayüz tasarımınıza uyacak şekilde özelleştirmeyi de kolaylaştırır. Blush'ta oluşturulan illüstrasyonları dosyanıza PNG veya SVG olarak ekleyebilirsiniz.

Eklenti İndirme Adresi

Blush Figma Ekran Görüntüsü

4. Iconify

Iconify, birçok simge paketini veritabanında bulunduran en iyi (ücretsiz) simge (icon) arama eklentisidir. Material Design ve Font Awesome gibi popüler simge kütüphanesinden 100'den fazla simgeye sahiptir. Ayrıca, her simge seti aranabilir ve vektör desteğine sahiptir.

Eklenti İndirme Adresi

Iconify Eklentisi Ekran Görüntüsü

5. Similayer

Similayer, seçtiğiniz katmana "benzer" olan bir her katmanı otomatik olarak seçmenize olanak tanır. Bu, birden fazla birçok katman seçmeniz gerektiğinde büyük bir zaman tasarrufu sağlar. Özellikle bu katmanlar grupların veya çerçevelerin içinde olduğu zaman bunlara erişmeyi kolaylaştırır. Benzer metin, dolgu, kontur, boyut, konum vb. içeren katmanları seçmek için birebirdir. Similayer'ı kullanmanın en faydalı yolu, bir ana bileşenin (component) tüm örneklerini seçmek ve toplu değişiklikler yapmaktır.

Eklenti İndirme Adresi

Similayer Figma Eklenti Ekran Görüntüsü

6. Chart

Chart, veri çizelgeleri oluşturmak için kullanılan bir Figma eklentisidir. Excel, Google E-Tablolar gibi veri düzenleyicileri ya da Google E-Tablolar ve uzak JSON (REST API), yerel CSV ve JSON dosyaları ile canlı veri görüntülemeyi destekler.

Eklenti İndirme Adresi

Chart Figma Eklenti Ekran Görüntüsü

7. Remove BG

Projelerinizde bol resim kullanıyorsanız ve resimlerin arka planını kaldırmak istiyorsanız, Remove BG, resimlerin arka planını tek bir tıklamayla kaldırmak için en iyi eklentilerden biridir.

Eklenti İndirme Adresi

Remove BG Ekran Görüntüsü

8. Autoflow

Autoflow, hızlı bir kullanıcı ve proje akışı oluşturmak için kullanılan en iyi figma eklentilerdinden birisidir.  Şekiller oluşturup bunları birbirine bağlayarak çok kısa bir süre içinde projeleriniz için akış oluşturabilirsiniz.

Eklenti İndirme Adresi

Autoflow Figma Ekran Görüntüsü

9. Batch Styler

Batch Styler, birçok rengi ve yazı tipini aynı anda değiştirmenize olanak tanıyan bir eklentidir. Bu eklenti ile projenizin tüm tasarım sistemini tek bir tıklamayla değiştirerek zaman kazanabilirsiniz.

Eklenti İndirme Adresi

Batch Style Ekran Görüntüsü

10. Color Palettes

Bu eklenti, çok sayıda renk paleti arasından ihtiyacınız olan rengi kolayca bulmanızı sağlar. Sadece renk kodunu, palet numarasını veya renk adını girin, kopyalayın ve istediğiniz gibi görünmesini sağlamak için tasarımınıza uygulayın.

Eklenti İndirme Adresi

Color Palettes Ekran Görüntüsü

11. Figmotion

Tasarımınızı daha etkileşimli hale getirmek için bazen animasyonlara ihtiyaç duyarsınız. Figmotions, bir eklenti olarak Figma ile mükemmel bir şekilde uyarlanabilen bir animasyon oluşturma aracıdır. Figmotion'u kullanmak son derece kolay ve kullanışlıdır.

Eklenti İndirme Adresi

Figmotion Ekran Görüntüsü

12. uiGradients

uiGradients, tüm katmanlara, metne ve gruplara tek bir tıklamayla renk gradyanları eklemenize yardımcı olur. Tek yapmanız gereken, gradyan uygulamak istediğiniz öğeyi seçmek ve ardından eklentiyi açmak. Aralarından seçim yapabileceğiniz 350'den fazla gradyan seçeneği bulunuyor.

Eklenti İndirme Adresi

UI Gradients Ekran Görüntüsü

13. Rename It

Rename It eklentisi, adından anlaşılacağı gibi birden fazla katmanın ismini bir dizi anahtar sözcük seçerek aynı anda yeniden adlandırmanıza olanak tanır. Ayrıca, isme göre  katman araması yaparak yeniden adlandırabilirsiniz.

Eklenti İndirme Adresi

Rename It Ekran Görüntüsü

14. Figma Measure

Arayüz tasarımınlarınıza herhangi bir katman veya nesnenin boyutlarını ölçmeniz gerekiyorsa, Figma Measure sizin için doğru araç olabilir. Eklenti, yükseklikleri, genişlikleri, ara mesafeleri ölçmek için cetvel görevi üstleniyor.

Eklenti İndirme Adresi

Figma Measure Ekran Görüntüsü

15. HTML <> Figma

Bu eklenti ile herhangi bir web sitesini birkaç tıklama ile bir Figma tasarımına dönüştürebilirsiniz. Aynı şekilde Figma tasarımlarının kod çıktısını verme özelliğine de sahip.

Eklenti İndirme Adresi

HTML Figma Eklenti Ekran Görüntüsü

Bonus - LottieFiles

LottieFiles eklentisi ile tasarımlarınıza animasyonlar ekleyebilirsiniz. Tamamen ücretsiz olan binlerce SVG veya GIF animasyonlarını projenize doğrudan aktarabilirsiniz.

Eklenti İndirme Adresi

LottieFiles Fihma Eklenti Ekran Görüntüsü

Web sitesi işlevselliğini sağlamak, deneyiminizi geliştirmek ve trafiğimizi analiz etmek için çerezleri kullanmaktayız.
Web sitemizi kullanarak çerezleri kabul etmiş olursunuz. Detaylı bilgi için Kullanım Şartlarımıza bakınız.