Office hours: Complex component architecture
HTML-код
- Опубликовано: 12 июл 2024
- Diving into complex components, Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms and more.
0:00 Intro
0:30 Using a base "Structure" component
1:45 Using frame names for component categorization
4:00 Swapping component instances
5:30 Goto main component from an instance
8:00 Maintaining text overrides in a component instance swap
9:00 Tip: Cmd/Ctrl + "." to hide Figma UI
10:30 Naming with "/" to further categorize your components
15:30 Using layout grids with constraints on components
20:00 Saving grids to styles
22:45 Layout grids used only on frames
25:00 Using constraints within frames
27:00 Locking layers in components to make them easier to edit
28:00 Overriding component instance properties
31:00 Creating dynamic progress bar components
33:00 Using constraints within Boolean operations
35:00 Preview component behavior by modifying instances
37:30 Mac OS UI Kit (approaches to setting up a UI Kit)
39:00 Component architecture for the Mac OS UI Kit
40:00 Basing a component off of another component
40:30 Complex component swaps and theming
43:00 Demo of creating a Mac OS window
44:00 Testing out component flexibility
45:00 Tip: Cmd/Ctrl + Y to show outline mode
50:00 Using "slot" instances to swap in dynamic content into component instances
52:00 Autolayout components allow dynamic dimension components
53:00 Autolayout Tooltip components
55:00 Preserving colors in icon swaps using masks
57:15 Prototyping main navigation components mode for faster prototypes
1:00:30 Using notes in version history to document changes
1:01:30 Using Autolayout vs. Layout grids
1:02:30 Using Autolayout to tidy up your frames
1:04:00 Copy and pasting styles from one object to another
1:05:00 Prototyping hover and tap in a navigation component
#Figma #OfficeHours #Autolayout #Grid #FigmaDesign 
Наука
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.
the power of "slots" is FANTASTIC ... this really takes composability to the next level
This was so refreshing. I suddenly got super excited after a long time after seeing the way you've played with Auto Layouts
a tip : you can watch series on kaldrostream. I've been using it for watching a lot of movies lately.
@Gideon Dariel yup, been using KaldroStream for since november myself :)
@Gideon Dariel Yea, have been using KaldroStream for since november myself =)
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
Totally agree so far! I learn so many things that help so much from these videos 😌
I would have liked it more than once if I could! Thank you so much for sharing
Waaoo !! it's insane! it'll help me to organize a design system that i'm building right now thank you!
haha I love watching you guys do your magic, thanks!
How did I not know about that layout grid trick?!? I'm flabergasted 🤯
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!
Woah Layout Grids 20:01. Really want to wrap my head around this.
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?
Thank you !
layout grids! Amazing
Thanks ✨
Great demo! Will you all be sharing the file like you typically do for these presentations?
Yes, but now with auto layout updates we don't need few of the tricks Joey showed
excellent sessions
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!
great vid, didn't know constraints were tied to layout grids
Awasome!
Hey, would you please share this figma file with the community? Will be helpful
7:50 On windows ,use alt key+ drag to replace component
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.
Great content, could you show how to create slot component
Great
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.
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
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
👍🏻
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.
@Gabriel Leni and I wrote that a Year ago. Imagine.
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.
@@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.
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?
Yeah I was wondering too, since I see no difference in flexibility when doing either approach.
where is the link of "complex components" file? thxs
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.
Have you tried creating a component and maybe using a negative shadow spread with no blur?
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.
@@Produkthelt Until we have states or something like this in Figma, I think this is a good solution! Happy designing, Marian!
When does it make sense to use Layout Grids vs. AutoLayout?
hello! thank you for this helpful video. Where can i find access to this file?
Great! how can I get this Figma file?
@figma team any chance you could share the file again?
@@Produkthelt Looks like it is in the Community www.figma.com/file/dVRZjGLXrOeloESS113zvG/Interface-Input-Kit-(Community)?node-id=0%3A1
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
great video! can i have the files by any chance?
im confused with the layout grids.. why isn't he doing autolayout and filling/hugging the contents?
35:00 Preview component behavior by modifying instances
57:15 Prototyping main navigation components mode for faster prototypes
Would be great if I could fetch the exercise file.
Doesn’t this serve the same function as variants?
Yeah basically variants. But I don't think variants were released at the time of the upload
first
Second! :-)
These are called variants now lol
kindly share this figma file 😀