Mini Eğitim – Figma Düğme Bileşenleriyle Çalışma

Yayınlanan: 2022-03-11

Figma'da UI elemanlarına Bileşenler denir. Düzgün bir şekilde oluşturulmuşlardır, inanılmaz derecede çok yönlüdürler ve güncellemeleri kolaydır, ancak bileşenler neler yapabilir ve nasıl çalışırlar? En yaygın kullanıcı arabirimi öğelerinden biri olan düğmeyle çalışarak güçlerini göstereceğiz.

Neden düğmeler?

Düğmeler yükseklik, genişlik, etiket uzunluğu, iç dolgu, durum ve tema gibi değişkenlerle dolup taşıyor. Temel bir düğme sistemi oluşturarak, Figma'yı bileşen tabanlı bir zihniyet ve Figma bileşen kitaplığı ile kullanmanın muazzam değerini öğreneceğiz.

*Editörün Notu: Bu yazılı eğitim, Build UX'ten David Luhr tarafından oluşturulan bir video eğitiminden türetilmiştir.

Görev 1: Temel Figma Düğme Bileşeni Oluşturun

  1. Yeni bir çerçeve oluşturup onu katmanlar panelindeki Düğmeler olarak yeniden adlandırarak başlayacağız.
  2. Düğme etiket metninizi yazın. Bu eğitim için "Kaydol" özelliğini kullanacağız.
  3. Yazı tipimiz:
    • Roboto Ortamı
    • Yazı Tipi Boyutu 18
    • Çizgi Yüksekliği 24
    • Metin Hizalama Merkezi
    • Ortaya Hizala
    • Yeniden Boyutlandırma = Sabit Boyut
  4. Düğme etiketinizi yazdıktan sonra, metin kutusunun sağ alt köşesine çift tıklayın, böylece otomatik olarak metnin en küçük kısıtlamalarına göre boyutlandırılacaktır.
  5. Metin katmanını Düğme Etiketi olarak yeniden adlandırın.
    6. Figma düğme bileşeni. Resmi tam boy görmek için tıklayın.
    Görev 1: Adım 1-5
  6. Bir dikdörtgen yapın, onu katmanlar panelindeki Button Label'ın altına yerleştirin ve Button Container olarak yeniden adlandırın. Düğme kapsayıcısının renginin varsayılan gri olarak kalmasına izin verin.
  7. Düğme kabı için sabit bir yükseklik belirleyin. 60 piksel kullanacağız.
  8. Şimdi, düğme kapsayıcısına iç dolgu ekleyeceğiz.
    • Düğme etiketinin genişliği 63 pikseldir.
    • 24 piksel sağ ve sol dolguya ihtiyacımız var. Kombine, bu 48 piksele eşittir.
    • Böylece, etiketin genişliğini (63 piksel) + toplam dolguyu (48 piksel) gireceğiz.
  9. Hem etiketi hem de kabı seçin ve hizalama araçlarıyla ortalayın.
Figma öğretici Resmi tam boy görmek için tıklayın.
Görev 1: Adım 6-9

İlkel bir düğme tasarladık. Ancak, düğmemizin iç dolgusu henüz değişen etiket uzunluklarına uyum sağlayamıyor. Daha sonraki bir adımda, düğme kapsayıcı genişliğimizin etiket uzunluğuna göre esnek olmasını sağlayacak olan iç düzeni ele alacağız.

ABD merkezli tam zamanlı serbest UI tasarımcıları istedi

Görev 2: Düğmeyi Etkileşimli Hale Getirin

Düğmeyi etkileşimli hale getirmek için bir odak halkası ekleyeceğiz.

  1. Button Container'ı çoğaltın ve Button Focus Ring olarak yeniden adlandırın.
  2. Odak halkasının katmanlar panelindeki düğme kabının altında olduğundan emin olun.
  3. Odak halkasının dolgusunu kaldırın ve 4 piksel kalınlığında siyah bir iç kontur ekleyin.
  4. Ayrıca dört taraftaki düğme kabı ile odak halkası arasında 4 piksellik bir boşluk olmasını istiyoruz, bu nedenle hem genişliğine hem de yüksekliğine +16 ekleyeceğiz.
  5. Etiketi, düğme kapsayıcısını ve odak halkasını seçin ve ortalayın.

    6. Butonumuz, en basit haliyle, odaklanmış bir durumda böyle görünecektir.

    Figma bileşenleri kitaplığı Resmi tam boy görmek için tıklayın.
    Görev 2: Adım 1-5
  6. Üç öğeyi de (etiket, düğme kabı, odak halkası) seçin, sağ tıklayın ve "Bileşen Oluştur"u seçin.
    7. şekil bileşenleri Resmi tam boy görmek için tıklayın.
    Görev 2: Adım 6
  7. Button/Primitive/Default bileşenini yeniden adlandırın.
    • Düğme = Bileşen Türü
    • İlkel = Varyasyon
    • Varsayılan = Durum

