#Figma

[@FerdiCildiz]

Auto Layout Nedir, Nasıl Kullanılır - 0:06 Sıfırdan İkon Nasıl Çizilir - 3:31 Aynı Anda Birden Fazla Component Oluşturma: 18:23 Auto Layout ve Componentleri Kullanarak Arayüz Oluşturma: 24:19

[@capslock9802]

ferdi hocam merhabalar ! derslerinizden çok faydalanıyoruz. teşekkürler. bir sorum var ! component oluşturmadan evvel 48x48 aldığımız bölümde gruplandırmayı yapıyorum. ama saklamayı açtığım zaman orijinal boyuta geri dönüyor. neyi atladım acaba?

[@FerdiCildiz]

Saklamadan kastın nedir anlayamadım

[@capslock9802]

@@FerdiCildiz iconlar için hazırladığımız background katmanını gizliyoruz. öncesinde ctrl + g ile gruplandırdığımız. gizleme işlemini yapınca 48x48 olan background kayboluyor. icon, orijinal boyuta dönüyor. play stop iconlarına da aynı işlemi yaptım. onlarda bir sorun yok. ama geri kalan iconlar kendi boyutlarına dönüyorlar.

[@1belemir]

gerçekten bütün övgüleri hak ediyorsun Ferdi abi. İngilizce öğretmeniyim aslında ama bu alandan devam etmek istediğim için sıfırdan bir eğitim alarak senin derslerinle başladım. Mu az zam. başka kelime bulamıyorum aşırı mutluyum. Çok teşekkür ederiz böyle bir fırsat sunduğun için ve bu işi anlattığın için

[@alikemalozdemir7299]

Merhaba, 1 ayda neler yaptın? Ben de yeni başlayacağım

[@erkamsafa]

çok teşekkür ederim, sıfırdan başladım her gün çalışıyorum çok faydalı bilgiler, anlatımınız çok iyi.

[@FerdiCildiz]

Beğenmenize çok sevindim!

[@erenguner2477]

Selamlar hocam şimdi ne durumdasınız, nasıl gidiyor ?

[@hojiwan]

Auto layoutu hepimizin bildiği bir layoutta anlatması çok eğitici olmuş. Emeğine sağlık.

[@FablesOutofSpace]

Hocam, harikasınız! Kendi arayüzümü oluşturdum sayenizde ve tek bir videodan çok şey öğrendim:) Bu şekilde gerçek uygulamalar üzerinden gittiğiniz farklı eğitici videolarınızı görmek dileğiyle:)

[@FerdiCildiz]

Çok teşekkür ederim :) KZbin kanalımda ki diğer videoları da izleyebilirsin :)

[@FablesOutofSpace]

@@FerdiCildiz Tabiki hocam, emeğinize sağlık! Çevreme de bana sağladığınız katkılardan bahsediyorum, para tuzağına dönüşmüş sistemde bulunmaz nimetsiniz.

[@nanzewren8485]

Öncelikle dersler için çok teşekkürler :) sıfırdan başlamak isteyenler için oldukça aydınlatıcı! Fakat muhtemel ki yeni sürümlerde çok değişiklik olduğu için onları anlamam uzun sürüyor, sizi izlerken aynı anda ben de yapmaya çalışıyorum. Layoutta albüm coverını içine atarken sürekli yukarıya kayıyor. Vertical olarak yapmama rağmen sırrı çözemedim her yeri kurcaladım oysa...eski bir videoya yazıyorum ama umarım cevap alabilirim :)) emekleriniz için teşekkürler. Kariyer hayatına yeni adım atanlar için bu tarz eğitimsel videoların ne kadar değerli olduğunu bilemezsiniz :,)

[@FerdiCildiz]

Selamlar, neden cevap alamayasın :) Bu videodan sonra 3 kere daha Auto Layout güncellendi. Yaptığım en güncel video burada: kzbin.info/www/bejne/iWbSXqiVnqedl68 Daha da güncel bir kaynak istersen bit.ly/figmaegitimi adresindeki kursumu inceleyebilirsin :)

[@furkanceliksoydan7384]

