> For the complete documentation index, see [llms.txt](https://maher-hasan.gitbook.io/ux-portfolio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://maher-hasan.gitbook.io/ux-portfolio/my-ux-research-methods/design-systems.md).

# Design Systems

I love creating design systems and have ended up producing tonnes of them even over the years.

However, whenever I feel I have nailed an approach, a new platform comes out, and the whole system needs to be tweaked. Historically because of this, maintaining them used to be complicated. They became out of date the moment they were printed.

Today, however, we have [Creative Cloud libraries](https://www.adobe.com/uk/creativecloud/libraries.html), [Sketch](https://www.sketch.com/docs/libraries/) and [Figma](https://www.figma.com/best-practices/components-styles-and-shared-libraries/).

My current tool of choice is Figma or Adobe XD depending on the project I am working on and I tend to put the following skeleton together:

**Grid**

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFiCCd9w9HLkcVw-Ai2%2F-MFiDFoKJRhJ-NwRK1jZ%2FGrid.png?alt=media\&token=2df3be87-99ed-49df-af55-1becc4ca3085)

**Type scaling**

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhh_J14aCvmy8cNyF1%2F-MFhitpgt5YKikCMgvWt%2FType.png?alt=media\&token=392da1dd-c7a4-444f-ba2b-97dc84e62d4e)

**Colour palette**

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhh_J14aCvmy8cNyF1%2F-MFhixzBmIJoZwYwPbDB%2FColour%20Pallette.png?alt=media\&token=8d6865d5-b914-44d3-a1b9-00cd0d768381)

**Iconography**

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhh_J14aCvmy8cNyF1%2F-MFhj3ont6N-O2hDUW5P%2FIconography.png?alt=media\&token=f4cdc9c1-6cd6-4943-8364-bc341e9e6203)

* Brand Elements
* Effects
* Image sizes
* Inputs
* Buttons
* Data visualisation

Beyond the UI elements listed, we move into reusable components that developers build and share across projects so the effort is not duplicated and technical debt is avoided.

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFiCCd9w9HLkcVw-Ai2%2F-MFiDB3nX0HF_zRsjXVv%2Fguides.png?alt=media\&token=932fe1f2-1869-4393-bf98-3b6960939f62)

In short, creating a design system is a good way of organising all your documentation and it looks like you know what you're doing!