Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes #98 #108

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fixes #98 #108

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions chapter-3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ Thanks to the Russian nesting doll include approach described earlier in the cha

{% include figure.html src="../images/content/pattern-lab-lineage.png" caption="Pattern Lab's lineage feature displays what patterns make up any component, and also shows all the places that component is employed." %}

In the above example, we have a molecule pattern called `block-media-link`, which contains an image, headline, and call to action. Looking at the pattern's lineage, we can see it contains another pattern called `atoms-square`, which is the circular thumbnail-sized image (the naming is a bit confusing, but we're using CSS to round the square image's corners). We can also see where exactly this pattern gets utilized: the `profile-nav` molecule, the `section-media-list` organism, the `settings-account` template, and the `settings-account-edit` template.
In the above example, we have a molecule pattern called `block-media-link`, which contains an image, headline, and call to action. Looking at the pattern's lineage, we can see it contains another pattern called `atoms-square`, which is the circular thumbnail-sized image (the naming is a bit confusing, but we're using CSS to round the square image's corners). We can also see exactly where this pattern gets utilized: the `profile-nav` molecule, the `section-media-list` organism, the `settings-account` template, and the `settings-account-edit` template.

This contextual information is amazingly helpful for designers and developers; I know I use the lineage feature *all the time* in my own workflow. Let's say we wanted to make changes to a particular pattern, like doubling the size of the image or adding an additional text element, **we'd immediately know which patterns and templates would need retested and QA'd to ensure nothing breaks with the changes**. The lineage feature also helps point out unused or underutilized patterns so that teams can weed them out of the pattern library.

Expand All @@ -421,4 +421,4 @@ When choosing tools to create your pattern library, you should keep your eyes op
- Providing contextual information like which patterns make up a particular component as well as where that component gets utilized

At the end of the day, it's not about the tools we use to create pattern libraries, but rather how we use them. Creating and maintaining an effective design system means dramatically changing your organization's culture, processes, and workflows. If that sounds hard to you, it's because it is! But fear not! The next chapter will detail the entire process of creating and maintaining a successful design system to set your organization up for longterm success.