Mükemmel olmuş hiç ileri sarmadan izliyorum videoları eline saglık 🙏

[@FerdiCildiz]

Çok teşekkür ederim :)

[@terlanmemmedoglu]

Allah razi olsun. Mukemmel bir egitim

[@talihacangar9277]

Merhaba hocam sebebini cokca kez kontrol etmeme ragmen playllist yazisinin oldugu ana frame layoutuma , album cover kapagini asla entegre edemiyorum nedenini anlayamadim , onerebileceginiz bir cozum var midir ?

[@injimammadova6190]

o kadar basit calistiki ben bunu 2saate bitirirdim.tesekkur ederim))

[@ebrartdesign]

Merhaba, 26:08'de spotify ve playlist auto layoutunu sizin gibi birlieştirdim ancak siz yaptığınızsa eklediğiniz auto layout ölçülerini aldı sizinki ama benimki almadı, nedendir acaba?

[@FerdiCildiz]

içine sürüklediğiniz auto layout'un ayarları "hug contents" olmalı, diğer türlü içine alır ama boyutu değişmez.

[@suleymantufekci]

Bir sorum olacaktı, 25:29 da Playlist ve isminiz yazılı olduğu kısmı dikey bir şekilde auto layout yapıyorsunuz diğer iconları da yatay bir şekilde. Ben de aynısını tekrarlıyorum. Frame içine aldığımda hepsi birbirine karışıyor nedenini çok kurcalasam da çözemedim. Text'leri eski videonuzda anlattığınız gibi birbirine eşit bir şekide açıp ortaladım ona rağmen bir sıkıntı oluşuyor.

[@FerdiCildiz]

İçine almak için kullandığın Frame de dikey auto layout olmalı, öyle olup olmadığını kontrol eder misin? Ayrıca auto layout'a bir güncelleme geldi ve bazı şeyler farklı görünüyor, sorun bundan da kaynaklanıyor olabilir. kzbin.info/www/bejne/iWbSXqiVnqedl68 by videoyu da izlemeni tavsiye ederim auto layout yeni versiyon için :)

[@suleymantufekci]

@@FerdiCildiz Kontrol ettim Frame'de dikey auto layout. En iyisi ben videonuzu izleyeyim orada mutlaka soruma cevap bulurum. Çok teşekkür ederim

[@FerdiCildiz]

@@suleymantufekci bulamazsan tekrar yaz lütfen :) rica ederim!

[@senaroloji]

Selam, iyi ki sizi keşfetmişim. Çok iyi anlatıyorsunuz teşekkür ederim. Bir konu tam olarak oturmadı. Layout, companent ve frame bunların tam olarak farklarını anlayamadım. Mesela bir app için önce telefon formatında bir frame oluşturdunuz ama sonra farklı boyutlarda da frame yapıldı. İlk üç videoyu izledim nasıl yapıldıklarını anladım tek tek not aldım fakat net farkları bir türlü algılayamadım. Mesela frame'i neden auto layouta çevirdiniz? sizi yormayacaksa cevaplarsanız çok mutlu olurum

[@FerdiCildiz]

Layout = düzen Component = bileşen, tekrar tekrar kullanılabilecek öğeler Frame = figma'da ekranları, componentleri ve çeşitli elementleri bir arada tutan yapı Bazı konuları anlatmak için farklı boyutlarda frameler oluşturmam gerekebiliyor, bu yüzden yaptım. Auto layout aslında bir frame türü ve nasıl oluşturulduklarını göstermek için çevirdim, umarım cevaplayabilmişimdir sorularını :)

[@senaroloji]

@@FerdiCildiz evet şimdi daha iyi anladım ben hepsi farklı gruplamalar olarak düşünmüştüm ama değilmiş amacı işlevsellikle ilgili teşekkür ederim başarılar dilerim umarım istediğiniz hedeflediğiniz yerlere zannetiğinizden önce ulaşırsınız 🌸

[@FerdiCildiz]

Çok teşekkür ederim :) başarılar dilerim

[@ozanklckran1615]

