8 Lessons I Learnt While Building A Design System From Scratch At Syfe

8 Lessons I Learnt While Building A Design System From Scratch At Syfe 1. design system is navigation not destination. the design system help us (designers and engineers) construct and de construct components (buttons, colors, forms, icons etc) at a rapid pace with a lot of scalability and iteration . i learnt that design systems are made to evolve. they are not your artwork nor your personal illustration. Don’t work in isolation (tempting as that can be) building a design system is a masterclass in collaboration. it’s important that other teams build the system with you. getting input and letting people into that process helps us challenge and overcome assumptions we didn’t even realize we're making.

Lessons Learned From Building A Design System 8 lessons learnt while building a design system from scratch at syfe. #design #system. 2. what elements or components belong in the design system? yes, this is without doubt the most difficult part of building a design system and is to be blamed for most of the delays, because not everything created deserves to be inside the design system. in most cases, i used the rule of three:. Step 3: build your design system in figma. building a design system in figma is all about creating a consistent, efficient, and scalable way of working across your entire project. it’s like creating a set of building blocks that everyone on your team can use to create designs that look and feel cohesive. Step 1: audit existing components. in order to get a bird’s eye view of all the use cases we need to cater to, it is important to audit existing components in our product. yes, every single component on every page. this is a crucial step albeit a tedious one.

Creating A Design System From Scratch Part 8 Youtube Step 3: build your design system in figma. building a design system in figma is all about creating a consistent, efficient, and scalable way of working across your entire project. it’s like creating a set of building blocks that everyone on your team can use to create designs that look and feel cohesive. Step 1: audit existing components. in order to get a bird’s eye view of all the use cases we need to cater to, it is important to audit existing components in our product. yes, every single component on every page. this is a crucial step albeit a tedious one. It also helps to organize your pattern library into subsections. try categorizing them by function, such as “navigation,” or by type, such as “drop down menus.”. 7. upload the select ui elements in a design system document. lastly, you need to house your design system somewhere that’s convenient and easily accessible. In this layer, we use the colors defined in the first one and compose them or expand them. diagram illustrating the two tier variable system: the brand color is used as background color in the button while referencing the color itself. this system worked for me for the following reasons: arrow.