Build Figma Layouts FAST | Build a Design System Part 7!

[@euginrobinson]

Finally, today I've finished executing all of these components with you..... what an incredible journey! I am immensely thankful to you for putting together these micro-level instructions on how to build a design system and build out UI components out it. I've shared your YT channel to all my designer friends, posted on my FB page and planning to put them out as stories on Inta as well in the coming days. Thanks so much again Kirk.... So many of us are benefitted from your tutorials.

[@UICollectiveDesign]

Thanks so much, I’m glad it’s been helpful! Really appreciate all the support!!

[@euginrobinson]

@@UICollectiveDesign It indeed has been very helpful for designers like me. Even my daughter has been at it, learning from your videos.... thats incredible!!!!! Thanks again.

[@agcreative425]

THANK YOU SO MUCH KIRK!! You have helped more than you know. Looking forward to PART 8 and BEYOND!!

[@UICollectiveDesign]

Appreciate you watching! Please subscribe and share where you can :)

[@mzosama]

I see more and more new YT channels are providing more value than the larger channels. Excellent video.

[@UICollectiveDesign]

Thanks so much! Please share this video where you can :)

[@hannahnguyen5428]

I watch all of your new updates

[@UICollectiveDesign]

Thanks for the support!!

[@euginrobinson]

Pure genius..... 💜

[@UICollectiveDesign]

Thanks!!

[@ainaopeyemi339]

Your number one fan is here again

[@UICollectiveDesign]

Hahaha thank you!!

[@bharatht2514]

This system is genius, i'm going to have a hard time learning to be this good but it seems worth it 😣😣

[@UICollectiveDesign]

It's a great system!!

[@okbudda]

most valuable figma advice ever!

[@UICollectiveDesign]

Thanks!! Please share this video where you can!!

[@hellsbell365]

Kirk will you please move your image to the other place, it is blocking the elements you have selected in the file explorer. Made up to part 7 yay!!

[@UICollectiveDesign]

Can definitley do in the future

[@hellsbell365]

@@UICollectiveDesign Thanks

[@UICollectiveDesign]

@@hellsbell365 of course!

[@somaiamahmoud4420]

Thanks for the simplification of the slots components. Is there a way to combine columns and rows into one instance?

[@UICollectiveDesign]

Depends on your use-case but definitley!

[@cristinacasanas8247]

Amazing !!!!

[@UICollectiveDesign]

Thanks!! Please share this video where you can :)

[@klokkerholm1993]

Nice could be nice to see within webdesign and how u smart can reorder slots in components

[@UICollectiveDesign]

Will add it to my list :)

[@klokkerholm1993]

Yeah i just set-up for my self very cool technquie i just wonder if u can somehow "reorder" slots so the order is differnt example a. image- text - button b. text - button - image I mean that u can reorder the slots in a slot to quickly make more unique an flexisble layout. ?? Do u know if this is possible??

[@UICollectiveDesign]

You just change the components inside each slot. No real way to re-order them otherwise

[@CheerUp2]

I would highly recommend moving or making your profile video smaller. I know you were like "haha sorry im covering the layers". But because of that I was running into issues. I had some questions on what specific layers were being clicked and wanted to compare them to mine to make sure everything was properly done. But since I couldnt see them, something went wrong :(

[@UICollectiveDesign]

Thanks for the feedback!!

[@MartinEriksson-q5f]

Thanks for sharing! I was wondering if you could answer: When i have used a row or column slot and made a component out of it. Is it no longer possible to reach the instance properties from the "sub components" used within it? For example if i now add a button to a slot, then i can't change the properties for that button by clicking once on a component containing it. I can however change its properties if i double click or tripple click down the nesting to the button slot.

[@MartinEriksson-q5f]

I was also wondering about scenarios where you may want an image to extend to the card edges while you at the same time want the other slot contents to have padding from the edges. Should you then add for example a row with a single slot (1) used for the image, then add another separate row slot with for example 3 slots for the other content? Then frame/auto-layout them and add individual paddings per "row" component within that frame? Basically should/could you combine multiple row/column slots separately within for example a card component?

[@MartinEriksson-q5f]

When i add an image to a slot from that fixed aspect collection, it shows fine with the initial image that is shown (eg. 1:1) and scales correctly but if i click on that image and change property to another aspect like 3:2 then the height of the image gets wrong (it changes to the default slot components height). Am i missing something here? The slot itself has "hug" on height like your video and they work fine for all other contents but with the image it seems to fail for some reason. I also noticed that if i have the image as 1:1 in the component and make an instance of it and try to change the image aspect ratio in the instance, it changes the image but the size of the image remains at 1:1, regardless of selected aspect ratio.

[@BenjaminNabet-c7o]

It doesn't work when you want to use an element which have a fixed height (not huge contents). If the element have a smaller height than the slot so the element height fit to the slot height :(