Eline, koluna, emeğine sağlık. Ufak bir önerim var UI / UX 'e yeni yeni girmeye çalışan arkadaşlar için terimleri söylerken açıklama yapabilirsen daha iyi olabilir. En ufak bir atlamada bile insan tam olarak anlamadığı bir şeyi öğrenmeye çalışıyormuş gibi oluyor. İyi çalışmalar :)

[@FerdiCildiz]

Açıkçası elimden geldiğince söylüyorum ama arada kaynamış olan olabilir, dikkate alacağım :)

[@sedatseyrek9095]

28:06 Abi buraya kadar yaptım ama “Seekbar”ı arayüze eklerken sizdeki gibi ortaya değilde sol tarafa ekliyor bunu düzeltemedim. Yardımcı olursan sevinirim.

[@FerdiCildiz]

Malesef bu eski bir auto layout videosu. kzbin.info/www/bejne/iWbSXqiVnqedl68&pp=ygUUZmVyZGkgYXV0byBsYXlvdXQgdjM%3D buradakini izlersen yeni versiyonunda daha iyi anlayabilirsin, sorun da muhtemelen bundan kaynaklanıyor zira sürekli güncelleme geliyor :)

[@sedatseyrek9095]

Tamamdır abi teşekkürler

[@emreylmaz1639]

çok teşekkürler

[@kraldragon1324]

süper bi dersti elinize sağlık

[@FerdiCildiz]

Çok teşekkür ederim yalnız bunun üzerine auto layout güncelleme aldı, "yepyeni auto layout" başlıklı videomu izlemeni tavsiye ederim

[@kraldragon1324]

@@FerdiCildiz mutklaka izleyeceğim Ferdi abi. Playlistin sırasında ilerliyorum

[@padlock_studio]

27:30 daki gibi yaptıktan sonra şarkı isimlerinin olduğu Autolayout ortada kalıyor, align tools çalışmıyor. Padingi değiştirip sola yaslayabildim :)

[@FerdiCildiz]

Bu videodan sonra başka bir auto layout videom daha var. Güncelleme geldiği için farklıdır görünüyor ona bakmanı tavsiye ederim

[@padlock_studio]

@@FerdiCildiz Tamamdır :)

[@aligokhanemiroglu6406]

Ellerine sağlık paralı eğitim gibi olmuş

[@FerdiCildiz]

Çok teşekkür ederim :)

[@subhanibrahimli6880]

Abi cok tesekkur ederim basardim

[@dilrubacelikkan]

13:19 da bahsettiğiniz flatten atıyor durumu nedir ben anlamadım?

[@FerdiCildiz]

Flatten yapıyor = şekilleri kalıcı olarak birleştiriyor

[@FerdiCildiz]

Bu arada bu video daha güncel, bence bunu izlemen daha doğru olur :) Figma sürekli güncelleme getirdiği için ayrı videolar yapmıştım kzbin.info/www/bejne/iWbSXqiVnqedl68

[@dilrubacelikkan]

@@FerdiCildiz teşekkür ediyorum

[@halilcelik5511]

Figma da kullandiginiz sag ust taraftaki hizalandirmayi kullanamiyorum gorunuyor ama basinca olmuyor

[@hikmat9630]

Hocam merhaba. Auto layout içerisindeki seçili elementleri sağ menude en üstde align paneli gözükmediğinden sağa ve ya sola align edemiyorum. Cevaplarsanız çok sevinirim. İyi günler dilerim.

[@FerdiCildiz]

Auto layout güncellemeden sonra değişti, sağ üstteki align paneli yerine bir kutu oluşuyor, hizalama oradan yapılıyor artık, detaylı bilgi burada: kzbin.info/www/bejne/iWbSXqiVnqedl68

[@hikmat9630]

@@FerdiCildiz hızlı geri dönüş için çok teşekkür ediyorum. hemen buluverdim. Kolay gelsin hocam :)

[@FerdiCildiz]

Rica ederim :)

[@futbolyayinlari9919]

Hocam birde linkedin inboxinizi kontrol etseniz keske :)

[@HusamNasrullah]

Harika ellerine sağlık ♥️

[@FerdiCildiz]

Çok teşekkür ederim!

[@eneskaraca3066]

