Figma Slot Components | Component Properties step-by-step

Подписаться 7 тыс.

Просмотров 6 тыс.

50% 1

🚨Follow along here - www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Figma Frames & Constraints - • How to use Constraints...
2. Figma Auto Layout - • Figma Auto Layout | Ma...
3. Figma Components - • Figma Components | Mas...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼.
I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #appdesign #ux #uxdesign #figmacomponents #figmavariants #reusabledesign

Хобби

Опубликовано:

11 июн 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@fryonthemoon Месяц назад

I've seen many videos on figma, but this tricky approach is something unique. Never seen that before. Thanks for sharing!

@TDSunshine Месяц назад

Glad you liked it! ☀️🙏🏻

@papapatz 6 месяцев назад

This is the most sstraightforward tutorial I have watched that came from my youtube feed. No additional marketing or long-winded bs. You got my subscribe. Hope you can continue doing more stuff like this!

@TDSunshine 6 месяцев назад

aww thanks! Im glad you found it helpful! ☀️💛

@garimajain5557 17 дней назад

Your tutorials and practice files are of great help! thanks for the content.Can you share more about what are slot components or any article that explains the same?

@TDSunshine 17 дней назад

Thanks! ☀️🙏🏻 Luis Ouriach from Figma made this video not too long ago that shows how to use slots with variables - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XMqUKlFUETc.html

@user-eo3jz8uj9l 13 дней назад

Great tutorial. Thanks a lot for the great content.

@TDSunshine 9 дней назад

My pleasure! ☀️🙏🏼

@julianTrichardson 11 месяцев назад

another banger of a tutorial 🔥

@TDSunshine 11 месяцев назад

Thanks! 🤗

@Elavarasan0348 11 месяцев назад

Lots of love from India 💐

@belowdelancey1025 6 месяцев назад

Ton of helpful content - will need to re-watch a few times to digest it all, but thanks for this!

@TDSunshine 6 месяцев назад

Thanks! Glad it was helpful 🤗☀️

@lawfreed 11 месяцев назад

Great tutorial, Tair! This is so useful; will certainly use this method on my future projects! Much love and keep up the good work :)

@TDSunshine 11 месяцев назад

Glad it was helpful!☀️💕

@lawfreed 11 месяцев назад

@@TDSunshine oh, definitely! the way you teach is so captivating that I immerse myself; just want to be here before the million subs 😁

@cultofcrypto6724 11 месяцев назад

You are easily the best Figma channel on youtube.

@TDSunshine 11 месяцев назад

Thank you! ☀️🙏🏼

@multimediaworld9537 8 месяцев назад

Great tutorial. Can you please share the practice figma file for this video? Again thanks for these wonderful tutorials.

@TDSunshine 8 месяцев назад

Uploaded and linked in the description ☀️💛

@multimediaworld9537 8 месяцев назад

@@TDSunshine Thanks and please check your email. I have shared some interesting ideas for this channel, like starting a discord server for asking questions and connecting folks who are watching your vidoes. Again thanks for sharing the files.

@michaelschultze3595 7 месяцев назад

Thanks a lot. Have already seen many clips about the topic. Even though it's a bit fast talking, I still understood the most here. The only thing that holds me back from the method is that you can not do a re-order inside a instance. What I would like to see is a small diagram to better see which objects and nestings with which attributes are placed where. BTW - at what step did you set the pen icon ;-)

@TDSunshine 7 месяцев назад

Glad it was helpful! haha yeah I know I speed talk sometimes 🙈🏎️ So there is a bit of like a decision to be made here, if you don't have your card in a component then you can re-order the items in the auto layout freely, but then you won't be able to swap the instances from the top level, you would have to select the one you want to swap.

@michaelschultze3595 7 месяцев назад

@@TDSunshine ❤Yes, I know. But I need the component as a whole so that my colleagues have a template for all requirements. Ok, then I'll have to explain that to them 🙈

@michaelschultze3595 7 месяцев назад

