Build a GREAT Figma Design System | Build a Design System Part 5!

Welcome to Episode 5 of our design system series! In this episode, we're taking a deep dive into building a table component in Figma!

We'll walk you through the best practices for designing flexible and adaptable table components, all while staying aligned with your design system principles and leveraging the design tokens we established in the previous episodes.

Make sure to like, comment, and subscribe for more insights on building effective design systems!

*Apologies for audio issues throughout. Ran into issues working with my new microphone.

Save 15% on the Central Icon System with code COLLECTIVEICONISTS

Downloads & Links

0:00 Building Cell Items
8:05 Building a Cell
12:47 Building Rows
15:41 Building Columns
20:02 Hacking your table!!
22:54 Build a Row Table Component
26:19 Adding a Heading & Pagination
29:55 Building a Column Table Component
33:13 Text Truncation
34:24 Troubleshooting & Cleanup

[KerwinBoysillo]

Thank you for having this tutorial UI Collective! Always excited to learn your approach on how to do every components in design system. Can't wait for your next episode!

[thainateixeira]

Hello, I just wanted to thank you for your amazing tutorials! They’ve helped me a lot in gaining a deeper understanding of how to build components. Your content is always so well-structured and insightful.

If possible, I’d love to see more episodes focused specifically on mobile components. It would be great to learn how to optimize and design for smaller screens.

Thanks again for all the hard work you put into creating such valuable resources for the community!

[AmeliaPrasad]

Love these, as always. Untitled UI is cool and all, but now, after watching these videos, I'm pretty excited to make my own custom UI kit on scale with that one!

[vijaychandoliya]

Thanks for making this video

When I design a table UI, I follow the raw instead of the column

[ainaopeyemi]

Thank you and it, i am using your tutorial to learn figma

[AbhishekYadav-gxxy]

Hey can you please make the video of setting elements for mobile width.

[AlexSQF]

One tip that I've picked up over the years is to organize cells into columns, not rows. Each cell in that column is a component that's set to fill, you can easily change the width of any column and the cells will fill whatever width. No need to detach instances.

[atharnadeem]

Looking for this. Thanks. Is it possible to lock some component properties in nested instances?

[ainaopeyemi]

I am here and i am how many more parts?

[thjeen_tuwf]

How can we change the width of each cell for rows? Do we have a tip to hack the row?

[viajandoconlala]

But... Why the Gap workaround when you can just put that column into "hug"? and then each cell into fill...