Build it in Figma: Create a Design System - Components continued

[@ajaym6795]

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 😁

[@fajleyrabbe2930]

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

[@martacondedesigner]

I don't know how I could live without Figma for so long

[@StureLarsson]

I definitely feel the same way. Was using XD for a long time. But now I never want to go back.

[@newtonheath92]

There's so much magic in this video I will have to rewatch it for like 10 more times. Great stuff!

[@fafaaye]

Thanks Figma, your tutorials give me a bunch of epiphany about how Atomic Design works :")

[@writtenbyhumans]

Thank you for your tutorials, and walk through. You are easy to follow, professional and fun.

[@AdityaPatelProductions]

Holy crap. Spacers + auto layout is next level. Time to redo my designs

[@zukhriddinmakhmudov3793]

Love Figma, always respect the app and all people who put hard work on it.

[@starboy3802]

Good one! I like timestamps and timeline markers, it's well organised.

[@AnshMehraa]

This is so so high quality content. I am so grateful to your channel

[@cyberspaceturbobass]

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.

[@rpuig3974]

dude youre the berst , i am also coder and designer, and i feel i cant let one go for the other!

[@ladyj3474]

Thank you for this wealth of info and your inspiration. Great work and presentation.

[@platformoftrust1109]

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?

[@starvemarve5530]

Same. It seems Figma in 2022 no longer works like this.

[@carilowenthal9130]

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!

[@mathtutor795]

You are Godsend!

[@funwalkingclub9746]

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.

[@zaxmay]

hi, i loved the smart tooltip recipy, but it doesnt work when i want a tooltip with a stroke... pls advice

[@TheVineetpandey]

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 ?

[@daisya2950]

thnks, i was waiting for this video

[@givvaz]

great. thanks

[@yeonjung-figma]

So Useful!! Thank you !!

[@mohammedomran5491]

How I can set the space between 2 Layers inside auto layout frame independently?

[@watersideworkshop2875]

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

[@stevenmartinez3955]

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!

[@MarkBuckland]

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!

[@kylevandeusen]

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

[@richardchang4829]

Can I play an animation made with this on the Figma prototype?

[@Bromoteknada]

-We are Figma -What's Figma? -Fig ma balls

[@ofomastanley5322]

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

[@valeriashults7305]

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

[@KapitanKlaps]

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.

[@mariaurk1191]

"I like this button because I made it, It's like my son" =)))))