Figma Dersleri - Bölüm 6 - Component

[@endertopaloglu]

17:24 Rename it plugini ile yaptığım işlemi " Cmd+R " tuşlarına basarak açılan pencereden de yapabilirsiniz. Figma bu plugini kullanmadan da bu işlemi yapabiliyormuş 😅 Adobe XD ve Sketch kullandıktan sonra yapamadığını varsayarak bu plugin'i kullandım, özür dilerim figma 😊

[@cancansem]

Süpersin hocam

[@forzabursa1168]

Hocam Merhabalar, Componentler ve AutoLayout bölümlerine güncelleme gelmiş fakat videolarda eski varyasyonla anlatıyorsunuz. Güncelleme gelen bölümlerin yeni videosu gelir mi? Ayrıca eğitim için çok teşekkürler

[@ozturkderincom]

Hocam 1- Sanırım figma ekranı değişti sezin bazı ayar ekranlarınız bizde cıkmıyor. 2- sizden rica bazen neyi seçtiğinizi çok göremiyoruz o yüzdende aynı sonucları alamıyorum bir sonraki eğitiminiz yada güncellemenizde bunları dikkate alıp yaparsanız cok mutlu olurum. Ayrıca emeğiniz ve yardımlarınız için çok teşekkür derim.

[@vusalaiskandarova]

Merhaba hocam, yaklashik olarak 1 bucuk yil once sizin kanaldan Figma ogrenmeye basladim. Su an cok daha iyi yerlerdeyim. Bana ve baska ogrencilere kattiginiz katkilardan dolayi sizi cok tebrik ediyorum. Yeni baslamak isteyen tum arkadaslara kesinlikle sizi oneriyorum. Tam bir pedagog gibi anlasilir ve kolay dilden anlatim sekli sizi tum kanallardan ayri kiliyor.. Basarilar diliyorum islerinizde!

[@islimertas3148]

merhabalar ben de yeni başladım öğrenmeye. sizden biraz bilgi alabilir miyim iş bulma ve iş olanakları hakkında? pek bir bilgim yok :(

[@sevvalersoz5798]

harika bir dersti ve komponentler gözümü korkutan, defalarca başına oturup daraldığım bir konu olmasına rağmen sayenizde bir kerede hallettim. hiç de zor gelmedi sizin anlatımınızla, teşekkürler

[@photosfromme]

Hocam öncelikli olarak 50 dakika gibi bir ders yüklemişsiniz çok teşekkürler büyük bir emek var. Diğer yönden de o kadar zevkli bir dersti ki her özellikte vay be işte bu dedik. Emeğinize sağlık...

[@dincer2f]

gerçekten çok güzel bir eğitim serisi.. benim gibi sektör değiştirip front-end kovalayan arkadaşlar için de çok ekstra bir özellik sağlayacaktır. ayrıca soru bankası arkadaşın soruları da bazen merak ettiğim sorular oluyor o sebeple formatınız da tebrik edilesi.

[@endertopaloglu]

Beğenmenize sevindim, teşekkürler 😊

[@cihantekbas]

Valla hocam sizin videoları izleyen meslek sahibi olur. Helal olsun. Soru bankası da mükemmel düşünülmüş. Gerçekten ne diyeceğimi bilemiyorum. Harikasınız.

[@checkmatz2018]

Hocam çok sade ve anlaşılır anlatımınız var. Videolarınızdan çok ince detaylar öğreniyoruz. Emeğinize sağlık. Biz izlemeye devam ediyoruz. Umarım sizde fırsat buldukça videolarınıza devam edersiniz. Teşekkür ederim.

[@erayberk3]

bu konu sadece benim mi kafamı karıştırdı :)

[@fatmag513]

Hocam bu harika emek ve bilgi içeren dersler için tüm kalbimle teşekkür ederim. Eminim benim gibi hayallerine ulaşmaya çalışan birçok kişiye ışık oldunuz, yüzlerini güldürdünüz. Tekrardan umutlar yeşerttiniz tanımadığınız hayatlarda. Bu gerçekten inanılmaz anlamlı bir şey. İyi ki sizin gibi değerli ve profesyonel bir tasarımcıyı bu platformda da olsa tanıdım, bir gün yüzyüze karşılaşmak dileğimle.

[@endertopaloglu]

