No video

Placeholder Slot Component in Figma

  Рет қаралды 29,320

Juan Encalada

Juan Encalada

Күн бұрын

Utilize the power of slots and Figma's native instance swapping capabilities to customize component content without ever needing to detach component instances ever again.
Check out the community file: www.figma.com/community/file/...

Пікірлер: 81
@yankee-in-london
@yankee-in-london 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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!
@s.hammad
@s.hammad 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Thanks Hammad! I appreciate the excitement. Gets me excited too! :)
@sketchingmastery
@sketchingmastery 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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. :)
@jxcqueline
@jxcqueline 2 жыл бұрын
Your videos are super helpful. Thank you so much! Keep up the good work :)
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Thanks Jacquie! I’m glad you found them helpful. :)
@Amrdys
@Amrdys Жыл бұрын
The amazing and easy to follow presentation made me like and subscribe without hesitation 👍
@JuanEncalada
@JuanEncalada Жыл бұрын
Thanks, I appreciate it!
@user-eo3jz8uj9l
@user-eo3jz8uj9l 2 ай бұрын
Thanks Juan! Great video!
@JuanEncalada
@JuanEncalada 2 ай бұрын
Thank you!
@eugeneto4037
@eugeneto4037 2 жыл бұрын
Amazing!!!! Not only did this video slay, it slot-tered it! What an informational and concise video packed with so many nuggets!!
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Hahaha thanks Eug! I appreciate the enthusiasm and the pun. :)
@paumartinez4081
@paumartinez4081 2 жыл бұрын
Juan, veo que sos un groso! Ya estuve siguiendo algunos de tus tutoriales. Por tu nombre, sospecho que sos latino/español
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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
@thehaguy
@thehaguy Жыл бұрын
Thanks for posting this. Crystl clear instuctions.
@JuanEncalada
@JuanEncalada Жыл бұрын
Thanks for the kind words!
@oZenakos
@oZenakos 2 жыл бұрын
great tut thanks
@gian5008
@gian5008 Жыл бұрын
Awesome!
@jnprdsgn
@jnprdsgn 2 жыл бұрын
Thanks Juan
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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!
@babatundeodeyemi8255
@babatundeodeyemi8255 2 жыл бұрын
Great stuff
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Thank you Babatunde! I appreciate your kind words and support. :)
@SnowyAtiq
@SnowyAtiq 2 жыл бұрын
Just awesome tutorial. 😎 What fonts you've used?
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Hi, thank you! The font is Poppins, you can find it on Goggle Fonts! :)
@djashawe88923
@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
@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
@djashawe88923 Жыл бұрын
@@JuanEncalada Thanks! :)
@JuanEncalada
@JuanEncalada Жыл бұрын
@@djashawe88923 my pleasure!
@ecila89
@ecila89 2 жыл бұрын
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
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Let me know if this was the issue and if not I can try to keep helping out!
@ecila89
@ecila89 2 жыл бұрын
@@JuanEncalada Anywhere I can message you with the link? It's not for the public since it is work related
@JuanEncalada
@JuanEncalada 2 жыл бұрын
@@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
@dupasraka47
@dupasraka47 2 жыл бұрын
The problem is when you need to paste various number of components, once 3 inputs, once 2 inputs and 2 selectors.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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.
@bartdewachter8257
@bartdewachter8257 2 жыл бұрын
Has this technique become obsolete due to the new component properties?
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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.
@ErdisDriza
@ErdisDriza 2 жыл бұрын
why did you stop posting videos? 😥 Please keep it up!
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Sorry! Thanks for your patience! Will try to post more soon. I have a few ideas in the works!
@yankee-in-london
@yankee-in-london 2 жыл бұрын
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-london
@yankee-in-london 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Hi Ken, will definitely check this out tonight and get back to you!
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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
@JuanEncalada
@JuanEncalada 2 жыл бұрын
You should have view access and be able to duplicate the file to your drafts for testing.
@yankee-in-london
@yankee-in-london 2 жыл бұрын
@@JuanEncalada just back from dinner, will try in the morning.
@mrajax_0101
@mrajax_0101 2 жыл бұрын
More Videos?
@JuanEncalada
@JuanEncalada 2 жыл бұрын
Hi Ahmed, soon soon soon!
@mirkocaccia9388
@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
@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
@mirkocaccia9388 Жыл бұрын
​@@JuanEncalada thanks Juan! I tried many ways but nothing works for me. I appreciate if you'll make a little demo 🙇🏼‍♂
@JuanEncalada
@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
@mirkocaccia9388 Жыл бұрын
@@JuanEncalada Thank you very much, I duplicated it and I'm sure it will help me with this issue. You are awesome!! 🔝🔝🔝
@JuanEncalada
@JuanEncalada Жыл бұрын
@@mirkocaccia9388 no worries! Hope it helps!
@rvb6516
@rvb6516 Жыл бұрын
What if you don't have any sample content and you want to put multiple components in ONE SLOT ?
@JuanEncalada
@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
@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
@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
@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: kzfaq.info/get/bejne/i5uni5V9rb-3m3k.html
@rvb6516
@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
@fakenewselon7759
@fakenewselon7759 5 ай бұрын
Is this still relevant?
@JuanEncalada
@JuanEncalada 5 ай бұрын
Yes! All the same great use cases still exist today. :)
@tobyhallam4750
@tobyhallam4750 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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.
@JuanEncalada
@JuanEncalada 2 жыл бұрын
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
@tobyhallam4750
@tobyhallam4750 2 жыл бұрын
@@JuanEncalada Thanks Juan. I really appreciate that. I'll have a play with this one. Thank you 🙂
@JuanEncalada
@JuanEncalada 2 жыл бұрын
@@tobyhallam4750 no worries! Hope it’s a little clearer!
ТЫ С ДРУГОМ В ДЕТСТВЕ😂#shorts
01:00
BATEK_OFFICIAL
Рет қаралды 10 МЛН
小蚂蚁被感动了!火影忍者 #佐助 #家庭
00:54
火影忍者一家
Рет қаралды 51 МЛН
Placeholder Components - Editable components without detaching in Figma
9:26
The Fun of Iterating
Рет қаралды 35 М.
Figma Variable Gradient - Part 1
9:49
Juan Encalada
Рет қаралды 3 М.
Advanced CSS Grid Component in Figma
12:28
Juan Encalada
Рет қаралды 6 М.
Mistakes Designers make with Figma Components
17:46
AM Design
Рет қаралды 58 М.
Naming Things in Figma: My Best Tips & Tricks
27:45
joeyabanks
Рет қаралды 54 М.
How to organize your design file on Figma
9:58
chunbuns
Рет қаралды 226 М.
ТЫ С ДРУГОМ В ДЕТСТВЕ😂#shorts
01:00
BATEK_OFFICIAL
Рет қаралды 10 МЛН