• Buradasın

    Figma

    Özetteki ilgi çekici içerikler

    • Renk Seçici Uygulaması Tasarımı ve Kodlama Eğitimi

      Bu video, bir eğitmen tarafından sunulan, renk seçici uygulaması tasarımı ve kodlaması konusunda adım adım rehberlik eden bir eğitim içeriğidir. Video, iki farklı programlama dilinde renk seçici uygulaması oluşturma sürecini kapsamaktadır. İlk bölümde Figma programı kullanılarak üç renkli buton ve seçilen renk hakkında bilgi veren bir uygulama tasarımı gösterilmekte, ikinci bölümde ise Python programlama dilinde aynı arayüzün kodlanması anlatılmaktadır. Her iki bölümde de butonların tıklandığında seçilen renk isminin ve kodunun ekranda gösterilmesi işlemi detaylı olarak ele alınmaktadır. Eğitim, tasarım ve kodlama aşamalarını kapsamlı şekilde göstererek, kullanıcıların benzer uygulamalar geliştirmelerine yardımcı olmayı amaçlamaktadır. Nesnelerin isimlendirilmesi, fonksiyonların oluşturulması ve kullanıcı arayüzünün dinamik olarak güncellenmesi gibi konular da videoda işlenmektedir.

      • youtube.com

    • Figma ile Dropdown Tasarımı Eğitimi

      Bu video, bir eğitim içeriği olup, izleyicilere Figma uygulaması kullanarak sıfırdan bir dropdown tasarımı yapma sürecini adım adım göstermektedir. Video, dropdown tasarımının temel bileşenlerinin (buton, menü, seçenekler) nasıl oluşturulacağını anlatmaktadır. Önce frame oluşturma, ardından buton tasarımı, hover ve click durumları için farklı frame'ler oluşturma, menü tasarımı ve son olarak prototip oluşturma aşamaları gösterilmektedir. Prototip aşamasında, dropdown'un tıklandığında nasıl açılacağı, menüdeki seçeneklerin nasıl gezinileceği ve her bir seçeneğe tıklandığında nasıl geri dönüleceği detaylı olarak anlatılmaktadır.

      • youtube.com

    • Figma Mirror Uygulaması Kullanım Rehberi

      Bu video, bir eğitim içeriği olup, konuşmacı Figma Mirror uygulamasının nasıl kullanılacağını göstermektedir. Video, Figma Mirror uygulamasının telefonuna yüklendikten sonra nasıl kullanılacağını adım adım anlatmaktadır. Önce uygulamanın açılış ekranı ve frame/komponent seçimi gösterilmekte, ardından aynı WiFi ağına bağlanarak uygulamanın nasıl kullanılacağı açıklanmaktadır. Son olarak, prototip geliştirme örneği üzerinden bir frame'e özellik ekleme ve tıklama ile otomatik yönlendirme işlemi gösterilmektedir.

      • youtube.com

    • Figma'da Constraints Kullanımı Eğitimi

      Bu video, Figma uygulamasında constraints özelliğinin nasıl kullanılacağını gösteren bir eğitim içeriğidir. Eğitmen, Figma'da responsive design yaparken constraints'in önemini vurgulamaktadır. Video, constraints'in menülerde, footerlarda ve content box'larda nasıl kullanılacağını adım adım göstermektedir. Eğitmen önce basit bir menü örneği üzerinden constraints'in temel kullanımını anlatıp, ardından daha karmaşık bir tasarım üzerinde master components üzerinden constraints ayarlarını göstermektedir. Ayrıca, yazıların alt satıra atılmaması gerektiği gibi önemli püf noktalarını da paylaşmaktadır. Video, constraints'in responsive design için çok önemli bir araç olduğunu vurgulayarak sonlanmaktadır.

      • youtube.com

    • Figma ile Tablet Responsive Web Sayfası Tasarımı Eğitimi

      Bu video, Ender adlı bir eğitmen tarafından sunulan Figma uygulamasında tablet responsive web sayfası tasarımı eğitimidir. Eğitmen, Coin sayfasının tablet versiyonunu sıfırdan oluşturma sürecini adım adım göstermektedir. Video, grid sistemi oluşturma, ekran boyutlarına göre düzenleme, logo yerleştirme, banner düzenleme, içerik alanlarını düzenleme, menü tasarımı ve prototip oluşturma gibi konuları kapsamaktadır. Eğitmen, iPad Mini ve iPad Pro gibi farklı cihaz boyutlarında tasarımın nasıl görünmesi gerektiği üzerinde durmakta ve Figma'nın otomatik boyutlandırma özellikleri ile animasyon ekleme tekniklerini göstermektedir. Eğitim serisi, bir sonraki bölümde telefon tasarımı yapılacağını belirterek sona ermektedir. Video boyunca, tasarımın en küçük cihazda nasıl göründüğünü kontrol etmenin önemi vurgulanmakta ve kullanıcı deneyimi için parmak mesafesi gibi detaylar açıklanmaktadır.

      • youtube.com

    • Figma'dan Kod'a ve Deploy Edilmiş Siteye Nasıl Geçiş Yapılır

      Bu video, bir front-end mühendisi tarafından sunulan bir eğitim içeriğidir. Sunucu, Figma'dan kod'a ve deploy edilmiş siteye geçiş sürecini adım adım göstermektedir.. Video, Plasmic adlı görsel sayfa oluşturucusunun nasıl kullanılacağını anlatmaktadır. İçerikte, Figma'dan tasarım dosyalarının nasıl kopyalanacağı, Plasmic'e nasıl aktarılacağı, linklerin nasıl ekleneceği ve GitHub'a nasıl deploy edileceği gösterilmektedir. Ayrıca, projenin hem GitHub Pages'a hem de yerel olarak nasıl çalıştırılacağı da açıklanmaktadır. Video, bir sonraki bölümde Plasmic'in tasarım araçlarının nasıl kullanılacağını anlatacağını belirterek sona ermektedir.

      • youtube.com

    • Yapay Zeka ile Web Sitesi Tasarımı ve SEO Optimizasyonu

      Bu video, yaklaşık 25 yıllık web sitesi deneyimine sahip bir uzman ve diğer tasarımcıların katıldığı canlı bir yayındır. Konuşmacılar arasında Kadir Koç, Yunus Emre ve Ahmet adlı kişiler bulunmaktadır. Videoda yapay zeka araçlarının (ChatGPT, Figma gibi) web sitesi tasarımı ve SEO optimizasyonu süreçlerinde nasıl kullanılabileceği adım adım gösterilmektedir. İçerik, analiz, planlama, tasarım, kodlama, içerik düzenleme, SEO ve reklam gibi web sitesi oluşturma aşamalarını kapsamaktadır. Ayrıca videoda anahtar kelime analizi, H1, H2, H3 tagları kullanımı, meta verileri düzenleme ve robot.txt dosyası oluşturma gibi SEO teknikleri anlatılmaktadır. Konuşmacılar, yapay zeka araçlarının tasarım sürecini kolaylaştırdığını ancak tamamen web işini bilen kişilerin yapması gerektiğini vurgulamaktadır. Video, izleyicilerden gelen sorulara yanıt verilerek interaktif bir şekilde ilerlemektedir.

      • youtube.com

    • Web ve Mobil Tasarımı İçin Hangi Programı Kullanmalıyım?

      Bu video, Ender ve Soru Bankası adlı iki kişinin web ve mobil tasarım konusunda bilgi paylaştığı bir eğitim içeriğidir. Ender, 17 yıldır Photoshop kullanan ve tasarım sektöründe deneyimli bir tasarımcıdır. Video, web ve mobil tasarım yaparken hangi programı kullanmanın daha uygun olacağı sorusuna cevap vermektedir. İçerikte UI ve UX kavramları açıklanmakta, Sketch, Adobe XD, Figma, Adobe Illustrator ve Photoshop gibi popüler tasarım programlarının artıları ve eksileri karşılaştırmalı olarak sunulmaktadır. Her programın kullanım kolaylığı, prototip oluşturma, plugin desteği, eğitim videoları gibi avantajları ile sadece Mac cihazlarda çalışması, takım çalışmasında sürüm uyumluluğu sorunları, güncelleme maliyetleri gibi dezavantajları detaylı olarak anlatılmaktadır. Ayrıca, tasarım sektöründe iş arayanlar için hangi programların öğrenilmesi gerektiği konusunda tavsiyeler de sunulmaktadır.

      • youtube.com

    • Figma'da İnteraktif Komponent Kullanımı

      Bu video, bir eğitim içeriği olup, konuşmacı Figma'daki yeni interaktif komponent özelliğini anlatmaktadır. Video, Figma'daki interaktif komponent özelliğinin ne olduğunu ve nasıl kullanılacağını adım adım göstermektedir. Konuşmacı önce prototip özelliğinin sınırlamalarını anlatarak başlıyor, ardından interaktif komponent özelliğinin sunduğu avantajları açıklıyor. Buton örnekleri üzerinden hover efekti, click efekti ve toggle gibi interaktif özelliklerin nasıl oluşturulacağını gösteriyor. Bu özellik sayesinde Figma'da sayfa içindeki küçük animasyonlar ve interaktif elemanlar oluşturulabiliyor, böylece prototipler daha gerçekçi hale geliyor.

      • youtube.com

    • Figma'da Dosyaları Bilgisayara Kaydetme Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere Figma uygulamasında dosyaları bilgisayara nasıl kaydedebileceklerini göstermektedir. Video, Figma'nın varsayılan olarak bulutta dosyaları tuttuğunu ancak bazı durumlarda bilgisayara kaydetme ihtiyacı olabileceğini açıklıyor. İki farklı yöntem sunuluyor: File menüsünden "Save to Local" seçeneğini kullanma veya Ctrl+P tuşlarına basarak hızlı menüyü açıp "Save to Local Copy" yazarak dosyayı kaydetme. Ayrıca, kaydedilen dosyanın mail atılabileceği veya USB aracılığıyla paylaşılabileceği belirtiliyor.

      • youtube.com

    • Figma'da Frame Tool Kullanımı ve Prototip Oluşturma Eğitimi

      Bu video, Ferdi Çıldır tarafından sunulan Figma dersleri serisinin ilk bölümüdür ve Figma uygulamasında frame tool'un kullanımını anlatmaktadır. Video, Figma'da frame tool'un temel özelliklerini ve kullanımını adım adım göstermektedir. İlk bölümde frame'lerin kapsayıcı yapısı, constrate (sabitler) özelliği, boyutlandırılması ve köşe yuvarlama gibi temel özellikler anlatılırken, ikinci bölümde frame'lerin arka plan olarak kullanımı, layout grid'lerin ekleme ve prototip modunda frame'lerin birbirine bağlanması gösterilmektedir. Eğitim, Figma'da responsive tasarım yapmak isteyenler için frame tool'un nasıl kullanılacağını öğrenmek isteyenler için faydalı bir kaynaktır. Ayrıca Bootstrap ile benzerlikler gösteren grid sistemi ve farklı cihazlarda tasarımın düzgün çalışması için gerekli ayarlar da gösterilmektedir.

      • youtube.com

    • Figma Tasarımlarını Bold'a Aktarma ve Kodlama Eğitimi

      Bu video, bir eğitim içeriği olup, konuşmacı Figma tasarımlarını Bold platformuna aktarma ve kodlama sürecini adım adım göstermektedir.. Video, iki ana bölümden oluşmaktadır. İlk bölümde Figma tasarımlarının Bold'a nasıl aktarılacağı ve bu tasarımların kodlanarak nasıl kullanılacağı anlatılmaktadır. İkinci bölümde ise Bolt adlı AI kodlama aracının diğer benzer araçlardan farklı olarak daha iyi performans gösterdiği vurgulanmaktadır.. Videoda bir mail uygulaması örneği üzerinden, Figma tasarımlarının Bold'a aktarıldıktan sonra nasıl geliştirilebileceği ve AI'nin tasarımlara göre özellikler ekleyebildiği gösterilmektedir. Konuşmacı, tasarımcıların Figma'daki çalışmalarını hızlıca kodlayarak projelerine entegre etmelerine yardımcı olacak bir rehber sunmaktadır.

      • youtube.com

    • Figma ile Dashboard Tasarımı ve HTML/CSS Aktarma Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web tasarım eğitim serisidir. Eğitmen, Figma kullanarak dashboard tasarımı yapma ve bu tasarımın HTML/CSS'e aktarılması sürecini adım adım göstermektedir. Video, UI.Designdil.com'dan alınan bir dashboard tasarımının Figma'da oluşturulmasıyla başlayıp, ardından bu tasarımın HTML ve CSS'e aktarılması sürecini kapsamaktadır. Eğitim, navigasyon bar, sidebar, profil alanı, navigasyon menüsü, tablo oluşturma ve responsive tasarım prensipleri gibi konuları içermektedir. Eğitim boyunca reset CSS kullanımı, Google Fonts entegrasyonu, flexbox ile layout oluşturma, padding, margin, font boyutu gibi CSS özellikleri detaylı olarak anlatılmaktadır. Ayrıca, dashboardların genellikle mobil uyumlu olmadığı ve admin fonksiyonları içeren büyük yapılar olduğu bilgisi de paylaşılmaktadır.

      • youtube.com

    • NFT Koleksiyonu Oluşturma Eğitimi

      Bu video, Didem adlı bir eğitmen tarafından sunulan NFT (Non-Fungible Token) koleksiyonu oluşturma eğitimidir. Eğitim, NFT'lerin ne olduğunu açıklayarak başlayıp, Figma üzerinden hazırlanan astronot temalı kıyafetlerin, kaskların ve halıların NFT'lere dönüştürülmesi sürecini adım adım göstermektedir. Video, Hashlips Art Engine GitHub reposu kullanılarak kod bilgisi gerektirmeden NFT'lerin nasıl oluşturulacağını, npm paketlerinin kurulumunu, layer configuration'ı, DNA oluşturma ve NFT üretme süreçlerini detaylı şekilde anlatmaktadır. Eğitimde ayrıca config.js dosyasının nasıl düzenleneceği, layer sıralamasının nasıl belirleneceği, metadata dosyalarının nasıl oluşturulacağı ve oluşturulan NFT'lerin Ethereum blockchain üzerinde OpenSea veya Rarible gibi platformlara nasıl yüklenebileceği hakkında teknik bilgiler de verilmektedir.

      • youtube.com

    • Cloud Talk to Figma MCP Sunucu Kullanım Rehberi

      Bu video, bir kişinin Cloud Talk to Figma MCP sunucusunun nasıl kurulacağını ve kullanılacağını adım adım gösterdiği bir eğitim içeriğidir. Konuşmacı, kendisinin tasarımcı olmadığını belirterek, bu aracın potansiyelini vurgulamaktadır.. Video, Cloud Talk to Figma MCP sunucusunun kurulum aşamalarını detaylı şekilde göstermektedir. Önce sunucunun kurulumu, ardından Figma'ya eklenti ekleme, Cloud Desktop'a eklenti yükleme ve Figma ile bağlantı kurma adımları anlatılmaktadır. Daha sonra, sunucu ile Figma arasında iletişim kurarak mevcut bir tasarımın zaman takibi yerine invoicing aracı olarak değiştirilmesi ve yeni bir dashboard tasarımı oluşturma örnekleri gösterilmektedir. Konuşmacı, bu aracın özellikle prototip oluşturma ve tasarım için kullanılabileceğini belirtmektedir.

      • youtube.com

    • Figma Kapsamlı Eğitim Serisi

      Bu video, bir eğitmen tarafından sunulan Figma tasarım programı hakkında kapsamlı bir eğitim serisidir. Eğitmen, UI tasarım veya Figma öğrenmek isteyenler için hazırlanmış bu premium eğitim serisinin ilk bölümünden başlayarak ilerleyen bölümlere kadar adım adım rehberlik etmektedir. Video, Figma'ya kayıt olma sürecinden başlayarak programın temel özelliklerini, canvas kullanımı, frame düzenleme, yerel stillerin oluşturulması, layout grid'lerin kullanımı, auto layout özellikleri, component ve variant oluşturma, prototip oluşturma ve dosya paylaşımı gibi konuları kapsamaktadır. Eğitmen, "Burger Licious" ve "iPhone 16" gibi örnek projeler üzerinden pratik uygulamalar göstermektedir. Eğitim serisi, Figma'da tasarım yaparken tekrarlanan stilleri yönetmek için yerel stillerin önemi, responsive tasarım yapmak için auto layout'un kullanımı, component oluşturma ve düzenleme teknikleri, boolean operasyonlar ve prototip oluşturma süreci gibi önemli konuları detaylı şekilde ele almaktadır. Ayrıca, Figma Community'den hazır component dosyalarının nasıl kullanılacağı ve prototipin farklı görüntüleme seçenekleri de anlatılmaktadır.

      • youtube.com

    • Figma'da SVG Dosyası İçe Aktarma Rehberi

      Bu video, bir eğitim içeriği olup, izleyicilere Figma uygulamasında SVG dosyası içe aktarma sürecini adım adım göstermektedir. Video, Figma'a giriş yapma veya hesap oluşturma adımlarıyla başlayıp, yeni tasarım oluşturma sürecini anlatmaktadır. Ardından, "Good the back" seçeneğine tıklayarak import seçeneğine ulaşma ve SVG dosyasını içe aktarma adımları gösterilmektedir. Kullanıcılar hem dosya seçerek hem de yerel diskten sürükleyerek SVG dosyalarını Figma projelerine ekleyebilirler.

      • youtube.com
  • Yazeka sinir ağı makaleleri veya videoları özetliyor