@@TDSunshine Thank you so much. I know this, but I thought maybe there was a workaround? What I would like, if I may: An overview (diagram) of which elements should be prepared beforehand and in what way in order to get the best or most flexible result ;-) Is there such a thing?

@MaxWeir 10 месяцев назад

Interesting concept for slots, for my button icon I use a global icon-wrapper which is essentially defines the icon and its size, so I can drop this this into each button size and set its ideal size and default icon. So when I change the button size the icon changes too, plus it can access any icon in the system. Your content is great and have watched a few recent ones on variables which made me rethink how I might approach our buttons when it comes time to convert to the new variables method 👍

@TDSunshine 10 месяцев назад

Great tip with the icon-wrapper! ☀️🙏🏼

@kakanishalemraju9995 11 месяцев назад

you are really sunshine to many around the globe, in your shine of light many will shined in UI/UX greattttttttttttttttttt tutorial indepth knowledge youare giving thank you 🙏🙏🙏

@TDSunshine 11 месяцев назад

Wow, thank you! 🙏🏼☀️☀️

@FelixCruz-xs3sl 3 месяца назад

I don't know if you already have it in your channel, but it would be great to show this, including responsiveness.

@TDSunshine 3 месяца назад

oo nice idea! added to my list 🙏🏻☀️

@eminaisic9988 2 месяца назад

This is a great lesson I am just implementing this in my sections of one project but I have one delicate problem. When I am trying to connect my slot with an icon component, it can not show it. It works fine with title, buttons variants and body but I am having problem with the icons in one slot. They are bigger and they are for updating and app. I tried to put higher gap event redefine autolayout (h-v paddings) also checked the icons within the component to see if there is problem. It seems to me icons are fine but they are not showing in. Does someone knows what maybe be a problem?

@TDSunshine 2 месяца назад

you may have already checked this but check which constraints are set on your icon in their component frame. Maybe they are just staying really big so they are hidden? try to set them to "scale" it may help. Hope that works! 🙏🏻☀️

@teopavlidis 7 месяцев назад

I followed your tutorial to create a horizontal list item with leading, middle, and trailing slots but when I swapped the leading slot to an other component it was not resized, the swapped component appeared in the 0,01px height of the slot instance. Any idea how to solve this? Thanks for the great video anyway...

@TDSunshine 7 месяцев назад

hmm you might need to play around with the resizing settings. My "empty slot" is an autolayout set to a FIXED height of 0.01px. All my "swappable slots" are autolayouts set to HUG height. Also, my card component that has all the "empty slots" in it is set to HUG height and uses 5px spacing/gap. Try to see if that helps! ☀️🤗

@matthewberkompas5315 8 месяцев назад

The flexibility available in Figma just blew my mind! 🤯 Thanks for making this video!

@TDSunshine 8 месяцев назад

I know right?? 🤯🤯

@djashawe88923 8 месяцев назад

Thanks a lot for the great content. This was very interesting. However, I can't think of a real use case scenario for this. It will only come in handy when you know exactly what content to swap, and that's not very common, is it?

@TDSunshine 8 месяцев назад

Thanks! Something like this can be used where you have an element in your design that has some set rules and optionals to it. For example think of a Facebook feed post. It may have text, may have an image , it may have a button (like those donation posts) and these might come in different orders. In a case like the a slot component could be helpful sometimes ☀️🤗

@michaelschultze3595 5 месяцев назад

Too bad I can't use this method. Tried enough. Somehow it doesn't fit. Sometimes the display is not the right size, then I try to insert a "Space" component 24px" into a slot, but it is not displayed at the correct height. Too many things that don't work smoothly and take too much time. But this would be the ultimate solution for many of my to dos ;-)

@TDSunshine 5 месяцев назад

Sorry to hear its not working out for you! slots can be fiddly 🙃 maybe reduplicate the file and try again from scratch. ☀️

@michaelschultze3595 5 месяцев назад

@@TDSunshine Things are better now. I probably wanted too much at once ;-) When I create a new design file, link the UI kit and save my modal, I don't get the preferred components displayed. I always have to navigate there. Is there a special requirement for this? My components are stored in sections. -> Thank you