Bu bizim ilkel düğmemiz. Nihai tasarımımızda görünmeyecek, ancak tüm düğme varyasyonlarımızın üzerine inşa edileceği bir temel görevi görecek. Avantaj? Gelecekte düğmelerimizi yeniden tasarlamamız gerekirse, yalnızca tek bir yerde düzenlememiz gerekir.

Figma uygulaması Resmi tam boy görmek için tıklayın.
Görev 2: Adım 7

Görev 3: Bir Düğme Düzeni Izgarası Oluşturun

  1. Düğme/İlkel/Varsayılan öğesini seçin, tasarım paneline gidin ve "Düzen Izgarası"nın yanındaki "+" simgesini tıklayın.
    2. Figma arketipi Resmi tam boy görmek için tıklayın.
    Görev 3: Adım 1
  2. Ardından ızgara simgesine tıklayın, "Sütunlar"ı seçin ve aşağıdaki değerleri girin:
    • Sütun Sayısı = 1
    • Genişlik = Otomatik
    • oluk = 0
    • Tip = Uzat
  3. "Kenar boşluğu", düğme kabının içindeki dolguyu sağlar.
    • Unutmayın, 24 piksel sol ve sağ dolguya ihtiyacımız var.
    • Ayrıca odak halkamızın 4 piksel kalınlığındaki kenarlığını ve 4 piksel boşluğunu da dikkate almamız gerekiyor.
    • Bu, 32 piksellik bir kenar boşluğuna ihtiyacımız olacağı anlamına gelir.
    4. Figma bileşen durumları Resmi tam boy görmek için tıklayın.
    Görev 3: Adımlar 2-3
  4. Kenar boşluğu eklendiğinde, düğme kabının iç dolgusunu gösteren ve etiket genişliğine tam olarak uyan kırmızı bir gösterge alanı göreceksiniz.
    5. Figma tasarımı Resmi tam boy görmek için tıklayın.
    Görev 3: Adım 4

    Şimdi butonumuzun her elemanına düzen kısıtlamaları eklemeliyiz.

  5. Bileşen içindeki üç katmanı da seçin, "Kısıtlamalar"a gidin ve bunları "Sol ve Sağ" ve "Orta"ya sabitleyin.
  6. Bu noktada bileşeni seçip istediğiniz genişliğe sürükleyebilirsiniz. Düzenin tam olarak tasarlandığı gibi çalıştığını göreceksiniz.
  7. Düğme genişliğini etiketten daha kısa yaparsanız, etiketin başka bir satıra bölündüğünü fark edeceksiniz.
Figma tasarım aracıResmi tam boy görmek için tıklayın.
Görev 3: Adım 5-7

Görev 4: Metin Uzunluğu için Düğme Genişliğini Ayarlayın

