@@grafikaya hi! Could you clarify what you mean? Happy to help if I can!

@@grafikaya do you mean if your card has an aspect ratio, will this component work to help main the aspect ratio?

@@JuanEncalada yeap, sorry to been unclear. For example I have 3:2 and 16:9 aspect ratio product images. I create swap slot component and made it responsive css grid component once i duplicate the grid the aspect ratio of the image crashed.

@@grafikaya ah ok, no worries! Maybe check that the aspect ratios are set to fill horizontal and hug vertical. If you have a link to the file I can also take a look at

@@JuanEncalada i guess i figure it out, thanx 👍👍👍

Thank you!

Hey! Yes that’s definitely something that can be done as well! Let me know if I can help provide any tips on how to best achieve that!

@@JuanEncalada how do you merge the pointer and autolayout text box when they both have a stroke applied?

@@JuanEncalada nvm I got it. Requires seperating the pointer fill from the pointer stroke and creating a group

¡Hola! ¡Probé exportarlo como SVG desde Figma y funcionó bien! Sin embargo, tenga en cuenta que esta es una solución alternativa de Figma porque no tenemos soporte nativo para variables de gradiente. En el código hay una forma más sencilla de lograr esto con rellenos de gradientes lineal, pero si es necesario, puede exportarlo como SVG para usarlo en el código.

Thanks for the support! Will try to get one out sometime!

Hey thanks! Yes it would actually! I’ve tried with all sorts of crazy gradients even radial gradients

What I’ve found is that as the gradients became more complex, using the “plus darker” blend mode was also beneficial

Thanks, Patman!

Thanks, Nahid! Good to see you!

Thank you!

Thanks for the support!

Thanks for the love and support man!

Thanks, Enzo! Always appreciate your support. :)

Thank you for the support!

Hey, thanks so much! It's good to be back and thanks for your support after so long!

When you weren't on KZbin, I created my channel inspired by your videos. Glad to see you back!@@JuanEncalada

Woah no way! I’ll have to check it out. To think my videos inspired you to create your own channel is mind blowing!

Just subscribed. Will definitely be watching all of them!

I really appreciate it 🍻@@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

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 ?

@@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

@@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

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

Thanks for the kind words!

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 :)

@@JuanEncalada Thanks! :)

@@djashawe88923 my pleasure!

Glad to hear that! Thanks for letting me know. :)

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!

​@@JuanEncalada thanks Juan! I tried many ways but nothing works for me. I appreciate if you'll make a little demo 🙇🏼‍♂

@@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

@@JuanEncalada Thank you very much, I duplicated it and I'm sure it will help me with this issue. You are awesome!! 🔝🔝🔝

@@mirkocaccia9388 no worries! Hope it helps!

Thanks for the kind words!

Thanks, I appreciate it!

Hi Abvex, thanks for your question! I drew the tooltip caret this way so I could round the top left and right corners, tapering the radius into the tooltip body. With the triangle shape I wasn’t sure how to do that. If you watch back again you’ll notice that I drew the shape to extend a bit beyond the 3 points of the triangle which allows me to control and achieve a reverse radius. Let me know if this helps!

Also if anyone has tips on how I can achieve the same vector more easily please share with the community in this thread! :)

Thanks for the kind words!

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.

Thanks I’m glad it was helpful!

Thanks! Glad you found it helpful :)

Glad it was helpful! Thank you. :)

Hi BC, that’s good feedback, thank you! I use keyboard shortcuts a lot so there are some things that probably get lost in the process. Also, if you’re using the new Auto layout version that just came out 2 weeks ago the. It will look a bit different than what’s shown in my video which was made last year.

@@JuanEncalada Hi, thanks for the reply. I had trouble following the icon positioning instructions, perhaps because it's unconventional in my mind. But looked interesting. Perhaps even the new absolute position would work for the icon? Your videos are high quality, keep'em coming.

Thanks Sofi! Half it was helpful and you learned a lot!

Thank you!

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.

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

@@JuanEncalada Thanks Juan. I really appreciate that. I'll have a play with this one. Thank you 🙂

@@tobyhallam4750 no worries! Hope it’s a little clearer!

Sorry! Thanks for your patience! Will try to post more soon. I have a few ideas in the works!

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

Tha is Andrew! Glad to hear that. :)