#15 – Creating a component system

Adam and Ste chat about life and creating a component system for Hardcover to maintain consistency throughout the app.

Summary

The conversation covers various topics including movie plans, TV shows, workout routines, reading habits, building a component library, reviewing the component library in Figma, color and typography choices, standardizing links and headers, and icon usage and component consistency. In this conversation, Adam and Ste discuss various improvements to the hardcover website, focusing on the design and implementation of components. They start by discussing the prompts page and how to improve its layout. Then, they explore creating text components in Figma to make it easier to style and manage text across the website. They also discuss implementing component library variants and sizes to ensure consistency and ease of use. The conversation then moves on to creating a title component and considering SEO implications for headings. They discuss the benefits of implementing components on the book page and the process of converting existing pages to use components. Finally, they touch on improving search functionality and provide updates on the Hardcover Live series.

Takeaways

Creating text components in Figma can make it easier to style and manage text across the website.
Implementing component library variants and sizes ensures consistency and ease of use.
Using components for headings and titles can improve SEO and provide a more structured hierarchy.
Converting existing pages to use components can make it easier to maintain and update the website.

Chapters

00:00 Introduction and Movie Plans
03:00 Discussion about TV Shows
06:00 Workout Routines
09:00 Reading Habits
12:00 Benefits of Audiobooks
15:00 Building a Component Library
19:00 Reviewing the Component Library in Figma
25:00 Color and Typography Choices
32:00 Standardizing Links and Headers
39:00 Icon Usage and Component Consistency
43:45 Improving the Prompts Page
44:58 Creating Text Components in Figma
48:08 Implementing Component Library Variants and Sizes
49:11 Creating a Title Component
51:11 SEO Considerations for Headings
52:48 Implementing Components on the Book Page
53:18 Converting Existing Pages to Use Components
54:27 Improving Search Functionality
56:10 Wrapping Up and Next Steps
57:01 Hardcover Live Updates
57:32 Inviting Guests to Hardcover Live
58:06 Conclusion