Faydalı olmasına çok sevindim. Kariyerinizde şimdiden başarılar dilerim 🤗🙏🏼 Böyle mesajlar gelince biz de yeni videolar çekmek için daha çok motive oluyoruz

[@fatmag513]

@@endertopaloglu Çok teşekkürler hocam ☺🙏

[@reyhanylmaz516]

Emeğinize sağlık, harika bir ders anlatımı dizi gibi nasıl geçtiğini anlamıyor insan :)

[@cnylmz5]

Türkçe figma kaynakları bu kadar kısıtlı iken bu serinin daha fazla ön plana çıkması gerekiyor. Bu arada çok teşekkürler hocam :)

[@endertopaloglu]

Güzel yorumun için teşekkürler Can. Videolar ne kadar çok insana ulaşırsa o kadar kişi faydalanır aslında yoksa benim bundan maddi bi beklentim yok 🙃

[@ayselramazanli1479]

Hocam, teşekkür ederim emeğiniz için, çok değerli böyle detaylı anlatım videoları 🫶🏻

[@tolunayerbas694]

Sunmuş olduğunuz bu yararlı ve keyifli dersler için çok teşekkür ederiz hocam güncelleme geldikçe yeni videolar istiyoruz ve bekliyoruz :)

[@Hhkhxhjiikjndthv]

Ağzınıza emeğinize sağlık

[@sinemozturk5176]

Harika bir anlatım :) teşekkürler

[@endertopaloglu]

Teşekkürler 😊

[@armantkn]

Manuel ayarlamak daha kolay bence auto layout bana daha zor geldi.

[@phanthomas989]

senin karakterine helal olsun

[@Hhkhxhjiikjndthv]

Çok teşekkürler hocam

[@hasanhuseyindeniz837]

Hocam ve arkadaşlarım ben şu ikon eklemeyi yspamadım yardım edebilecek varmı

[@leylamusazade97]

Soru bankasi sonunda çıldırdı 😆Autolayout ve Component dersini 3-cü kez izlerken ben :

[@fragmanyum5101]

aynı bende bu videolarda kaldim :D

[@fragmanyum5101]

16:00 anlamadığım bir mantık var. Component'in kopyasına ikon ekleyemiyoruz diye sıfırdan buton yaptınız . Kopyasına eklenmiyorsa neden orjinal Component'e ikon eklemedik de sıfırdan ypamaya calıstık

[@endertopaloglu]

Component mantığı tamamen değişti ve güncellendiği için son yayınladığım "Auto Layout ve Component" videomu izlemeni tavsiye ederim

[@fragmanyum5101]

@@endertopaloglu Oraya da gelicez umarım son plugin videosu kaldı

[@beyzabeyza485]

videolar harika, ama büyük bir sorunum var hocam ne yaparsam yapayım çok kurcaladım internetten de bakmaya çalıştım fakat bulamadım fill container dediğim halde (sizin gösterdiğiniz gibi de yapıyorum soldaki kısımdan kendini değil bir altını seçerek fill container diyorum) yine de sürüklediğimde genişleme elde edemiyorum, çözemedim bir türlü yani sizin 44:17 de yaptığınızı gerçekleştiremiyorum, yayınınızın üstünden 2 yıl geçmiş ama belki bir ümit yorumumu görüp yardımcı olabilirseniz çok mutlu olurum, teşekkürler.

[@beratcavdar6909]

kalite,

[@adnan.arslantas]

14:00 Buton Defaulttan bir kopya oluşturup auto layout’a dönüştürüp tekrar compenant dönüştürdüğümüz işlemi Default’a değilde defaultun bir kopyasından bir başka kopya oluşturup onu auto layout’a dönüştürüp tekrar compenant yaptığımızda bu yeni oluşan component Default compenantine ne yaptırırsak onu taklit ediyor. Normalde en baştan bir compenant oluşturduğumuz için taklit etmemesi gerekmez mi?

[@endertopaloglu]

Bu dersi anlattığımın üzerinden çok zaman geçti o yüzden yeni yayınladığım component videosunu izlemenizi tavsiye ederim :)

[@dilanelci8010]