hocam merhaba teşekkürler emekleriniz için framelere tıkladığımda hizalama butonları aktif olmuyor nedeni nedir?

[@eneskaraca3066]

HOCAMIZ YORUMDA BU SORUNUN CEVABINI VERMİŞ ARKADAŞLAR Auto layout güncellemeden sonra değişti, sağ üstteki align paneli yerine bir kutu oluşuyor, hizalama oradan yapılıyor artık, detaylı bilgi burada: kzbin.info/www/bejne/iWbSXqiVnqedl68 1

[@talihacangar9277]

autolayouti diger autolayoutin icerisine atarken sorun yasiyorum alt alta veya ust uste geliyorlar birbirlerinin icine gecmiyorlar yardimci olursaniz sevinirim

[@hdumanhd]

Hocam merhaba bu birden fazla iconu seçerken ve onları kopyalıp yapıştırken hangi kısayollarını kullanıyorsunuz?

[@FerdiCildiz]

Seçerken shifte basılı tutuyorum. Kopyalarken de alt ya da ctrl+d

[@OyunProg]

Hocam ögeleri seçip istediğimiz yere kopyalarken hangi tuşu kullanıyoruz ?

[@FerdiCildiz]

Alta basılı tutabilirsin ya da Ctrl c ve ctrl v :)

[@padlock_studio]

Emeğiniz için teşekkürler. Figma da araçları AI deki gibi kullanma şansımız yok mu ? Mesela align tool un olduğu paneli söküp başka yere taşımak, renkler bir yerde ? Figma arayüzü konusunda esnekliği var mı ? Bununla ilgili bir plugin vs ?

[@FerdiCildiz]

Malesef bu henüz yok. Sadece yeni gelen widgets paneli sola sabitlenebiliyor o kadar. Ama eminim ileride gelecektir bu tarz şeyler

[@VM-16]

hocam çok teşekkürler öncelikle benim sorum union yapınca iconumun beyaz olması bir türlü sorunu anlayamadım.

[@FerdiCildiz]

Arkasında gizli bir shape kalmış olabilir

[@VM-16]

@@FerdiCildiz yok hocam stroke yapıp verdiğim kalınlıklar renkler hepsi resetleniyor union yaptığım zaman

[@FerdiCildiz]

Union yaptığın bütün shapeler aynı tür olmadığı için olabilir mi? Yani kimi stroke kimi fill, hepsini aynı yapıp dener misin?

[@nurhudaozer9746]

1.54 "farklı boyutları bir araya getirdiğimizde ve dikeye çevirdiğimizde hizalamayı sola sağa ya da ortaya olacak şekilde yapabiliyoruz" dediğiniz kısımda ben yapamıyorum çünkü benim sola sağa ortaya hizalama çubukları aktif olmuyor pasif kalıyor sizin yaptığınız adımların aynısını uyguladığım hâlde. Dikey hale getirdiğimde sola hizalı oldu orta veya sağ olmuyor yani.

[@FerdiCildiz]

Figma'nın arayüzü değiştiği için daha farklı olabilir seçeneğin yeri :)

[@serhatavc8239]

Anlatım için teşekkürler 👍 figma da tasarım bitince nasıl responsive html css çıktı alacağız figma bunu hallediyor mu?

[@FerdiCildiz]

Sağ üstteki Design /prototype /code kısmındaki koddan css kodunu veriyor. Onun dışında zeplin entegrasyonu da mevcut. Doğrudan html export vermiyor, kodlanması lazım :)

[@serhatavc8239]

@@FerdiCildiz programa bakınca bir responsive çıktı alacak gibi duruyor 🤦‍♂️ Bu kısmı da son dersler de anlatacak mısınız bu haliyle kalırsa pizza yı yapıp fırında pişirmemek gibi kalır

[@FerdiCildiz]

Tabi ki anlatacağım ama belli bir yol haritası çerçevesinde ilerlemeye çalışıyorum :)

[@3mr3tur]

