• Buradasın

    Figma

    Özetteki ilgi çekici içerikler

    • Figma Eğitim Videosu: İlk Giriş

      Bu video, yaklaşık 25 yıllık web tasarımı deneyimine sahip Kadir Koç tarafından sunulan Figma eğitim serisinin ilk bölümüdür.. Videoda Figma programının temel özellikleri ve arayüzü tanıtılmaktadır. Kadir Koç, Figma'nın Photoshop veya Adobe XD gibi programlara göre daha esnek, pratik ve hızlı olduğunu vurgulayarak, programın ana bölümlerini (board, import, taslaklar, proje, admin) açıklamaktadır. Ayrıca çalışma sahnesi, araçlar, metin, komponentler, paylaşım ve prototip oluşturma gibi temel özellikler de gösterilmektedir. Video, Figma'nın temel kullanımını öğrenmek isteyenler için temel bir giriş niteliğindedir.

      • 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 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'da Animasyon Oluşturma Eğitimi

      Bu video, Ender adlı bir eğitimcinin Figma programında animasyon oluşturma konusunda sunduğu bir eğitim serisinin ilk bölümüdür. Ender, izleyicilerin yorumlarda belirttikleri animasyonları da bu seriye ekleyeceğini belirtiyor.. Videoda, Figma'da pin animasyonu oluşturma süreci adım adım gösterilmektedir. Ender önce pin tasarımının nasıl oluşturulacağını, ardından bu tasarımın prototip olarak nasıl kullanılacağını ve animasyonun nasıl çalıştığını detaylı şekilde anlatıyor. Animasyonun çalışması için komponentlerin isimlerinin aynı olması gerektiği gibi teknik detaylar da paylaşılıyor. Video, Figma'da animasyon oluşturma konusunda temel bilgi edinmek isteyenler için faydalı bir kaynak niteliğindedir.

      • youtube.com

    • Fusion: Tasarım-Kod Dönüşüm Aracı Tanıtımı

      Bu video, bir sunum formatında Fusion adlı tasarım-kod dönüşüm aracının tanıtımını içeriyor. Konuşmacı, tasarım ve geliştirme süreçlerinde yaşanan sorunları ve Fusion'un bu sorunlara nasıl çözüm sunduğunu anlatıyor.. Video, tasarım-kod dönüşüm sürecinde yaşanan sorunları (tasarım incelemeleri, pixel-pushing toplantıları, tasarım sistemlerinin yeniden oluşturulması) ele alarak başlıyor. Ardından Fusion'un temel bileşenlerden başlayarak karmaşık multi-frame akışlara, tasarım sistemlerine ve göçlere kadar çeşitli tasarım-kod dönüşüm senaryolarını nasıl çözdüğünü gösteriyor. Son olarak, Figma'nın MCP sunucusunun bu süreçteki sınırlamalarını karşılaştırarak Fusion'un avantajlarını vurguluyor.

      • youtube.com

    • Figma'nın MCP (Modal Context Protocol) Özellikleri ve Kullanımı

      Bu video, bir tasarımcının Figma'nın yeni MCP (Modal Context Protocol) özelliğini tanıttığı bir eğitim içeriğidir. Konuşmacı, MCP'nin ne olduğunu ve nasıl kullanılacağını adım adım göstermektedir.. Video, MCP'nin ne olduğunu açıklayarak başlıyor ve ardından Figma'nın bu özelliği nasıl kullanabileceğimizi gösteriyor. MCP, AI'nin Figma'daki tasarım detaylarını (pixel ölçümleri, renk değerleri, layout özellikleri) doğrudan anlayabilmesine olanak sağlıyor. Konuşmacı, üç farklı tasarım örneği üzerinden MCP'nin nasıl çalıştığını gösteriyor: bir web sayfası, bir UH hero bölümü ve bir mobil tasarım. Her örnek için Figma'dan AI kod editörüne tasarım linki aktarılması, AI'nin HTML ve CSS kodu üretmesi ve sonuçların gösterilmesi adım adım anlatılıyor.

      • 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'da Yeni Komponent Özellikleri ve Buton Tasarımı Eğitimi

      Bu video, Ender tarafından sunulan bir Figma tasarım programı eğitim içeriğidir. Video, soru bankası formatında hazırlanmış olup, Ender'in eski bir arkadaşı da kısa bir süre için katılıyor.. Video, Figma'daki yeni komponent sisteminin eski sistemden farklarını ve avantajlarını göstererek başlıyor, ardından buton tasarımı için çeşitli özelliklerin nasıl kullanılacağını adım adım anlatıyor. İçerikte eski komponentleri yeni sisteme uyarlama, padding değerleri, kısayollar, varyasyon ekleme, yazı özellikleri ayarlama, ikon ekleme ve düzenleme gibi temel Figma işlemleri detaylı olarak gösteriliyor.. Eğitim, özellikle buton örneği üzerinden tek bir komponentle farklı varyantlar oluşturma ve bu varyantları kolayca yönetme tekniklerini ele alıyor. Ayrıca, butonların gizlenmesi, minimum genişlik ayarlanması, ikon rengi sabitleme gibi pratik bilgiler ve Figma'da kısayollar (option tuşu, shift tuşu, command tuşu gibi) ile plugin kullanımı (Select Similar plugin) gibi konular da paylaşılmaktadı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

    • Yap-İşlet-Devret Web Tasarımı: Front-End Hazırlıkları

      Bu video, The Codefather tarafından sunulan "Yap-İşlet-Devret" web tasarım serisinin bir bölümüdür. Eğitmen, daha önce Figma kullanarak tasarladığı hayali bir kayak merkezi sitesinin front-end kodlarını yazmaya başlıyor.. Video, web sitesinin ana iskeletinin belirlenmesiyle başlıyor ve Visual Code kullanarak klasör mimarisi oluşturma sürecini gösteriyor. Eğitmen, dinamik ve statik içerik dosyalarını ayırmak için "assets" klasörü oluşturuyor, Google Fonts'tan fontları ve Fon Tasm'dan ikonları ekliyor. Video, bir sonraki bölümde içerik kodlamaya başlanacağını belirterek sona eriyor.

      • 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

    • 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

    • 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

    • WordPress ve Elementor ile Tek Sayfalı Portfolyo Sitesi Oluşturma Eğitimi

      Bu video, bir eğitmen tarafından sunulan kapsamlı bir web sitesi tasarım eğitimidir. Eğitmen, izleyicilere WordPress platformunda ve Elementor uygulaması kullanarak tek sayfalı portfolyo sitesi oluşturma sürecini adım adım göstermektedir.. Video, WordPress'te temalar ve eklentilerin yüklenmesi ile başlayıp, görsellerin yüklenmesi, menü oluşturma, sayfa ayarları ve blog yazılarının eklenmesi gibi temel adımları içermektedir. Daha sonra Elementor ile site kimliği, logo, renk ve yazı fontları ayarları, header tasarımı, ana sayfa içeriği, footer ve sosyal medya bağlantıları gibi tasarım aşamaları gösterilmektedir.. Eğitimde ayrıca Figma kullanımı, mobil ve tablet görünümü ayarları, yan menü oluşturma, buton tasarımı, yapışkan header efekti ekleme ve CSS ID'lerle sayfa yönlendirmeleri gibi konular da ele alınmaktadır. Eğitmen, bir sonraki videoda blog sitesi yapımını yapacağını ve toplam 4-5 farklı web sitesi oluşturmayı planladığını belirtmektedir.

      • 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 Temel Eğitim Videosu

      Bu video, Fikret Re-Design tarafından sunulan kapsamlı bir Figma eğitim dersidir. Fikret, Re-Design kanalının sahibi olarak Figma programının temel özelliklerini adım adım anlatmaktadır.. Video, Figma'nın ne olduğu, hesap oluşturma ve giriş yapma adımlarıyla başlayıp, programın arayüzü, araç paneli ve temel araçları (Move, Scale, Frame, Shape araçları) detaylı şekilde göstermektedir. Ardından hizalama özellikleri, element özellikleri, layer ayarları ve renk paleti oluşturma gibi temel konular ele alınmaktadır. Son bölümde ise prototip oluşturma, sayfa geçişleri, animasyonlar ve kısıtlamalar (constraints) özellikleri bir e-ticaret teması örneği üzerinden pratik uygulamalarla anlatılmaktadır.. Video, Figma Desktop uygulamasının nasıl indirileceği, farklı tarayıcılardan tasarımın nasıl paylaşılacağı, komponent kavramının önemi ve responsive tasarım için kısıtlamaların nasıl kullanılacağı gibi pratik bilgiler de içermektedir. Bu eğitim, Figma kullanarak tasarım yapmak isteyenler için temel bir rehber niteliğindedir.

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