Merhaba, öncelikle video için çok teşekkürler. Bir konuyu anlayamadım, yardımcı olabilirseniz çok sevinirim 🙏🏻Öncesinde her şeyi adım adım yaptım ama 33:32 de yaptığınız gibi genişliği dinamik olarak değiştiremiyorum. Aynı şekilde ardından hover'ın dinamik olmayışını düzeltmek için yaptığınız adımları da tek tek yaptım fakat sizin yaptığınız gibi düzeltemedim. Buradan ne kadar iyi aktarabildim bilmiyorum ama bir öneriniz olur mu? Genel olarak nedense dinamik olarak değiştirme işleminde sorun yaşıyorum.

[@endertopaloglu]

Merhaba Dilan, yaptığın çalışmayı görmeden söylemem çok zor ama sıfırdan tasarım yaptığım join coin veya benzer diğer videolarımda detaylı olarak buna benzer çalışmalar yaptım. Onlara bakarak sebebini öğrenebilirsin :)

[@dilanelci8010]

@@endertopaloglu çok teşekkürler!🙏

[@akinkoccc]

abi detach instance butonuna basınca mikrofonun stereo özelliği kapanıyo bida basma 6:28

[@akinkoccc]

6:40 soru bankası sağolsun espri yapınca mikrofonun stereo özelliği açıldı

[@besercelik3278]

sağdaki reisizing kısmı bende yok onu nasıl düzeltirim

[@tugrulhansatil2782]

hocam sıfırdan figma öğreniyorum değişiklikler var kullanım olarak ve iconlar için verdiğiniz link çalışmıyor nasıl yaparız

[@muhammedubeydullahcosgun4701]

Merhaba birlikte bende bu çalışmayı yaptım en son illustrasyonu da ekledim ancak play iconuna tıkladığım da sadece ıllustrasyon görünüyor eklediğimiz butonlar vs. hiçbiri görünmüyor neden olabilir ?

[@suelcakmak3206]

merhaba hocam variant set oluşturduktan sonra default oluşturduğumuz ilk butonu daha önce yaptığımız gibi aynen taklit eden bir variant oluşturmamız mümkün değil galiba öyle mi? anladığım kadarıyla bunun olması için variant içinde tekrar component oluşturmamız gerekiyor ancak denediğimde figma variant içinde component oluşturmaya izin vermiyor

[@vasifhummetov5400]

Hocam ellerine saglik. guzel ders olmus. 9 ders var bu seride. bunlari bilmekle figmada rahat dizayn ede bilerikmi?

[@hegelinmutlaktozu8070]

Hocam design system kuruyorum ama herkes butonların hover, focus, active ve disabled variantlarını farklı yapıyor. Ingilterede yaşadığım için genellikle ingilizce kaynaklardan yararlanıyorum. İzlediğim iki türk tasarımcı var, Siz ve Hakan Ertan abi. Çoğu kişi hover variantını primary renge kıyasla biraz daha beyazımsı yapıyor, bazıları daha koyu yapıyor. Ben focus variantların border kısmını dışarıya değil içeriye doğru yapmışım, yaklaşık 180 buton yaptım. Sizce silip dışarıya şekilde border yapmalı mıyım? Bir şey daha sorucam, buton için ideal yükseklik low 42px, medium 60px, high priority 72px demiştiniz ve bu ux sitelerinde de böyle geçiyor. Fakat text button için ideal label boyutu 16px demiştiniz ve ben Noto sans ile small'da 14px, medium'da 16px, large'da 19px label kullandım, Hakan abi derste böyle yapmıştı. Large'a dikeyde 20px, yatayda 36px, medium'a dikeyde 16px, yatayda 32px, small'a da dikeyde 12, yatayda 24px padding verdim. Small 43px, Medium 54px, Large 66px oldu. Dediğiniz boyutlarla birebir tutmuyor, böyle olması bir sorun yaratır mı?

[@endertopaloglu]

Merhaba. Sorularını teker teker yanıtlamaya çalışayım. Buton hover tasarımsal bir karardır. Buton üzerine gelindiğinde butonun koyu renge dönmesi veya açık olması tamamen senin verebileceğin bir karar bunun doğrusu veya yanlışı yok :) Buton focus olduğunda border dışarıya doğru verilir. UX olarak herkesin benimsediği bir kullanıcı deneyimi. İçeriye doğru verdiğin border focus hissiyatı vermeyecektir. Butonlar konusundaki ölçüler vurguladığım gibi ideal boyutlardı. 5px-10px farklı olması sorun yaratmaz. Tasarım yaptığın platform, hedef kitlen ve tasarım kararın bu boyutları değiştirebilir. Ama bir bütünlük olması açısından o aldığın kararı tasarımın tamamına uygulaman gerekir.

