Build it in Figma: Create a Design System - Components continued
HTML-код
- Опубликовано: 7 авг 2024
- Part 3/5. Introduce more complex components like cards, media objects, dialogs, navigations, and forms to your design system.
Figma file: www.figma.com/community/file/...
Figma is free to use. Sign up here: bit.ly/3l69lVU
Timestamps:
0:00 Intro
1:30 Overview of Typescale & Colors
2:40 Overview of Components
3:20 Constraints
3:40 Autolayout
5:00 Creating understandable systems
6:40 Using nested "structure" components
8:00 Autolayout Buttons
9:00 Auto vs. Fixed width with Autolayout
11:00 Instance swapping
12:20 Autolayout for Text with an expanding underline
14:15 Groups vs. Frames
15:00 Constraints within Frames
17:30 Creating a Card Component
24:30 Creating a Media Component
26:00 Split components out into logical groups when the design system matures
26:45 Pasting images into fills
30:00 Adding a tint/gradient/border overlay to your media components
35:00 Holding Alt to reveal spacing between objects
35:45 Spacer components
38:00 Creating a Tooltip Component
38:45 Drawing an iOS style Tooltip "beak"
39:25 Tip: Swap fills & strokes with Shift + X
41:00 Creating Effect Styles for consistent patterns for depth
42:00 The power of using shared Effect Styles
43:00 Completing the Autolayout Tooltip
44:00 Using selection colors
44:45 Extending the Tooltip component to have a top/bottom beak
47:10 Using nested Autolayout for a button that can be fixed width
48:00 Swapping instances of buttons and using slash naming to group for easy swaps
50:45 Tip: Changing images in components by copy/pasting image fills
51:45 Placing multiple images in components with Place Image (Shift + Cmd/Ctrl + K)
#Figma #DesignSystem #DesignSystems #UXDesign 
Наука
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
Thank you for your tutorials, and walk through. You are easy to follow, professional and fun.
There's so much magic in this video I will have to rewatch it for like 10 more times. Great stuff!
Love Figma, always respect the app and all people who put hard work on it.
Good one! I like timestamps and timeline markers, it's well organised.
I don't know how I could live without Figma for so long
I definitely feel the same way. Was using XD for a long time. But now I never want to go back.
Thanks Figma, your tutorials give me a bunch of epiphany about how Atomic Design works :")
Holy crap. Spacers + auto layout is next level. Time to redo my designs
This is so so high quality content. I am so grateful to your channel
So Useful!! Thank you !!
Thank you for this wealth of info and your inspiration. Great work and presentation.
thnks, i was waiting for this video
dude youre the berst , i am also coder and designer, and i feel i cant let one go for the other!
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.
You are Godsend!
Trying to create that left and right beak is kicking my ass whew!
hi, i loved the smart tooltip recipy, but it doesnt work when i want a tooltip with a stroke... pls advice
Love the tool tip..!
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?
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!
great. thanks
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?
Same. It seems Figma in 2022 no longer works like this.
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.
-We are Figma
-What's Figma?
-Fig ma balls
How I can set the space between 2 Layers inside auto layout frame independently?
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!)
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 ?
strange, couldn't recreate beak in new version
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.
@@stevenmartinez3955 You are a life savior!
Can I play an animation made with this on the Figma prototype?
Rogie is the best!
Man, all that "boring" stuff you skipped is what I'd really like to see 🤣
"I like this button because I made it, It's like my son" =)))))
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.