Build awesome user interfaces with the Forms & Tables design system

Andrew Coyle
3 min readNov 11, 2024
Start using the UI system

I’m building an enterprise-focused, human-centered UI library that emphasizes best practices, a refined aesthetic, and a strong design philosophy. This library is crafted to empower designers and engineers to create user interfaces that drive the evolution of our digital landscape and redefine the future of work.

I finished building the foundational design system and published it to the Figma community for free. This Figma file marks the initial phase in establishing a universal design language that integrates code, documentation, and philosophy. My vision is for it to become a widely adopted tool that enables designers and engineers to build outstanding software.

For this article, I created a series of videos, reviewing each component and showing you how to build awesome UI in Figma. If you’re new to Figma, I also created a video series on how to learn Figma fast.

1. Introducing the Forms & Tables Design System

2. Design system overview — Forms & Tables Figma file

3. Button component

In this video, we create a sign in modal focusing on the button component inside Figma with the Forms & Tables UI system.

4. Badge component

5. Navigation components

In this video, we create a main navigation bar with sub-navigation items inside Figma with the Forms & Tables UI system.

6. Form components

In this video, we create a date range selector with various form components inside Figma with the Forms & Tables UI system.

7. Table components

In this video, we create a responsive data table with table components inside Figma with the Forms & Tables UI system.

8. List component

In this video, we create a user list with the list item component inside Figma with the Forms & Tables UI system.

9. Pagination components

10. Data display components

11. Chart components

12. Progress components

13. Alert components

14. Accordion components

15. Card component

16. Command menu component

17. Modal component

18. Tool tip, loader, icon, avatar, and miscellaneous components

My goal has always been to develop a minimal yet comprehensive UI system, containing every essential component and adaptable to a variety of user experiences. The system can be endlessly customizable without sacrificing core usability.

I’m drawing on my experience designing everything from intricate enterprise software to consumer apps—building a UI system that blends simplicity with sophistication. Having worked in companies ranging from startups to global tech giants, I aim to channel everything I’ve learned into this component library to make it beautiful, easy to use, and grounded in UX best practices.

Looking ahead, I plan to continue expanding this library, sharing designs, code, and insights on UI components, with more resources to come.

I’d love for you to join the project’s email list to stay updated on future launches, and I’m deeply grateful for your support and feedback.

--

--

Andrew Coyle
Andrew Coyle

Written by Andrew Coyle

Formerly @Flexport @Google @Intuit @HeyHealthcare (YC S19) Currently designing https://www.formsandtables.com/

Responses (2)