[@hegelinmutlaktozu8070]

Ender hocam, sorularimi cevapladiginiz icin tesekkur ederim. Sadece ogrettiginiz dersler degil, ayni zamanda sacdiginiz pozitif enerji de en verimsiz gunumde bile beni neselendiriyor. Neseniz daim olsun, tekrar tesekkur ederim :)

[@endertopaloglu]

@@hegelinmutlaktozu8070 böyle güzel geri dönüşler aldığım sürece elimden geldiğince seve seve sorularınızı cevaplarım :))

[@ElyesaTV]

Selamlar Hocam unDrav dan seçtiğiniz tvg yi figma içerisine nasıl aktarıyoruz sizde direk figmada başladı bende google +link içerisine gitti 0 dan başladıgım için pek beceremedm

[@dilaraekici588]

Öncelikle video için çok teşekkürler :) bir sorum olucak input alanında sizin ilerlediğiniz adımlarla ilerledim üç halini kopyaladığım alanla variant oluşturamıyorum ama kopyalamadıklarımı seçince oluyor nedeni ne olabilir?

[@htmlcss1027]

hocam figma bize oluşturduğumuz tasarımın hem html hem css kodlarını veriyor mu ?

[@sinefingis]

Öncelikle emeğinize sağlık, çok dolu bir içerik. Bu bölümle ilgili bir türlü aşamadığım bir durum var, ikonlu buton oluşturma bölümünde ikonu sürükleyip butona bıraktığımda sizdeki gibi çıkmıyor, iki ayrı bileşen gibi oluyor. Ancak butonu component haline getirdiğimde sizin yaptığınız (sağa, sola gibi) işlemleri yapabiliyorum. Ama baktım sizin versiyonunuz component değil. Burası için bir öneriniz var mı acaba?

[@endertopaloglu]

Merhaba, ikonu eklemeden önce gruplayın daha sonra ekleyin. Yorum için teşekkürler :)

[@muhammedubeydullahcosgun4701]

layer da yaptığınız isimlendirmeler sadece bizim ayırt edebilmemiz için mi yoksa çalışmaya bir etkisi var mı yani kendi anlayacağımız şekilde de isimlendirebilir miyiz?

[@endertopaloglu]

Çalışmayı ileride başkalarına devredeceksek veya ekip çalışması olacaksa herkesin anlayabileceği şekilde isimlendirmemiz gerekiyor. Sadece daha rahat çalışabilmek için yoksa çalışmaya gözle görülür bir etkisi olmaz

[@cerenguney9753]

Hocam, text, ve color stilerini daha önceden hazırlamışsınız sanırım Ben stil oluşturamadım.

[@endertopaloglu]

Joincoin veya bariyer videolarımda tasarım yaparken sıfırdan nasıl oluşturabileceğinizi gösteriyorum :)

[@leylamusazade97]

Merhaba Ender bey oncelikle vidyolarinizdan cok sey ogrendim tesekkur ederim. Bir sorum var . Burada sizinle birlikde ben de ayni seyleri figmada yapiyorum. Button componenti yaptikdan sonra iki tane kopya yaptim biri Alisverisi tamamla digeri Sepete ekle daha sonra birini alt tusuna basarak cogaltdim digerini ise assetsden aldim . Ana komponentde yaptigim degisiklik assetsden aldigim yavru komponentde olmuyor. Daha once de ana komponentde mesela renk degisikligi yapdigimda yavru komponentde degismemisdi renk bu yuzden boyle bir deneme yapdim. Acaba neden oyle oluyor anlatir misiniz bana?

[@endertopaloglu]

Merhaba Leyla, aslında böyle anlattığında bir sorun olmaması gerekiyor ancak tasarım dosyasını incelersen o zaman cevap verebilirim

[@hasanada9300]

varyantı nasıl oluşturuyoruz7

[@surasalimzada5860]

Merhabalar. Yaptigimiz deyisiklikleri nasil 1 adım geri alabiliyoruz?

[@endertopaloglu]

Merhaba, tabii Ctrl+Z'ye basarak yaptığınız değişiklikleri geri alabilirsiniz.

[@surasalimzada5860]

Hocam " Selections colors"dan renk cheshitlerine nasil gire bilirim? Kısıtlı renkler var sadece

[@endertopaloglu]

