Design Systems & ViewComponents

Hey dear Rubyists,

Designer/UX engineer here. I’ve been working on a design system for my startup that utilizes GitHub’s Primer ViewComponent library as the foundation of our design framework.

Over the past year, as we’ve used Primer, patterns have naturally emerged. To capitalize on this, our design team developed a framework in Figma, inspired by atomic design principles. It has been incredibly effective for creating consistent design solutions with speed and clarity being very descriptive and removing design guess work. Now, we’re looking to replicate this system in Rails (or something inspired by it) to help our engineering team work faster and maintain consistency across different sections of our system.

Here’s the core structure of the system:

  • Layouts: Define the overall structure of a page, like Index views (tables of records), Detail views (a record’s detailed entry), or Form views (structured input for creating/updating a record). Layouts also manage optional elements like sidebars and responsive behavior.
  • Blocks: Modular groupings of components designed for specific purposes, such as data tables, forms, or toolbars.
  • Components: The smallest building blocks, sourced from Primer or custom-made for unique needs, like advanced tables or filters.

The engineering team is now debating the best way to implement this system in Rails. A suggestion is encapsulating everything—including layouts—into ViewComponents. This approach could provide consistency, but I wonder if it overlaps with ERB templates' natural functionality.

Here’s what I’d love your input on:

  1. What are best practices for combining multiple ViewComponents into a single “block” while ensuring clean integration and reusability?
  2. Is using ViewComponents for layouts encouraged, or is relying on HTML/ERB templates more practical for these cases?
  3. Do you have general advice for structuring a system like this to prioritize developer efficiency and maintainability?

I want to make it clear that I’m not trying to contradict my engineering team—my goal is to better understand the trade-offs and make informed decisions. If using ViewComponents for everything is the best path forward, I'll be more than happy to move forward with it. I’ll be leading the HTML/CSS efforts for this project, but my Ruby and Rails knowledge is limited, so I figured it’d be helpful to get insights from this brilliant community.

Thanks in advance for your advice and thoughts!