Design System Components4:12 with Anwar Montasir
While no two design systems look quite the same, there are three categories of content consistent to most design systems.
- Designer-developer handoff: the point in the product development process where developers create a functional version of the finished design
It's easy to find well documented design systems on the web. 0:00 Many companies like to share their design systems publicly. 0:05 And companies like Apple and Google have detailed guidelines for 0:09 developing for their mobile operating systems that you can reference and 0:14 use when developing mobile apps. 0:19 Some systems are only partially open to the public. 0:21 I'm looking at the guidelines for Atlassian design, and 0:25 while I can learn the rules dictating illustration usage, or 0:29 iconography usage, only Atlassian 0:35 employees can access the Illustration or Icon libraries themselves. 0:41 However, many design systems aren't public, they are intended only for 0:48 employees designing for their company's websites and apps. 0:53 For example, we have an internal design system 0:58 here at Treehouse to guide our designers as they work on this site. 1:01 But whether completely public, partially so, or 1:06 not at all, design system docs have some things in common. 1:10 Each one is meant to be easily accessible by the design team, 1:15 straight forward to follow and implement, and frequently referenced. 1:19 Designs systems are used during the design phase when presenting designs for 1:25 discussions and when providing feedback, and critiquing designs. 1:30 Design system documentation can also guide the development process. 1:35 Frequently, the docs include notes that help developers 1:40 implement the work of designers. 1:44 When done well a design system should simplify the designer-developer handoff. 1:46 After all, you're not designing in a vacuum or just for yourself. 1:53 At some point during the product development process, 1:58 developers need to build what you've designed. 2:01 The design system documentation is like a dictionary to 2:04 ensure both teams are speaking the same language. 2:09 It's also worth mentioning that the design systems I'll be showing you in this course 2:13 have probably evolved since these videos were recorded, and they're meant to. 2:18 Design systems are organic documents, evolving every time the system 2:23 parameters lack clarity or need updating, growing to meet new challenges. 2:29 And while no two design systems look quite the same, 2:36 there are three categories of content consistent to most designs systems. 2:40 The first category is visual design language. 2:45 Design system documentation should specify clear rules for 2:50 applying elements of style. 2:54 These design system building blocks include color, typography, 2:57 spacing, image, and motion. 3:04 The second category of design system content is the user interface library 3:09 in which the pieces of the visual design language 3:15 are assembled together to create interactive elements. 3:18 In design systems, 3:23 these assembled elements are often referred to as components. 3:25 Design systems establish rules for consistent implementation and 3:30 usage of components. 3:35 Finally, design systems provide guidelines for voice and tone. 3:38 Imagine your product as a living person, 3:44 what terms would you use to describe its personality? 3:48 Friendly and playful, confident and loud, formal and serious? 3:51 A design system should guide copywriters toward keeping 3:56 brand voice consistent and tone appropriate. 4:01 In upcoming videos, 4:05 we'll examine each of these categories of design system content in depth. 4:06
You need to sign up for Treehouse in order to download course files.Sign up