Powerful feature and I did know it existed but your video was the best presentation of it I've seen and really helped me make it more concrete. Thanks.
@JuanEncalada2 жыл бұрын
Hi Ken! Thanks for the kind words! That means a lot since I’ve seen some great videos out there regarding slot components. Best wishes!
@sketchingmastery3 жыл бұрын
Great stuff, I think you should consider making an advanced Figma course. I know how most things work but not to the points of building it so responsively as you did. If you do make it happen I am definitely joining. Subscribed to see more like this.
@JuanEncalada3 жыл бұрын
Wow thanks Ilan! That really means a lot. It’s definitely something I’m interested in so stay tuned. Thanks for subscribing in the meantime. :)
@eugeneto40373 жыл бұрын
Amazing!!!! Not only did this video slay, it slot-tered it! What an informational and concise video packed with so many nuggets!!
@JuanEncalada3 жыл бұрын
Hahaha thanks Eug! I appreciate the enthusiasm and the pun. :)
@s.hammad3 жыл бұрын
Awesome mate! Looking for some advanced Figma stuff and stumbled upon your channel and saw this video. Pure gold, keep more coming like these! subscribed.
@JuanEncalada3 жыл бұрын
Thanks Hammad! I appreciate the excitement. Gets me excited too! :)
@thehaguy Жыл бұрын
Thanks for posting this. Crystl clear instuctions.
@JuanEncalada Жыл бұрын
Thanks for the kind words!
@Amrdys Жыл бұрын
The amazing and easy to follow presentation made me like and subscribe without hesitation 👍
@JuanEncalada Жыл бұрын
Thanks, I appreciate it!
@user-eo3jz8uj9l4 ай бұрын
Thanks Juan! Great video!
@JuanEncalada4 ай бұрын
Thank you!
@jxcqueline2 жыл бұрын
Your videos are super helpful. Thank you so much! Keep up the good work :)
@JuanEncalada2 жыл бұрын
Thanks Jacquie! I’m glad you found them helpful. :)
@paumartinez40812 жыл бұрын
Juan, veo que sos un groso! Ya estuve siguiendo algunos de tus tutoriales. Por tu nombre, sospecho que sos latino/español
@JuanEncalada2 жыл бұрын
Hola Pau! Gracias por las lindas palabras. Lo pensaré! Siento que mi español no es muy bien pero a lo mejor con ayudita será posible! Jaja
@oZenakos2 жыл бұрын
great tut thanks
@gian5008 Жыл бұрын
Awesome!
@babatundeodeyemi82553 жыл бұрын
Great stuff
@JuanEncalada3 жыл бұрын
Thank you Babatunde! I appreciate your kind words and support. :)
@djashawe88923 Жыл бұрын
Hi, Thanks a lot for this great tutorial. I subscribed to your channel and liked the video. Is there an advantage of doing it this way over just creating a component straightight with a real content?
@JuanEncalada Жыл бұрын
Hello! The advantage of this is that it allows you to keep your design system components general but flexible so that your users can use the main component without detaching :)
@djashawe88923 Жыл бұрын
@@JuanEncalada Thanks! :)
@JuanEncalada Жыл бұрын
@@djashawe88923 my pleasure!
@jnprdsgn3 жыл бұрын
Thanks Juan
@JuanEncalada3 жыл бұрын
Of course! Glad you were able to find the video! You helped me prioritize it since I know you were asking for it. Thanks for your support!
@dupasraka472 жыл бұрын
The problem is when you need to paste various number of components, once 3 inputs, once 2 inputs and 2 selectors.
@JuanEncalada2 жыл бұрын
Hi Falo, for these instances I normally don’t swap the slot component out with a single button, input, or other “design system” component. Instead I swap the slot out with a “Figma component” that contains all of the contents I need. So in this content component I can have any number of inputs, or other components I need.
@SnowyAtiq2 жыл бұрын
Just awesome tutorial. 😎 What fonts you've used?
@JuanEncalada2 жыл бұрын
Hi, thank you! The font is Poppins, you can find it on Goggle Fonts! :)
@ErdisDriza2 жыл бұрын
why did you stop posting videos? 😥 Please keep it up!
@JuanEncalada2 жыл бұрын
Sorry! Thanks for your patience! Will try to post more soon. I have a few ideas in the works!
@bartdewachter82572 жыл бұрын
Has this technique become obsolete due to the new component properties?
@JuanEncalada2 жыл бұрын
Hi Bart, not exactly. The new features actually enhance the slot technique because rather than hiding the a lot manually you could create a Boolean property, and instead of cmd or double clicking into the slot component you could set up an Instance swap property for the slot to allow you to swap at the top level of the component. Both of these examples would depend on where you have your slot if in a nested component instance you wouldn’t be able to set up these properties at the top level of your final component.
@mirkocaccia9388 Жыл бұрын
Thanks a lot, great video. If it can help you, this is my feedback: what about the content size constraints? This is an important aspect of the matter. I see you use only contents with hug constraints, but often they need fixed constraints. If I use fixed contents into this slot they are resized and this is not good. Try to use the avatar into the slot and you can see what I mean. How to fix that?
@JuanEncalada Жыл бұрын
Hi Mirko, you can fix this with Auto layout! Let’s say you need something to be 64px, and another time to be 320px, the slot content you swap in should have an Auto layout resizing property of hug contents in order to be able to accommodate any size! I’ll try to make a little demo for you!
@mirkocaccia9388 Жыл бұрын
@@JuanEncalada thanks Juan! I tried many ways but nothing works for me. I appreciate if you'll make a little demo 🙇🏼♂
@JuanEncalada Жыл бұрын
@@mirkocaccia9388 Hi Mirko! Here's the link: www.figma.com/file/j0AJTMPmimXssp3bhjioON/Fixed-width-Slot-Content?node-id=1737%3A414&t=IzUYM3bxxMTbpFqH-1 Feel free to duplicate to your drafts. Check out the demo page
@mirkocaccia9388 Жыл бұрын
@@JuanEncalada Thank you very much, I duplicated it and I'm sure it will help me with this issue. You are awesome!! 🔝🔝🔝
@JuanEncalada Жыл бұрын
@@mirkocaccia9388 no worries! Hope it helps!
@ecila892 жыл бұрын
Hi, great video! It helped me a lot, but there is one thing I'm struggling with: I've used your method with slot components for an interactive create wizard with multiple steps. Created a variant for each of the steps and added a slot component in each step named "Step 1 content", "Step 2 content" and so on. Every slot component for each step is a master. It works when I go through the finished wizard in the designer (with the variant dropdown), but in the prototype it just resets the override content on every step except the first one. Do you think it's a bug in the interactive components feature not including overrides in the prototype? Or am I doing something wrong? :D
@JuanEncalada2 жыл бұрын
Hi Alice! Glad this was helpful! Would you be able to share a link where I can take a look at this and offer better support? I believe it may be an issue with having a master component inside of other components. I don’t think that functionality is intended or supported.
@JuanEncalada2 жыл бұрын
Let me know if this was the issue and if not I can try to keep helping out!
@ecila892 жыл бұрын
@@JuanEncalada Anywhere I can message you with the link? It's not for the public since it is work related
@JuanEncalada2 жыл бұрын
@@ecila89 hi Alice, feel free to join my Slack workspace. I set it up to offer support to the community join.slack.com/t/juan-design/shared_invite/zt-wz9991hw-oMNMnIB7QQeolcRNJ1ythg
@mrajax_01012 жыл бұрын
More Videos?
@JuanEncalada2 жыл бұрын
Hi Ahmed, soon soon soon!
@yankee-in-london2 жыл бұрын
Juan, I'm running into an issue where my accordion items can be set to an initial state of "open" or "closed" and when I'm in design mode I can toggle between these two states just fine. However, if I move to interactive mode and have the initial state set to "closed" ... when I open it all I get is the "default slot" and not the slot content I've injected. Any idea how this could happen?
@yankee-in-london2 жыл бұрын
One thing i've swtiched between is whether to have the accordion body just "hidden" when it's closed or actually removed. When I hide it the accordion didn't shrink back down to size so I thought I had it working when I just removed it from the close state. However, then I get the above effect. Really feels like a bug.
@JuanEncalada2 жыл бұрын
Hi Ken, will definitely check this out tonight and get back to you!
@JuanEncalada2 жыл бұрын
Hi @@yankee-in-london, here’s a sample file where I have this working. Please let me know if this works for you! www.figma.com/file/ZuUgASHwqXPuDItWwppGYG/Accordion-Demo?node-id=0%3A1
@JuanEncalada2 жыл бұрын
You should have view access and be able to duplicate the file to your drafts for testing.
@yankee-in-london2 жыл бұрын
@@JuanEncalada just back from dinner, will try in the morning.
@tobyhallam47502 жыл бұрын
Thanks. You explain things very well,... but as some friendly feedback (and I do mean friendly), you made this demonstration quite difficult to grasp because the example you used was so complex. Ive watched this a couple of times and Im still not quite there. It would be better to use a more basic example so that you can concentrate on explaining the concept of Placeholders. Thanks anyway.
@JuanEncalada2 жыл бұрын
Hi Toby! Thanks for that feedback! I’ll take it into consideration. Do you need any help in grasping the concept fully? If you’d like I can setup a simple demo and send you the link.
@JuanEncalada2 жыл бұрын
You can try this link. There's 2 button components. The first uses icons. You can use the instance swapper to swap between icons. The second uses slots. You can use the instance swapper to swap the slot with an icon. www.figma.com/file/Zg4xkjCH5brLtQ24I3L5WD/Slot-demo?node-id=0%3A1
@tobyhallam47502 жыл бұрын
@@JuanEncalada Thanks Juan. I really appreciate that. I'll have a play with this one. Thank you 🙂
@JuanEncalada2 жыл бұрын
@@tobyhallam4750 no worries! Hope it’s a little clearer!
@rvb6516 Жыл бұрын
What if you don't have any sample content and you want to put multiple components in ONE SLOT ?
@JuanEncalada Жыл бұрын
Hi, great question! Your sample content can be anything you want. There can be several components in it. So basically think of the slot as an opportunity to swap in anything you want. If you want 10 text inputs, don’t swap a single text input for the slot, instead, group those text inputs with anything else you want, componentize it, then swap that with the slot
@rvb6516 Жыл бұрын
Okay thing is I don’t want to make a component out of something that I will only use once, can’t I juste drop a frame ?
@JuanEncalada Жыл бұрын
@@rvb6516 I see. In that case what I have done is swap the slot for a utility component I like to call “Component group” or you could call it Slot group. For mine it’s basically 10 slots which gives you more flexibility
@JuanEncalada Жыл бұрын
@@rvb6516 this video of mine here actually covers the component group I’m referring to if you want to give it a watch. Time stamp around the 26 minute mark: kzbin.info/www/bejne/i2baiWWCfb6Goac
@rvb6516 Жыл бұрын
Okay I see thanks, the problem I’ll still have is if I want to add for example in a slot two buttons in a row I will not be able to
@fakenewselon77596 ай бұрын
Is this still relevant?
@JuanEncalada6 ай бұрын
Yes! All the same great use cases still exist today. :)