Figma Slot Components | Component Properties step-by-step
Вставка
- Опубліковано 25 гру 2024
- 🚨Follow along here - www.figma.com/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.co...
💛 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
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!
aww thanks! Im glad you found it helpful! ☀️💛
After watching many other videos explaining Slots, your way to teach this is superior. Seriously, you're always the best.
Thanks! Your comments are always the best ☀️🙏🏻💛
Hello from Ohio! I spent the whole day taking this a step further and I'm so excited to get it working I thought i'd share since you've been so helpful to me! I'm just a developer, LOL! I wanted to allow the designer to choose how many slots - it's a page with x number of accordions with various content types. This was a bit of work but it's so flexible! I created a slot component, just the 1px frame with a swap property, then 12 components, Slots 1 through 12 and put that number of "slot" instances in them. Then a swap property "Slots" defaulted to Slots-1 with preferences set for the others. This is in my Accordion component, so they can first select that they want Slots-6 (for example), then put what they want in them. I started out having all 12 and then having to hide the unused ones, this is better. I couldn't have done this without you!! Thank you!
Wow this is amazing!! and you are not _just_ a developer, you are *a* developer! haha having dev thinking skills in a design world is super useful! ☀️🙏🏻💛
Thank you! A lot of designers don’t feel that way. At work they don’t have things broken down into components just frames and frames of flat designs (as if they are just pages). I hope to convince them of a better way and you have helped me so much! Thanks again!
I've seen many videos on figma, but this tricky approach is something unique. Never seen that before. Thanks for sharing!
Glad you liked it! ☀️🙏🏻
Very well explained! I was struggling with this for a while. Thank you so much 👏👏
You're welcome! ☀️🙏🏻💛
Ton of helpful content - will need to re-watch a few times to digest it all, but thanks for this!
Thanks! Glad it was helpful 🤗☀️
You are easily the best Figma channel on youtube.
Thank you! ☀️🙏🏼
This was soooooo helpful!
Glad you think so! ☀️🙏🏻💛
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 🙏🙏🙏
Wow, thank you! 🙏🏼☀️☀️
Great tutorial, Tair!
This is so useful; will certainly use this method on my future projects!
Much love and keep up the good work :)
Glad it was helpful!☀️💕
@@TDSunshine oh, definitely! the way you teach is so captivating that I immerse myself; just want to be here before the million subs 😁
Lots of love from India 💐
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 ;-)
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.
@@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 🙈
@@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?
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?
Thanks! ☀️🙏🏻 Luis Ouriach from Figma made this video not too long ago that shows how to use slots with variables - ua-cam.com/video/XMqUKlFUETc/v-deo.html
Great tutorial. Can you please share the practice figma file for this video? Again thanks for these wonderful tutorials.
Uploaded and linked in the description ☀️💛
@@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.
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 👍
Great tip with the icon-wrapper! ☀️🙏🏼
another banger of a tutorial 🔥
Thanks! 🤗
Great tutorial. Thanks a lot for the great content.
My pleasure! ☀️🙏🏼
The flexibility available in Figma just blew my mind! 🤯 Thanks for making this video!
I know right?? 🤯🤯
is the only way to use slots via instance swaps? what if I want to insert just some random content, not a component? I know I can always turn it into component, but that kinda sucks.
I think the idea behind the slot method is to use it when there are set options so you want to avoid random additions and have really set rules on what can be added in. ☀️🙏🏻💛
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?
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! 🙏🏻☀️
Thanks so much for this!
You're welcome! ☀️🙏🏻💛
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...
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!
☀️🤗
@@TDSunshine My hug contents option does not show up for my other components :/
The component used as an instance need to be wrapped in an auto layout.
I don't know if you already have it in your channel, but it would be great to show this, including responsiveness.
oo nice idea! added to my list 🙏🏻☀️
Command+R doesn't pull up that UI for me, it just lets me rename one layer in my layers panel, even when I have all selected. How do I troubleshoot this?
Are you on a browser? sometimes CMD + R just refreshes the browser in this case. Make sure you are selecting multiple elements as well. Hope this helps! ☀️🙏🏻💛
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?
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
☀️🤗
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 ;-)
Sorry to hear its not working out for you! slots can be fiddly 🙃 maybe reduplicate the file and try again from scratch. ☀️
@@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