Add existing design analysis docs

content/roadmaps/111-design-system/content/102-making-a-design-system/101-from-existing-design.md

@@ -1,3 +1,5 @@
 # From Existing Design
 
 If you are creating a Design System from pre-existing product design, there is an additional step to perform the existing design analysis, understand the existing design process, perform a visual audit, identify design elements and components and so on.
+
+<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=RYDiDpW2VkM'>Create a Design System with Figma - Full Course</BadgeLink>

content/roadmaps/111-design-system/content/102-making-a-design-system/readme.md

@@ -6,4 +6,4 @@ First step in building a design system is identifying [if you even need a design
 <BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=Hx02SaL_IH0'>Design Systems, when and how much?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.uxpin.com/create-design-system-guide/'>Design Systems: Step-by-Step Guide to Creating Your Own</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.method.com/insights/does-my-organization-need-a-design-system/'>Does My Organization Need a Design System?</BadgeLink>
-
+<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=RYDiDpW2VkM'>Create a Design System with Figma - Full Course</BadgeLink>

content/roadmaps/111-design-system/content/103-existing-design-analysis/100-existing-design-process.md

@@ -1 +1,8 @@
-# Existing design process
+# Existing Design Process
+
+To better understand the kind of design system you would like to implement, you need to start by reviewing and analyzing the current approach for design at your company. Find the answers to the following questions:
+
+* What is the design process that your company follows?
+* What are the existing tools that your company uses?
+
+It’s also recommended to evaluate the level of design maturity of the product teams. This knowledge will help you estimate the time required to introduce the system to your organization.

content/roadmaps/111-design-system/content/103-existing-design-analysis/101-visual-audit.md

@@ -1 +1,5 @@
-# Visual audit
+# Visual Audit
+
+Take screenshots of your current product with the help of your team. You can use any presentation software like Google Slides or print and pin them on foam-core boards. Group the screenshots into categories like buttons, navigation, forms, tables, charts, lists etc.
+
+Now, review each category to find inconsistencies and note areas for improvement with your team.  Use a tool like [CSS Stats](https://cssstats.com/) to see how many unique colors, typefaces you have in your style sheets.

content/roadmaps/111-design-system/content/103-existing-design-analysis/102-identify-design-elements.md

@@ -1 +1,3 @@
-# Identify design elements
+# Identify Design Elements
+
+Use the results of visual audit and prepare a comprehensive list of design elements such as Colors, Typography, Sizes, Spaces, Grid, Layouts etc. These elements will be the building blocks of your components.

content/roadmaps/111-design-system/content/103-existing-design-analysis/103-identify-components.md

@@ -1 +1,3 @@
-# Identify components
+# Identify Components
+
+Components of the application are created using a composition of design elements gathered in the previous step. Identify the list of components required for the application, which could include buttons, dropdowns, carousels, tabs, icons, alerts, toasts etc. Also, make sure to keep track of the different states of these components as well as different variants and actions.

content/roadmaps/111-design-system/content/103-existing-design-analysis/104-ab-tests-and-experiments.md

@@ -1 +1,3 @@
-# Ab tests and experiments
+# A/B Tests and Experiments
+
+Understand how the team implements A/B tests and experiments on different screens and if the new design system should accommodate any necessary requirements.

content/roadmaps/111-design-system/content/103-existing-design-analysis/105-regional-requirements.md

@@ -1 +1,3 @@
-# Regional requirements
+# Regional Requirements
+
+Understand any regional requirements such as LTR or any other UX variations that your design system should accommodate.

content/roadmaps/111-design-system/content/103-existing-design-analysis/106-documentation.md

@@ -1 +1,3 @@
 # Documentation
+
+Organize and document the results of visual audit, design elements, components with variations, states, patterns found, any existing documentation, current design process, and considerations. This documentation will be shared across the team and act as a guide when building the new design system.   

content/roadmaps/111-design-system/content/103-existing-design-analysis/readme.md

@@ -1 +1,11 @@
-# Existing design analysis
+# Existing Design Analysis
+
+First step in creating a design system from an existing design is performing a design analysis and understanding what you will be working with to identify the requirements and prepare a plan. Performing the analysis may consist of:
+
+* Understanding the Existing Design Process
+* Performing Visual Audit
+* Identifying Design Elements
+* Identify Common Components
+* Understanding the A/B Testing and Experimentation Needs
+* Understanding any Locale or regional requirements (such as LTR/RTL).
+* Documenting your findings

public/project/design-system.json

@@ -3658,7 +3658,7 @@
                   "measuredW": "19",
                   "measuredH": "40",
                   "x": "206",
-                  "y": "199",
+                  "y": "208",
                   "properties": {
                     "size": "32",
                     "text": "..."