![\"\"](\"http:\/\/blogs.thecdm.ca\/wp-content\/uploads\/sites\/3\/2023\/04\/Liting.jpg\")
<\/figure>\n\n\n\nThis basic theory also applies to design. In 2013, front-end engineer Brad Forst <\/u><\/em>proposed to apply that theory to interface design, also known as the \u201catomic design system.\u201d<\/em> I will briefly introduce that system and how to use it in design.<\/p>\n\n\n\n System composition<\/strong><\/p>\n\n\n\n The atomic design system includes five types of levels:<\/p>\n\n\n\n Atoms<\/strong><\/strong><\/p>\n\n\n\n Atoms are the minor units that makeup design elements, such as colours, text, input boxes, icons, etc.<\/p>\n\n\n\n Molecules<\/strong><\/strong><\/p>\n\n\n\n As described before, atoms are arranged and combined to form molecules, which primarily exist as \u201c<\/em>components<\/em>\u201d<\/em> in interface design\u2014for example, navigation bar, tab bar, search box, button, pop-up window, etc.<\/p>\n\n\n\n Organisms<\/strong><\/strong><\/p>\n\n\n\n The organism is a module composed of multiple molecules, such as cards carrying various information, lists, etc.<\/p>\n\n\n\n Templates<\/strong><\/strong><\/p>\n\n\n\n Templates are often associated with product functions. Based on specific parts and user needs, multiple \u201cO<\/em>rganisms<\/em>\u201d <\/em>are combined to form a \u201cTemplate,\u201d and the product interface has a basic prototype.<\/p>\n\n\n\n Pages<\/strong><\/strong><\/p>\n\n\n\n The template is filled with accurate contents ( pictures, text, etc.) to form a page, and then various reasonable visual designs are used to convey the product\u2019s style to the user, and finally, that interface is the last appearance of the product presented to the user.<\/p>\n\n\n\n Advantages and Benefits <\/strong><\/strong><\/p>\n\n\n\n An atomic design system recycles components, quickly builds pages, improves design efficiency, and saves unnecessary communication costs.<\/p>\n\n\n\n This system can help designers establish a set of standardized rules that help avoid the problem of inconsistent collaboration standards and ensure a consistent product experience.<\/p>\n\n\n\n In the product iteration process, the atomic design system can be better expanded and maintained. The design can be updated globally simply by just changing atoms and molecules. PS: In Figma, Style and Component<\/u><\/em>, two types of functions have applied atomic design, so we can quickly build interfaces and basic design systems based on these two functions.<\/p>\n\n\n\n Written by Liting He 2022 Cohort We all know that in the physical world, objects are made of atoms, atoms<\/p>\n![\"\"](\"http:\/\/blogs.thecdm.ca\/wp-content\/uploads\/sites\/3\/2023\/04\/Liting-2.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blogs.thecdm.ca\/wp-content\/uploads\/sites\/3\/2023\/04\/Liting3-1024x769.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"