Figma in 5: Design Systems: Components

Ready to level up your skills? Got five minutes?

This series is meant to level you up in a rapid-fire, tip stacked deep-dive on a topic. This time, we're talking Design Systems with a focus on components.

Stay tuned by subscribing for Figma in 5, which drops a few times a month, on Tuesdays.

0:00 Intro
0:40 Create multiple components at once
0:50 Un-publishing components
1:10 Restoring deleted main components
1:25 Using main component descriptions and documentation links
2:00 Using descriptions to improve asset discovery
2:30 Rapidly iterating design system creation by pushing overrides to main
3:15 Resetting component instance overrides
3:40 Private/hidden team library components
4:15 Nested variants/components
5:10 Using Auto Layout overrides in instances to make components more flexible
5:40 Using Auto Layout within components
6:05 Using Layout grids within components
6:30 Using overflow behavior on components to create carousels

#Figma​ #FigmaIn5​ #FigmaTips

[joefajnor]

That slider bar hack is genius, thanks for sharing!

[LeviathanDesigner]

Cool tips and tricks. Always learning new stuff with this videos. Thank you.

[bloycey]

I got SO much value from this video. Thanks a heap.

[johnnnyfoley]

Thanks for great video 👍 One thing tho, 4:16 - The part about embedding nested components in variants etc, this is explained at light-speed and is super hard to dissect and follow 😬 I know it’s a quick vid. It just thought I’d share that feedback - 🙏

[andrey-]

I have already begun to forget the mesh and its ability to stretch objects. thank you for reminding

[ngocquynhnhuha]

I can not do the slider bar hack, can u share the link in Figma community?

[TheFaithfulFridaysPodcast]

Yo - that slider tip though - MIND. BLOWN. Can you guys do a tutorial on how that is setup??!!

[Lvelyx]

When I started to design our application, I continued to keep all components in the local file, what’s the easiest way to put those in a seperate design system file now? 😩

[danoxtreme]

Best video ever! Do you have a complete course? I been looking for medium to advance course

[masihsadri]

Finally, I could implement the slider.

[Tranmautritam-Designer]

Great series, i think if you can publish a copy in figma community and put a link here it would be great

[luandaoux]

Thanks for the tips. Anyone knows how to replicate the slider hack at 5:10

[mtc]

Can u explain how do we attach the beak to the chat bubble??😢

[SteffenNoergaard]

Loving these videos, but can you please adjust the volumes a bit? The intro-sound seems pretty loud compared to the rest of the video 🙏

[snds]

@rogie I can't seem to replicate the slider bar with the tooltip on the slider handle. Can you supply the demo file?

[Potatis]

I sort of don't understand how the guides effect the scaling etc of objects inside the frame? Isn't it just the left and right constraints that's doing it?

[rmsphotodesign]

Wait but can we hear more about the tooltip beak outside of the component frame?

[FaizHakim]

Hi there, hope this source and the next video can be downlaoded 😅 anyone agree with me? 😂