Daha uzun bir buton etiketi ile butonumuzun nasıl çalıştığını görelim.

  1. Varlıklar paneline gidin, düğmenin yeni bir örneğini sürükleyin ve "Randevu Planla" veya daha uzun bir şey yazın. Ne oluyor? Etiket bir sonraki satıra taşar - tam olarak istediğimiz şey değil.
    2. Figma arayüz tasarımı Resmi tam boy görmek için tıklayın.
    Görev 4: Adım 1
  2. Katmanlar panelinize geri dönün, az önce sürüklediğiniz yeni bileşeni seçin ve genişliği etikete uyan kesin boyuta ayarlamak için ok tuşlarını kullanın.
  3. Bunu yaptığınızda, tüm yerleşim değişkenlerinin istendiği gibi kaldığını göreceksiniz - iç dolgu, etiket yerleştirme, 4 piksel vuruş ve odak halkasının 4 piksel boşluğu. (Görev 5'e geçmeden önce bu yinelenen düğmeyi silin.)

Bir yerleşim ızgarası kullanarak, tüm tasarımlarınızda kullanılabilecek tek bir düğme oluşturabilirsiniz ve tek yapmanız gereken, ihtiyacınız olan etiket uzunluğuna göre genişliği ayarlamaktır.

Figma prototipi Resmi tam boy görmek için tıklayın.
Görev 4: Adımlar 2-3

Görev 5: Vurgulu ve Odak Durumları Oluşturun

Düğme varsayılanımız yerindeyken, vurgulu ve odak durumlarımızın ilkellerini oluşturalım.

  1. Düğme varsayılanınızdaki odak halkasını kapatın.
  2. Alt tuşunu basılı tutun ve düğme varsayılanının yeni bir örneğini dışarı sürükleyin.
  3. Düğme kapsayıcısını daha açık gri renkte yapın (#E7E7E7).
  4. Sağ tıklayın, "Bileşen Oluştur" ve yeniden adlandırın Button/Primitive/Hover .
    5. Web tasarım araçları Resmi tam boy görmek için tıklayın.
    Görev 5: Adım 1-4
  5. Varsayılan durumun başka bir örneğini dışarı sürükleyin, odak halkasını açın ve düğme kapsayıcısının rengini, üzerine gelme durumu kapsayıcısının (#E7E7E7) rengiyle eşleştirin.
  6. "Bileşen Oluştur" öğesini sağ tıklayın ve Button/Primitive/Focus öğesini yeniden adlandırın.

Artık düğmenin düzenine ve farklı durumlarda nasıl çalıştığına dair bir tutamacımız var. Buradan, ihtiyacımız olan şeye bağlı olarak belirli temalar veya stiller eklemeye başlayabiliriz.

Figma kullanıcı arayüzü tasarımı Resmi tam boy görmek için tıklayın.
Görev 5: Adımlar 5-6

Görev 6: Düğme Temalarını Uygulayın

Şimdi, stilistik varyasyonlar yaratacağız.

  1. Alt tuşunu basılı tutun ve başka bir Button/Primitive/Default örneğine sürükleyin.
  2. İstenen tema rengine (#204ECF) uyması için kabın rengini değiştirin.
  3. Düğme etiketini beyaz yapın (#FFFFFF), odak halkasını açın, konturu istediğiniz tema rengine (#204ECF) değiştirin ve kapatın.
  4. Sağ tıklayın, "Bileşen Oluştur" ve yeniden adlandırın Button/BrightBlue/Default .
    5. Figma UX Resmi tam boy görmek için tıklayın.
    Görev 6: Adım 1-4
  5. Bu yeni varsayılan düğmenin iki örneğini dışarı sürükleyin: Biri fareyle üzerine gelme durumu ve biri odak durumu için.
  6. İstediğiniz tema rengiyle (#678FFF) eşleşmesi için düğme kabının rengini değiştirin, sağ tıklayın, "Bileşen Oluştur" ve yeniden adlandırın Button/BrightBlue/Hover .
  7. Aynı rengi odak düğmesi kabına uygulayın, odak halkasını açın, sağ tıklayın, "Bileşen Oluştur" ve yeniden adlandırın Button/BrightBlue/Focus .

Aynı işlemi, tasarımınızda ihtiyacınız olan herhangi bir sayıda tema için kullanabilirsiniz.

Figma web tasarımı Resmi tam boy görmek için tıklayın.
Görev 6: Adım 5-7

Görev 7: Figma Bileşenlerinin Güzelliğine Bakın

Tüm temalarınızı oluşturduktan sonra, bileşenlerle çalışmanın ne kadar güçlü olabileceğini gözlemlemek için bir saniye ayırın.

  1. Düğmenizi/İlkel/Varsayılanınızı seçin, bir köşe yarıçapı ekleyin ve düğmenizin tüm örneklerinin otomatik olarak güncellendiğini göreceksiniz.
    2. maket aracı Resmi tam boy görmek için tıklayın.
    Görev 7: Adım 1
  2. Ardından, bileşen panelinize gidin. Düğmenizin tüm örnekleri, tasarımınızın herhangi bir bölümüne sürüklenmek için kullanılabilir.
    3. Çevrimiçi tasarım aracı Resmi tam boy görmek için tıklayın.
    Görev 7: Adım 2
  3. Ayrıca, bu adlandırma kuralını kullandığımız için, artık herhangi bir düğmeyi alternatif bir örnek/tema için değiştirebiliriz. Bunu çalışırken görmek için düğmenin bir örneğini sürükleyin, ardından tasarım panelinde "Örnek"e gidin, ihtiyacınız olan herhangi bir örneği seçin ve hemen değişir.
UX tasarım araçları Resmi tam boy görmek için tıklayın.
Görev 7: Adım 3

Bileşenler çerçevesinde çalışmak, tasarımımızın tüm alanlarında düğmelerimizi hızlı ve verimli bir şekilde yönetmemizi sağlar. Hepsinden iyisi, sadece düğmelerle çalışmıyor, her türden UI bileşenleriyle çalışıyor.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Bir Tasarım Aracı Olarak Figma'nın Gücü
  • Figma - Sketch - Axure - Göreve Dayalı Bir İnceleme
  • Figma ile İşbirlikçi Tasarımı Kolaylaştırın
  • Yıllar Boyunca Düğme Tasarımı – Dribbble Zaman Çizelgesi
  • Framer Eğitimi: Prototiplerinizi Geliştirmek için 7 Basit Mikro Etkileşim