The use of underscore in the component name to exclude it from being published is a neat trick. Also, at around the 26:00 mark, he gives a valuable suggestion. He recommends maintaining different aspects of the design system in different pages (and this is to be done towards the end and not at the initial phase of building the design system). Then at the 31:19 mark, he shows why its better to keep all aspects of the design system in the same file instead of publishing them as different files. At 36:14, he shows us how to use the spacer components 😁
@fajleyrabbe29304 жыл бұрын
important for me: 5:40 Creating understandable systems 6:40Using nested "structure" components 8:00 Autolayout Buttons 11:00 Instance swapping 12:20 Autolayout for Text with an expanding underline 19:52 Creating a Card Component 27:40 image Constrain, the image component 34:40 Spacing hack in Auto layout 43:00 Auto Layout Spacing 47:10 Using nested Autolayout for a button that can be fixed width 50:45 Tip: Changing images in components and instances by copy/pasting image fills
@martacondedesigner3 жыл бұрын
I don't know how I could live without Figma for so long
@StureLarsson3 жыл бұрын
I definitely feel the same way. Was using XD for a long time. But now I never want to go back.
@newtonheath922 жыл бұрын
There's so much magic in this video I will have to rewatch it for like 10 more times. Great stuff!
@fafaaye4 жыл бұрын
Thanks Figma, your tutorials give me a bunch of epiphany about how Atomic Design works :")
@writtenbyhumans3 жыл бұрын
Thank you for your tutorials, and walk through. You are easy to follow, professional and fun.
@AdityaPatelProductions4 жыл бұрын
Holy crap. Spacers + auto layout is next level. Time to redo my designs
@zukhriddinmakhmudov37934 жыл бұрын
Love Figma, always respect the app and all people who put hard work on it.
@starboy38024 жыл бұрын
Good one! I like timestamps and timeline markers, it's well organised.
@AnshMehraa4 жыл бұрын
This is so so high quality content. I am so grateful to your channel
@cyberspaceturbobass3 жыл бұрын
Honestly an incredible video, and obviously the trainer is a very nice person, but it was too all over the place and disorganised. I wish this was broken down more and structured, rather than just jumping from one point to another.
@rpuig39743 жыл бұрын
dude youre the berst , i am also coder and designer, and i feel i cant let one go for the other!
@ladyj34742 жыл бұрын
Thank you for this wealth of info and your inspiration. Great work and presentation.
@platformoftrust11092 жыл бұрын
I was trying to card example to experiment with auto layout. However, in the Figma file, I can't unfortunately select individual objects within the frame and change their layout with the frame (as described from 20:12). I tried with both the option (SHIFT + A)and clicking '+' on the auto layout option on the right-side pane, nothing happened. What I am missing here?
@starvemarve55302 жыл бұрын
Same. It seems Figma in 2022 no longer works like this.
@carilowenthal91303 жыл бұрын
Hi there! It seems as the instance option on the panel has changed since this tutorial. where would I find it on the new updated version? Thank you!
@mathtutor7953 жыл бұрын
You are Godsend!
@funwalkingclub97463 жыл бұрын
I have no idea how nested components work. It's incredible and powerful but wow. It's super easy and amazing. Can you please do a special video just for that.
@zaxmay3 жыл бұрын
hi, i loved the smart tooltip recipy, but it doesnt work when i want a tooltip with a stroke... pls advice
@TheVineetpandey2 жыл бұрын
When I autolayout things don't work and everything falls apart like text comes parallel with button when I apply autolayout and if I try to change nothing happens. and that vertical and horizontal layout set scheme is unavailable in the current version of FIgma , Maybe there is some other way ?
@daisya29504 жыл бұрын
thnks, i was waiting for this video
@givvaz2 жыл бұрын
great. thanks
@yeonjung-figma4 жыл бұрын
So Useful!! Thank you !!
@mohammedomran54913 жыл бұрын
How I can set the space between 2 Layers inside auto layout frame independently?
@watersideworkshop28752 жыл бұрын
In creating a button using auto layout, there is the option in this video to stretch contents so that the button is responsive to the text inside. This option is no longer in the settings panel for auto layout since figma has been updated. I am having trouble finding resources with up to date information as to how to do this the correct way. Is there an updated resource available that anyone is aware of from 2022 and not 2020 that shows how to achieve this same responsiveness as the "stretch" setting? Thanks
@stevenmartinez39552 жыл бұрын
Just figured it out. The "stretch" settings still exist but it has been re-label. The options are now below the "X Y W H" coordinates and are labeld "Hug, Fix Width, Fill Container". If you select an object (like a border-line in the video) and change the setting to "Fill Container" it will "Stretch" as demonstrated. Took me a minute to figure out. Updates smh.
@siqalondlovu4943 Жыл бұрын
@@stevenmartinez3955 You are a life savior!
@MarkBuckland2 жыл бұрын
Love the tool tip..!
@siqalondlovu4943 Жыл бұрын
I'm having trouble creating the left and right beaks, they wont line at the tip of the tooltip like the top and bottom beaks. Can u help, please?
@gabrielatorresmontesinos5884 Жыл бұрын
Rogie is the best!
@kylevandeusen2 жыл бұрын
Man, all that "boring" stuff you skipped is what I'd really like to see 🤣
@siqalondlovu4943 Жыл бұрын
Trying to create that left and right beak is kicking my ass whew!
@cryptomane1 Жыл бұрын
strange, couldn't recreate beak in new version
@richardchang48292 жыл бұрын
Can I play an animation made with this on the Figma prototype?
@Bromoteknada4 жыл бұрын
-We are Figma -What's Figma? -Fig ma balls
@ofomastanley53223 жыл бұрын
Hello @rogie I've been watching your figma sections on building a design system and I'm a little bit confused. Hope you get to help me out here pleaseFolded hands 1) Must one build every necessary components before starting a design or you build as you design? 2) you did something with the textfield that I don't really understand. There was no frame around your Text field structure but in the component instance, there was a frame. How did you get to do that? 3) Your figma interface on the property panel looks different from mine. I assume it because you are on MacBook (IOS) while I am on windows???
@valeriashults73053 жыл бұрын
Hi! I've just faces the same problem while sitting with WTF face for all night. But now I find a key. In 3 months after this tutorial Figma introduced Variant. So, this tutorial is not actual anymore. Just google what is Variants and I hope that will help. Good luck!)
@KapitanKlaps3 жыл бұрын
The whole component workflow and auto-layout are extremely cumbersome compared to Adobe XD. Figma really needs to catch up in this regard. Biggest issues: - Can't have different spacings between elements of auto layout without creating more auto layout frames. In XD you just click and drag. No need to create tons of frames within frames. - Can't resize shapes in instances. Your slider example was showing best what's wrong with the system. In XD it takes literally 10 seconds to create a dynamic slider that works perfectly with instances and main component in XD I dig the robust features of Figma, but most of the time I find myself fighting with the logic of the app and spend too much time trying to create systems within the file just to make things usable for whoever will operate the file, rather than designing the actual experience for the end user.
@mariaurk11919 ай бұрын
"I like this button because I made it, It's like my son" =)))))