--- tags: aliases: date created: 2021-06-25 09:49 last tended: Thursday, February 17th 2022 publish: true --- ## What are Design Systems > Definition: A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. — Therese Fessenden, NN/g group in [Design Systems 101] The Design System incorporates Company [[style]] and [[branding]], product [[style]] and [[branding]], [[Usability]] insights from research or testing. [[UI Components]] for reuse in various *proven* patterns. There should also be a code version of this for easy use by [[developers]]. **Key Points:** - Reusablity: Simple problems solved upfront, leaving design resource for complex problems - Coordination: [[UI Components]] created using [[Atomic Design]] fit nicely into the same semantic structures that modern coding using - Unified language: what a dropdown *is*, is a solved problem, we don't need to go back and debate dropdowns unless we spot [[Accessibility]] issues or visual bugs, or a new [[use case]] presents itself. - Working out in the open: modern tools such as [[Figma]] allow the concept of [[Open Design]], which improves communication, accountability - Self documentating: With very little effort the design system itself has potential to become the [[documentation]] of *how we work*, [[Accessibility]] considerations, new employee onboarding - Cascading Changes: correctly done, any tweaks to [[branding]], such as [[colour]] or [[style]] replicate easily through the [[Atomic Design | atomic]] structure. **Limitations:** - Difficult upfront: getting started has a high overhead and potentially a lowering of *ongoing* design effort while the design system gets up to speed. - Rot: if someone does not own the design system, or if responsibility of ownership is fuzzy then the design system can fall behind and get messy. Redundancy can also become a problem. It is hard for one person to own at scale. - Communicating subtleties: Designs can use a mix of [[UI Components | components]] from the Design System and ones that are unique to the design itself. How to describe this to [[developers]] can be a challenge. - Versioning: I don't think versioning is a solved problem. How do you have a design system that non-designers can use and know is correct and up to date, whilst [[designers]] are creating new proposals or improvements. Using different page structures, inline text or using tools like [[zeplin]] can help. - Reality: getting existing or in progress products to refactor to use the design system components has a cost For [[designers]], a component library is still something that is useful to use even if the organisation doesn't buy into the idea of a design system. In my experience, an unofficial design system will still be created and used between design teams for ease of reproducability, and communication. For solo designers and even amongst some teams, design documentation happens anyway, often in your head, rarely made external. ### Mind map [Design Systems Mind Map](mindnode://open?name=DesignSystems.mindnode) ## Governance Managing a design system whilst not going against [[Open Design]] principles is difficult. The design system should be a constant catalyst for change, [[Incremental Change]] at an [[Atomic Design|atomic]] level can add up to a vibrant and ever improving design. --- #### Links **Naming** [Best practices for design system naming conventions | Inside Design Blog] **Handover** [Design Systems For Figma: Design To Engineering Handoff] [Handing over design with spacers in Figma | by Lennon Cheng | UX Collective] **General** [Design Systems 101] **Governance** [How to Govern a Design System] ___ [Best practices for design system naming conventions | Inside Design Blog]: https://www.invisionapp.com/inside-design/naming-conventions/ [Design Systems For Figma: Design To Engineering Handoff]: https://www.designsystemsforfigma.com/blog/design-to-engineering-handoff [Handing over design with spacers in Figma | by Lennon Cheng | UX Collective]: https://uxdesign.cc/handing-over-design-with-spacers-in-figma-6c5bfd76a6d5 [Design Systems 101]: https://www.nngroup.com/articles/design-systems-101/ [How to Govern a Design System]: https://www.designsystems.com/how-to-govern-a-design-system/