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 😁
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
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.
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.
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?
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
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.
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 ?
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???
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!)
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.
