search

joshblack / www

Personal site
https://josh.black
0 stars 0 forks source link

Blogs #34

Open joshblack opened 3 years ago

joshblack commented 3 years ago

Some blog ideas that hopefully we'll turn into posts at some point:

joshblack commented 3 years ago

Arranging components in Design Systems

When building a design system, often teams can become laser-focused on the smaller parts of a UI without giving attention to how these pieces should be organized together. In other words, you've spent time delivering great primitives like buttons, dropdowns, form elements, and more but you haven't given any tools for teams to arrange them on the page. This leads to great consistency within these elements, but unfortunately across teams the spacing between these items when laid out on a page can be inconsistent.

Probably the first approach for addressing this is to lean on your grid system. With CSS Grid support becoming more prevalent, now is a great time to set up your first Grid and Column components for teams to use to layout a page. This grid system is a natural first step to creating a consistent structure for pages.

Similarly, you can take a look at your portfolio and consolidate on several page types. These could serve as references for templates that teams can use so that the location of common entities on the page are similar. Great candidates for this includes headers, footers, content areas, and side-panels.

Now, say you've set up your grid system and you have some killer templates to go along with it. How do you handle spacing within each region?

This is where Stack components really save the day. When used alongside your spacing scale, you can create a series of spacing-specific tokens called gap tokens. They should be used to represent how items in your system can be spaced vertically a part from each other. You can name these by scale degree (0 - n) or give them a semantic name like cozy, comfortable, compact, etc.

Now, you can use and combine these Stack components to guarantee that items on a page are spaced vertically in a way that is consistent with your spacing system and overall design system.

And there you have it! Once you start feeling comfortable with some of the more specific components in your design system, I would highly encourage you to explore how you can systematize spacing across your company through your design system. Starting out with a grid system and then transitioning into page templates and helper components like Stack will go a long way to creating consistency and cohesion across the board. The best part, you can do this alongside some of the more traditional design system components (and they tend to be simpler, too!)

Case studies