Merhaba, selection colors seçtiğin objedeki kullanılan renkleri gösterir sadece :) Bir objeye renk vermek için sağ taraftan "fill" bölümünde renk verebilirsin.

[@nigarmusayeva1917]

Hocam,önceliklikle videolarınız harika gerçekten.Bir sorum olacakdı.Group selection u nerde kullanıyoruz?onu derslerde kaçırdım sanırsam,bir daha söyler misiniz lütfen?🇦🇿☺️

[@endertopaloglu]

Nigar merhaba, videoları beğenmene sevindim :) Figma'da 3 farklı gruplama seçeneği var. Frame Selection, Auto Layout ve Group Selection. Derslerde Frame selection ve Auto Layout özelliklerini detaylıca anlattım ama yine çok kısa bahsedeyim. Frame selection yaptığında içerisindeki objeleri ortalama özelliği veya maskeleme özelliğini kullanabilirsin. Auto Layout: objeler arasındaki mesafeyi ayarlamana ve düzenlemeye yarıyor. Bunlardan farklı olarak Group Selection'ın hiç bir özelliği yok :) Sadece düzenli çalışmak için yaptığımız bir şey. Group Selection yapacağıma Frame Selection yaparım hem maskeleme yaparım hem içerisindeki objeleri hizalarım da diyebilirsin. Group Selection neden var o zaman? Örneğin: Pen tool aracınla bir icon veya benzeri bir şey çizdin ve hepsi layer panelinde ayrı ayrı duruyor. Group Selection yaptığında layer panelinde (sol tarafta) hepsi tek bir klasörün altındaymış gibi durur ve o gruba çizimin adını verirsen daha düzenli çalışmış olursun. Anlaşılmayan veya merak ettiğin bir şey olursa sorabilirsin 😊

[@nigarmusayeva1917]

@@endertopaloglu 🥰çox teşekkür ederim

[@adellol1015]

Merhaba açıklamada biraktiginiz icon linki çalışmıyor

[@endertopaloglu]

Link'i güncelledim 👍🏻

[@adellol1015]

@@endertopaloglu teşekkür ederim👍👍👍👍

[@muratsen6456]

Ender bey merhaba, burada bir sıkıntı yaşıyorum fakat buradan anlatması biraz zor olacak aynı şeyleri yaparakta denememe rağmen sorun yaşıyorum, rica etsem bu dosya sizde eğer hala duruyorsa buraya atarmısınız farkı anlayabilmem için.

[@endertopaloglu]

Murat Bey merhaba, maalesef dosya durmuyor. Ama yaşadığınız sorunu yazarsanız yardımcı olmaya çalışırım.

[@muratsen6456]

@@endertopaloglu Yani şöyle ilk yaptığım master componentte iconun gözünü açıp kapattığımda sorun yok butonum genişliyor her şey yerli yerinde ama copyasını alıp onuda master componente çevirdiğimde gözü açtığımda kutum genişlemiyor galiba bu sefer anlatabildim :)

[@endertopaloglu]

@@muratsen6456 Bana mail atabilirseniz google meet üzerinden birlikte bakabiliriz

[@muratsen6456]

​@@endertopaloglu Hocam olayı çözdüm ama çok saçma bir şekilde kısa yoldan yapınca sorun oluyor ama bu sefer direk üst bardan componente çevirince hiç bir sorun yaşamıyorum

[@SomaAliIbrahim]

34:56

[@gulsumonat1861]

merhaba ender bey sizin açıklamada koyduğunuz linkteki iconlar ücretli siz videoda ücretsiz olduğunu söylediniz ama biz bulamıyoruz bize yardımcı olursanız çok mutlu oluruz iyi günler iyi çalışmalar :)

[@endertopaloglu]

Merhabalar, link değişmiş değiştirdim. Bilgilendirme için teşekkürler. Buyrun güncel link: www.figma.com/community/file/876509330914541878

[@gulsumonat1861]

@@endertopaloglu biz teşekkür ederiz :)

[@volkan.karatepe]

Hocam Iconly 2 - Essential icons ücretli sanırım =((

[@endertopaloglu]

Evet Volkan, maalesef :) Ama ikon indirebileceğin ücretsiz çok fazla site var. Örneğin bu siteyi inceleyebilirsin www.flaticon.com/

[@volkan.karatepe]

@@endertopaloglu teşekkür ederim