iconların arkasına kare ekleyip ortalayıp componente çevirmek yerine frame oluşturup arka plan rengini devre dışı bıraksak sonra iconlarımızı frame'in içine koyup ortalayıp componente çevirmek daha mantıklı değil mi? Sonuçta seçtiğimiz nesneleri componente çevirdiğimiz zaman Figma otomatik olarak şekillerin dışına frame ekliyor, frame'i component'e çevirdiğimiz zaman zaten frame olduğu için dışına ek bir frame daha eklemiyor. Acaba kaçırdığım bir şey mi var?

[@FerdiCildiz]

Evet aynen öylesi daha mantıklı :) ben de artık öyle yapıyorum ama videoyu çekeli iki yıl oldu malum :)

[@furkanyuksek1638]

@Ferdi Cildiz hocam Outline Stroke yapmamızın tam sebebini anlayamadım açıklayabilir misiniz rica etsem ?

[@FerdiCildiz]

Strokeları içleri dolu şekillere çevirmek için yapıyoruz yoksa boyutlandırma yaparken sürekli stroke ayarını değiştirmek gerekiyor

[@furkanyuksek1638]

@@FerdiCildiz Anladım hocam teşekkür ederim

[@melissa6756]

merhaba en son Spotify framine albumcoverı yerleştiremedim sizin gibi. Sebebi ne olabilir acaba?

[@FerdiCildiz]

tam olarak nasıl bir hata oldu?

[@metehanpinarli]

Hocam merhaba ikonları karenin içine koyma amacımız tam olarak nedir ? sonuçta boylarını değiştirmiyoruz bu işlemle her türlü aynı o kısmı anlayamadım

[@FerdiCildiz]

Her ikonun boyutu farklı ve site genelinde farklı ölçülerde kullanmak gerekebilir. Ayrıca bazen kodla da boyutlandırmak mümkün, bunu yaparken de oranı korumaya da yarar bu. Ayrıca ikonları font dosyasına gömerken de kolaylık sağlar :)

[@metehanpinarli]

@@FerdiCildiz teşekkür ederim :)

[@nadirmemmedov6071]

2.05 dk yaptiginizi ben yapamiyorum hizalama cikmiyor sebebi nedendir frameleri seciyorum (shift tusuna basli tutaraq ) sol tarafdan secincede ctrl tusuyla seciyorum yeni yanlis yapiyorum

[@FerdiCildiz]

Auto layout'a sonradan güncelleme geldi, artık hizalama auto layout için vertical v few horizontal seçtiğimiz kısmın sağındaki kutudan yapılıyor kzbin.info/www/bejne/iWbSXqiVnqedl68 adresindeki videomdan detaylı bilgi alabilirsin :)

[@anlgungor5373]

Merhabalar,play ikonunu yaparken üçgen ve daireyi seçip union selection ve flatten selection yapıyorum ancak komple siyah oluyor dairede yardımcı olursanız sevinirim.şimdidden teşekkürler

[@FerdiCildiz]

Daire stroke ise ctrl shift o tuşlarına basıp shape'e çevirdikten sonra union ve flatten yaparsan olacaktır muhtemelen

[@meleksd7509]

@@FerdiCildiz Merhaba bendede aynı sorun var , yazdığınız gibi ctrl shift o yaptım fakat yinede tek renk oluyor. Aynı şekilde ses çizgisini gösteren çizgide tek renk oluyor

[@elifnursandkclar4025]

Sayenizde bu hafta sonu Figmayı çözücem umarım :) Ama yine bir sorum var. 2.14 saniyede auto layoutlar aynı sizinki gibi seçili olduğu halde sağ üstteki "Align" menüsü aktif olmuyor :( Bir tülü çözemedim nedendir acaba? Tekrar emeğinize sağlık :)

[@FerdiCildiz]

Auto layout yeni bir güncelleme aldı ve align artık oradan değil ortaya doğru sağda kutu halinde çıkıyor. Auto layout ile ilgili de yeni bir video çekip yayınlayacağım ilk fırsatta :)

[@elifnursandkclar4025]

@@FerdiCildiz Çok teşekkür ederim geri dönüşleriniz için :)

[@elifnursandkclar4025]

Buldum :))

[@FerdiCildiz]

Rica ederim :)

[@efesener8690]

Merhaba, nasıl zoom yapıyorsun?

