diff --git a/content/roadmaps/111-design-system/content/102-making-a-design-system/101-from-existing-design.md b/content/roadmaps/111-design-system/content/102-making-a-design-system/101-from-existing-design.md index b20e38b29..baa600e2a 100644 --- a/content/roadmaps/111-design-system/content/102-making-a-design-system/101-from-existing-design.md +++ b/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. + +Create a Design System with Figma - Full Course diff --git a/content/roadmaps/111-design-system/content/102-making-a-design-system/readme.md b/content/roadmaps/111-design-system/content/102-making-a-design-system/readme.md index 18e6b419c..246a70fa1 100644 --- a/content/roadmaps/111-design-system/content/102-making-a-design-system/readme.md +++ b/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 Design Systems, when and how much? Design Systems: Step-by-Step Guide to Creating Your Own Does My Organization Need a Design System? - +Create a Design System with Figma - Full Course diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/100-existing-design-process.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/100-existing-design-process.md index 53256a3a0..da2e0b500 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/100-existing-design-process.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/100-existing-design-process.md @@ -1 +1,8 @@ -# Existing design process \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/101-visual-audit.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/101-visual-audit.md index 6b1290e00..1e9d8c986 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/101-visual-audit.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/101-visual-audit.md @@ -1 +1,5 @@ -# Visual audit \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/102-identify-design-elements.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/102-identify-design-elements.md index 2a25e49c7..0922426d7 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/102-identify-design-elements.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/102-identify-design-elements.md @@ -1 +1,3 @@ -# Identify design elements \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/103-identify-components.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/103-identify-components.md index b6dcde427..bcb2d19e6 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/103-identify-components.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/103-identify-components.md @@ -1 +1,3 @@ -# Identify components \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/104-ab-tests-and-experiments.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/104-ab-tests-and-experiments.md index 36792c71e..ee9719998 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/104-ab-tests-and-experiments.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/104-ab-tests-and-experiments.md @@ -1 +1,3 @@ -# Ab tests and experiments \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/105-regional-requirements.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/105-regional-requirements.md index 65aa9fe3c..97d2d51d6 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/105-regional-requirements.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/105-regional-requirements.md @@ -1 +1,3 @@ -# Regional requirements \ No newline at end of file +# Regional Requirements + +Understand any regional requirements such as LTR or any other UX variations that your design system should accommodate. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/106-documentation.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/106-documentation.md index 7d8b3af51..de82918b0 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/106-documentation.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/106-documentation.md @@ -1 +1,3 @@ -# Documentation \ No newline at end of file +# 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. diff --git a/content/roadmaps/111-design-system/content/103-existing-design-analysis/readme.md b/content/roadmaps/111-design-system/content/103-existing-design-analysis/readme.md index dfe48b7af..58231da14 100644 --- a/content/roadmaps/111-design-system/content/103-existing-design-analysis/readme.md +++ b/content/roadmaps/111-design-system/content/103-existing-design-analysis/readme.md @@ -1 +1,11 @@ -# Existing design analysis \ No newline at end of file +# 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 diff --git a/public/project/design-system.json b/public/project/design-system.json index a19d29162..33b9dc82a 100644 --- a/public/project/design-system.json +++ b/public/project/design-system.json @@ -3658,7 +3658,7 @@ "measuredW": "19", "measuredH": "40", "x": "206", - "y": "199", + "y": "208", "properties": { "size": "32", "text": "..."