Office hours: Complex component architecture

[@AnshMehraa]

This was so refreshing. I suddenly got super excited after a long time after seeing the way you've played with Auto Layouts

[@gideondariel733]

a tip : you can watch series on kaldrostream. I've been using it for watching a lot of movies lately.

[@kylerjakob5567]

@Gideon Dariel yup, been using KaldroStream for since november myself :)

[@spencerlucian4843]

@Gideon Dariel Yea, have been using KaldroStream for since november myself =)

[@shaharbenari6744]

It was "wow". Before 2 weeks i started to learn this software and every time i watch your tutorials it feel more like big event then a class. Very helpful inspiring and enjoyable. Thank you very match

[@rafalpotasz]

Totally agree so far! I learn so many things that help so much from these videos 😌

[@yankee-in-london]

the power of "slots" is FANTASTIC ... this really takes composability to the next level

[@ChristianBaptiste]

These sessions are so helpful, thank you. One thing I would suggest, if you have to have to create both a light mode and a dark mode it is totally worth it to get the Themer plugin. With the Themer plugin you can convert all your assets from either light mode to dark mode with two simple clicks. It is truly magical and it has saved me a ton of time since I now only have to create and maintain one component set. It has literally cut our component work in half. To get Themer to work all you have to do is create a set of LM and DM colo styles and shadow styles.

[@sagessedantan]

How did I not know about that layout grid trick?!? I'm flabergasted 🤯

[@franksonjohnson]

Woah Layout Grids 20:01. Really want to wrap my head around this.

[@Puleczech]

I fail to see why he did not do it using Autolayout with Fill Container horizontal option on? But perhaps it wasn't possible back then?

[@kikeardila1441]

Waaoo !! it's insane! it'll help me to organize a design system that i'm building right now thank you!

[@ShoaibMahmudOfficial]

Hey, would you please share this figma file with the community? Will be helpful

[@ethosphane]

Great demo! Will you all be sharing the file like you typically do for these presentations?

[@akashchoudhary5736]

Yes, but now with auto layout updates we don't need few of the tricks Joey showed

[@jyotishclub5537]

I would have liked it more than once if I could! Thank you so much for sharing

[@mohamedminhajsa7087]

4:05 The problem with using an instance for a new master component is text won't get changed when it's used somewhere else. You've to break the instance and again master it. Otherwise, it won't work.

[@inspectaeclectic1706]

In my experience, you can change text in the instances without detaching from the component. If you then switch the instance to a different variant based on the same master component, you keep the custom text but all the other properties change to those of the variant you choose

[@inspectaeclectic1706]

And if you change the text (content) in the master, it will change in all instances where the text hasn't been edited. So, not seeing your problem

[@gabrielabrunschweiler7782]

haha I love watching you guys do your magic, thanks!

[@nirjagauchan]

Your videos are always extremely helpful and informational. Our team loves working in Figma! ... :) Thanks for sharing these cool tricks. Could you please share this file here in this video description! That would be extremely helpful... Thanks!

[@aliaksandrasaywell3826]

Hi @Figma! Thanks for posting this video. I am interested to learn more about Using layout grids with constraints on components (time tag 15:30​). Can you please elaborate on this in more details? Thanks!

[@jacklovett-earles767]

layout grids! Amazing

[@underscoreroa]

Seems like you can ignore layout grids the way Banks is teaching them bc Figma as of Oct. 2023 now allows for the same capabilities with enhanced auto layout

[@elecm88]

where is the link of "complex components" file? thxs

[@alexisfy]

So this is Before Variants and before auto layout update... I think this didn't age well... this last 2 months. Crazy how fast you are working.

[@alexisfy]

@Gabriel Leni and I wrote that a Year ago. Imagine.

[@windmaomao]

I was wondering about the same thing. For some reason, I like the old way doing things from this video than the Variant. To me, variant may be a bit more rigid whereas in this video, you can do whatever structure you want to as long as you are using a frame.

[@alexisfy]

@@windmaomao oh man, and you haven't seen properties, this year update leaves this one on the floor. But this one is very complex. Even more than this video.

[@developerdon6419]

7:50 On windows ,use alt key+ drag to replace component

[@marzbitenhaussen]

excellent sessions

[@fernwehtwl]

im confused with the layout grids.. why isn't he doing autolayout and filling/hugging the contents?

[@fajleyrabbe2930]

35:00 Preview component behavior by modifying instances 57:15 Prototyping main navigation components mode for faster prototypes

[@attilabodi1216]

Good stuff, very helpful. I just wish figma was more intuitive for designs -- so we can make things the correct way. Most designs I see are built w groups nested in groups because frames and auto layout are so busted everyone i know stays away from them. It shouldn't be this complicated to make card.

[@robinlouis9162]

Thank you !

[@Produkthelt]

Any best practices to create "Focus styles" ? @figma - Lately at our team we have been using shadows to create an outer ring for focus states.

[@rogieking8773]

Have you tried creating a component and maybe using a negative shadow spread with no blur?

[@Produkthelt]

I did ✌🏻 I was wondering whether you think this is the best most flexible way to achieve this or If there is any better solution.

[@rogieking8773]

@@Produkthelt Until we have states or something like this in Figma, I think this is a good solution! Happy designing, Marian!

[@SophieCheung]

hello! thank you for this helpful video. Where can i find access to this file?

[@tallneilio]

great vid, didn't know constraints were tied to layout grids

[@djiusmkwok6797]

Great! how can I get this Figma file?

[@Produkthelt]

@figma team any chance you could share the file again?

[@richardearney2524]

@@Produkthelt Looks like it is in the Community www.figma.com/file/dVRZjGLXrOeloESS113zvG/Interface-Input-Kit-(Community)?node-id=0%3A1

[@HeroNinja]

Thanks ✨

[@BrialMusic]

Quick one related to the layout grids. I used to do these layouts in auto layout rather than fixing items on columns. Is that a better or worse practice?

[@tiktaktictac]

Yeah I was wondering too, since I see no difference in flexibility when doing either approach.

[@alexlimadsgn]

Awasome!

[@JoeGelman]

When does it make sense to use Layout Grids vs. AutoLayout?

[@ExMuslimRev11]

Would be great if I could fetch the exercise file.

[@XiaodanGuo]

Great content, could you show how to create slot component

[@Stella-iq2ru]

great video! can i have the files by any chance?

[@mycampusroots]

Great

[@michaelmoncur7678]

Doesn’t this serve the same function as variants?

[@xTheBlackCatxd]

Yeah basically variants. But I don't think variants were released at the time of the upload

[@tayyabsohail8823]

kindly share this figma file 😀

[@only_sami]

👍🏻

[@edetmmekut809]

first

[@jasonacurry]

Second! :-)

[@epicvillain8308]

These are called variants now lol