[@FerdiCildiz]

Klavyede +ya basarak yapabilirsin

[@Leonalayja]

benim elimde bi c kodu var. buna özel bi arayüz yapıcam nasıl yapabilirim?

[@FerdiCildiz]

C hiç bilmiyorum

[@nurhudaozer9746]

Videoda oluşturduğum dosyayı indirmek için: deki görselle videodaki görsell farklııı

[@sevdactr]

Meehaba, Figmaya ıllustratorden veri aktaramıyorum svg formatiyla alınca bozuluyor. Ctrl c ve ctrl v yapınca fotoğraf gibi algılıyor verileri.illustratorden nasıl veri labiliriz figmaya

[@FerdiCildiz]

Merhaba, Illustrator'den kopyalayıp Figma'ya yapıştırmanız yeterlidir. Kopyaladığınız şeyin vektör olduğundan emin olun, eğer vektör değilse resim olarak alması normaldir.

[@bahargungor1571]

Direk kopyalayınca oluyor mu bilmiyorum ama ai'deki dosyayı svg kaydedip figmada dosyanın içine çekebilirsin

[@gulsumyasar2075]

ellerinize sağlık lakin çok basit bir noktayı kaçırmış olabilirim component ve katman arası farkı belki de çok basit bir cevabı olmasına rağmen anlayamadım açıklarsanız çok sevinirim, teşekkür ederim şimdiden...

[@FerdiCildiz]

Aslında her şey bir katmanda gösteriliyor. Component ise tekrar tekrar kullanılan elementler ve onlar da birkaç katmandan oluşabilir

[@gulsumyasar2075]

@@FerdiCildiz Tekrar tekrar kullanmaktan kastımız ne oluyor tam olarak?

[@FerdiCildiz]

Bir elementi tekrar tekrar kullanmak. Mesela her sayfada aynı header'dan olmak zorunda :)

[@gulsumyasar2075]

@@FerdiCildiz teşekkür ederim

[@dogantuncel293]

profesyoneI çaIısmaIar için frameIeri ve rectangIeIarı auto Iayout mu yapmak gerekiyor

[@FerdiCildiz]

Duruma göre değişir ama ebatı değişecek her şey için auto layout çok büyük rahatlık

[@mustafadogan7184]

Hocam Figma biz tasarımı yaptıktan sonra front-end kodunu mu veriyor ?

[@FerdiCildiz]

Sadece CSS kodunu veriyor

[@mustafadogan7184]

@@FerdiCildiz teşekkürler hocam.

[@GC9jxVoWMVr1vKR]

King

[@nrytuncer1]

Mask için videonuz var mi

[@FerdiCildiz]

hayır yok, ama çekebilirim :)

[@ebruyasar7701]

merhaba yazılım bilgisine hiç sahip olmadan figmada tasarım yapabilir miyim

[@FerdiCildiz]

Tabi ki ancak temel seviyede html css bilmek kesinlikle önemli

[@nicatgasimzade3724]

eline emegine saglik abim benim adam kral aqa be

[@FerdiCildiz]

Teşekkür ederim :)

[@esmanurbayram]

Öncelikle merhaba, tasarladığım arayüzü bilgisayarıma sayfalar arasında geçişi sağlayacak bağlantılar ile kaydetmem mümkün mü ? Yoksa sadece png, jpg, pdf formatında mı kaydedebilirim ?

[@FerdiCildiz]

Ekran videosu çekebilirsin ancak bunun dışında offline kayıt almak mümkün değil malesef.

[@TrueNature-AI]

🟦🟦

[@eneskaraca3066]

Ferdi hocam arayüzü screenshota benzetmeye çalışırken yaptığınız genişlik yükseklik ayarlarını yapamıyorum,layoutların bazıları hiç hareket etmiyor bazıları ise yana doğru uzuyor,kesinlikle aşağı uzatamıyorum nasıl çözeriz?

[@FerdiCildiz]

Muhtemelen Auto layout yönünü yanlış yapıyorsun, ona dikkat etmeni tavsiye ederim

[@eneskaraca3066]

@@FerdiCildiz teşekkür eederim cevap için