Figma eklentisi
Hakkında
HueKit, Prome Solutions tarafından geliştirilen bir Figma eklentisidir. Her yeni dosyada tasarımın temelini elle oluşturmak zorunda kalan tasarımcılar için hazırlanmıştır.
İş ihtiyacı
Yeni bir dosyada renk skalaları, açık ve koyu temalar, tipografi ve aralıklar oluşturmak, metinlerin okunabilirliğini kontrol etmek ve dosyayı geliştiricinin kullanabileceği hâle getirmek gerekir. Tüm bunları elle hazırlamak, projenin başlangıcında zaman alır. Hex kodlarını bir dosyadan diğerine kopyalamak, açık ve koyu temaların uyumlu kalmasını sağlamaz.
Teslim edilenler
Prome Solutions, Figma eklentisini ve siteyi geliştirdi. Tasarımcılar, site üzerinden HueKit'i yükler ve bir plan seçer. Tasarım sistemi ise eklentide oluşturulur.
Tasarımcılar, Figma'da marka renklerini seçer veya Tailwind, Radix, Material, Bootstrap gibi bir kütüphaneden yola çıkar. Tek tıkla 11 kademeli renk skalaları, açık ve koyu temalar için anlamsal renkler, tipografi, aralık, köşe yarıçapı ve boyut değerleri oluşturulur. Dosyaya bir tasarım sistemi sayfası ve düğmeler, giriş alanları ve kartlar içeren bir bileşenler sayfası eklenir.
Yapay zekâ destekli renk aracı, marka renklerini veya tasarımcının yüklediği bir ekran görüntüsünü analiz ederek renk skalaları ve açık-koyu tema eşleştirmeleri önerir. Bu öneriler, dosyaya kaydedilmeden önce tasarımcı tarafından onaylanır.
Eklenti, kontrastı kontrol eder. Ücretli planda metin ve marka renklerini, WCAG AA standardındaki 4.5:1 kontrast oranına yaklaştıracak şekilde ayarlayabilir. Ücretli plan, tasarım değişkenlerini JSON ve Tailwind dosyası olarak dışa aktarmayı da sağlar. Eklenti ayrıca simge kütüphaneleri ile telefon, tablet ve bilgisayarlar için 3D maketler içerir; mevcut bir dosyadaki renkleri ve tipografiyi yeni tasarım değişkenlerine bağlayabilir.
Ücretsiz plan, temel sistemi oluşturur. Ücretli plan ise daha kapsamlı kütüphaneler, dışa aktarma ve kontrast ayarı sunar.
Sonuçlar
Tasarımcılar, renk skalalarını, açık ve koyu tema renklerini ve tipografiyi elle oluşturmak yerine tek tıkla elde eder. Tasarım değişkenleri Figma'dan JSON veya Tailwind dosyası olarak dışa aktarılabilir.