Team Speak

Nuts and Bolts of an Effective Design System

As the competition between tech companies gets tougher, a quick and efficient delivery of products is the need of the hour. Customers are always eager to get the latest applications and products and the stakeholders are always propelling towards expeditious development. 

How can designers contribute towards an instantaneous delivery of designs to the developers?

The key to create diverse ideas and mould them into designs is to construct a system that helps you and your team work efficiently at any given point of time. The current era is more focused towards robust collaboration and on the go design feedbacks. With the ever evolving design tools and methodologies to create the best designs, we at SugarBox explore every possible way to deliver the finest of designs. After all, trends usually develop as a result of improving certain technologies to avoid previous errors. Our objective is to create a holy grail of design system that will evolve and automate our design process for years to come.

So, what exactly is a design system?

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build diverse number of designs.”

It will evolve constantly with the product, the tools and new technologies.

But why create a design system? Is it because all the tech giants are sailing towards that same coast? Now the answer to this question may diverge for various companies.

At SugarBox, by virtue of our extensive research, we unveiled the following pointers that helped automate our process:

  • We assess our designs and processes every now and then, even though we have enormous components that are reusable; we do, once in a while, find loopholes in our workflow. Design elements cannot be used in a vigorous way, because there will always be a concern where a different colour is used rather than the one specified in the style guide or an alternate component is used instead of the standard component defined. This needed to be changed from the core. After a multitude of contrivance we settled on implementing the atomic design from scratch. We started off with a hierarchy on all the projects, which can be dissected into various other components, depending upon the type of design we may be working on – say, web-based design on a Desktop or a tablet, or design for a device having an android or IOS operating system.
  • Subsequently, we switched to Figma (a collaborative web-based vector editor and UX design tool), as we became aware of it to have more potential than Sketch (a design tool compatible only for IOS). Predominantly, Figma is an all-in-one tool with better features; it helped in bridging the gap between designers and developers more efficiently. Unlike Sketch, Figma is platform independent and can be worked on for multiple browsers.
  • Eventually, we streamlined and broke down every complex component into a reusable base element, which can be merged with ease to create new caliber and quick to react/open to suggested modules.
  • In addition to the above, we acknowledge the significance of documentation as another key characteristic that will help new designers understand the system briskly. Imagine if your designs are not documented and a colleague has to work on your project urgently and you are on leave for a beach-side vacation! Can you fathom the chaos and the amount of time that will be wasted, resulting in below par delivery of designs?

Over and above everything I have mentioned here, it is of prime importance that we do not lose sight of the fact that – you have to keep yourself and your knowledge on all aspects updated to be effective and efficient at all levels in life!

Images Designed by Freepik

You may also like

Comments are closed.

More in Team Speak