Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere Tailwind CSS kullanarak UI komponent tasarımı yapma sürecini adım adım göstermektedir.
- Video, Figma üzerinden bir buton tasarımı ile başlayıp, bu tasarımın Tailwind CSS ile nasıl kodlanacağını anlatmaktadır. Öncelikle Figma'da buton tasarımı yapılarak hover ve click durumları prototipleştirilir, ardından Tailwind CSS config dosyası oluşturulup özel renk varyasyonları tanımlanır. Son olarak, React sayfasında bu Tailwind CSS ile tasarlanmış butonun nasıl kullanılacağı gösterilir. Video, prototip oluşturma ve kod yazma sürecini test etmek için faydalı bir yöntem sunmaktadır.
- Tailwind CSS ile UI Komponenti Tasarımı
- Önceki videoda Tailwind CSS'in React tabanında nasıl kurulduğuna bakılmıştı, bu videoda ise Tailwind CSS kütüphanesi kullanarak tasarlanan bir UI komponentinin nasıl yazılacağı gösterilecek.
- Tasarım için Figma kullanılıyor ve tasarıma başlamadan önce bir frame oluşturulması gerekiyor.
- Frame boyutu tasarlanacak komponentten bağımsız olduğu için herhangi bir boyutta yapılabilir.
- 01:05Figma'da Buton Tasarımı
- İlk olarak bir buton tasarımı yapılıyor ve ortalama bir hap şeklinde bir buton oluşturuluyor.
- Butonun basıldıktan sonraki halini yapmak için frame kopyalanıyor ve hover durumunda buton daha açık renge dönüştürülüyor.
- Butona "Gönder" yazısı ekleniyor ve buton basıldığında "Gönderiliyor" veya "Gönderildi" yazısı ve emoji ile güncelleniyor.
- 03:48Prototip Oluşturma
- Butonun farklı durumları arasında geçiş yapmak için bir prototip belirleniyor.
- Başlangıç frame'i belirleniyor ve mouse ile üzerine geldiğinde hover halini alması, tıklandığında ise farklı bir duruma geçmesi sağlanıyor.
- Prototip test edildiğinde mouse ile üzerine geldiğinde hover halini alıyor ve tıklandığında butonun hali değişiyor.
- 06:09Tailwind CSS Config Dosyası Oluşturma
- Tailwind CSS kullanmak için önce bir config dosyasına ihtiyaç var ve daha önceki config dosyasından kalan output CSS işe yaramayacak.
- Config dosyasında "extend" olarak "colors" eklenerek özel renk değişkenleri tanımlanıyor.
- "Primary" değişkeni için light, dark ve default olmak üzere üç farklı varyasyon oluşturuluyor.
- 09:15Tailwind CSS'i React'e Entegre Etme
- Boş bir React sayfasında Tailwind CSS kullanmak için öncelikle bir body ekleniyor.
- Body'nin min-height boyutu ekran boyutu kadar ve arka plan rengi koyu olarak ayarlanıyor.
- Body'nin içerisine flex kullanılarak buton yerleştirilebilecek bir alan oluşturuluyor.
- 12:02Tailwind CSS ile Buton Tasarımı
- Buton için "background-primary", "background-primer-lighter" ve "text-white" class'ları kullanılıyor.
- Butonun kenarlarına padding verilerek ve "rounded-full" class'ı kullanılarak hap şeklinde bir görünüm elde ediliyor.
- Butonun boyutu 48 piksel olarak ayarlanıyor ve yazı yazıldığında boyutunun değişmemesi sağlanıyor.
- 14:32Prototipin Tamamlanması
- Butonun hover durumunda rengi değişiyor ve click olduğunda "Gönderiliyor" kısmı geliyor.
- Bu yöntem, wireframe yaparken kodun yazılabilir olup olmadığını test etmek için de kullanılabilir.
- Tailwind CSS ile tasarlanan buton, Figma'da tasarlanan prototiple aynı şekilde çalışıyor.