![](https://carbon-media.accelerator.net/0000000bPl7/9rSULfuhBDcgeExS7fFtVW;960x540.png?auto=webp)
Much like a customer journey map, a users map is created for the designer and their possible use cases when leveraging the design pattern library to access the reusable components for proposing solutions.
![](https://carbon-media.accelerator.net/0000000bPl7/7A1Fc6CyX1lgmM6oSbTU6V;960x540.png?auto=webp)
To access the library of UI patterns, a designer may visit the online version where definitions can be referenced for correct usage and behavior of an array of common components and templates to create high fidelity mock ups.
![](https://carbon-media.accelerator.net/0000000bPl7/iaZ9DqPbxAKditwFgqw6Z5;960x540.png?auto=webp)
Visual previews are shown within each page.
![](https://carbon-media.accelerator.net/0000000bPl7/djUsZ9Vqih8fR71RJZaox3;960x540.png?auto=webp)
At the end of each page, the native file can be accessed from the pattern repository and a version management application is launched.
![](https://carbon-media.accelerator.net/0000000bPl7/6MYoa2NNRQfcrteYDg21Dx;960x540.png?auto=webp)
Components are kept and maintained in a centralized versioning hub. With this tool (called Abstract), any component can be access and modified by a designer while tracking its version history.
![](https://carbon-media.accelerator.net/0000000bPl7/70VRO8SdBnDeC0c7ta0nyg;960x540.png?auto=webp)
The native file is launched, and designers can begin working within the parameters of the design system. Here, the header component is populated.
![](https://carbon-media.accelerator.net/0000000bPl7/lsf2mwisLMLg3qORRRZ9wr;960x540.png?auto=webp)
The rest of the components are put in place until …
![](https://carbon-media.accelerator.net/0000000bPl7/0XeQGmASZJneSmVdFvznow;960x540.png?auto=webp)
An entire interface is made and modified.
![](https://carbon-media.accelerator.net/0000000bPl7/3OYuqpCNFqrfURQGHZz4gS;960x540.png?auto=webp)
Interfaces may be replicated to create a flow.
![](https://carbon-media.accelerator.net/0000000bPl7/i5G3p9CJKFcg2upo1DACMK;960x540.png?auto=webp)
Each artboard can be linked together to make a prototype.
![](https://carbon-media.accelerator.net/0000000bPl7/3p99lGTmj36cnTFVjctHeO;960x540.png?auto=webp)
Prototypes are now ready to be shopped and presented among various teams and departments.
![](https://carbon-media.accelerator.net/0000000bPl7/ip3kIUrxx0ycvtGEqCh0XC;960x540.png?auto=webp)
When designs are executed within the parameters of the system, the result is more user experienced and product focus and less about design.