Office hours: Complex component architecture

Подписаться 545 тыс.

Просмотров 153 тыс.

50% 1

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

Наука

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@yankee-in-london 3 года назад

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

@ChristianBaptiste 3 года назад

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.

@AnshMehraa 3 года назад

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

@gideondariel733 3 года назад

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

@kylerjakob5567 3 года назад

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

@spencerlucian4843 3 года назад

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

@jyotishclub5537 3 года назад

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

@gabrielabrunschweiler7782 3 года назад

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

@shaharbenari6744 2 года назад

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 😌

@nirjagauchan 3 года назад

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!

@kikeardila1441 2 года назад

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

@sagessedantan 3 года назад

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

@franksonjohnson 3 года назад

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

@Puleczech 2 года назад

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?

@jacklovett-earles767 2 года назад

layout grids! Amazing

@aliaksandrasaywell3826 3 года назад

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!

@ethosphane 3 года назад

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

@akashchoudhary5736 2 года назад

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

@robinlouis9162 3 года назад

Thank you !

@HeroNinja 3 года назад

Thanks ✨

@marzbitenhaussen 2 года назад

excellent sessions

@alexlimadsgn 2 года назад

Awasome!

@tallneilio 3 года назад

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

@developerdon6419 2 года назад

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

@ShoaibMahmudOfficial 3 года назад

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

@XiaodanGuo 3 года назад

Great content, could you show how to create slot component

@attilabodi1216 2 года назад

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.

@mohamedminhajsa7087 3 года назад

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

@BrialMusic 2 года назад

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 2 года назад

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

@SophieCheung Год назад

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

@Produkthelt 3 года назад

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 3 года назад

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

@Produkthelt 3 года назад

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 3 года назад

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

@JoeGelman 2 года назад

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

@elecm88 3 года назад

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

@mycampusroots Год назад

Great

@underscoreroa 7 месяцев назад

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

@djiusmkwok6797 3 года назад

Great! how can I get this Figma file?

@Produkthelt 3 года назад

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

@richardearney2524 3 года назад

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

@alexisfy 3 года назад

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 2 года назад

@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.