We’ve all experienced the frustration of having a great design idea, but not quite being able to translate it into the finished product. When design and development teams are not aligned, it becomes increasingly difficult to bring your design vision to life—impossible even.
This is why design systems are so important for your business. With a design system, you can achieve consistent branding across all digital assets and products. These systems forge a link between the creative expertise of the design team and the more technical proficiency of the developers, ensuring that all projects are executed to the same high degree of success. To put it simply, a great design system is key to a great finished asset.
But a design system can not achieve this on its own. There still needs to be high levels of collaboration and communication between teams, supporting the functionality of the design system. Without this, brand consistency will suffer, projects will be delayed, and that familiar frustration will rear its head again.
So, how is this design system collaboration achieved? What can teams do to ensure precise and effective communication? Let’s dig in.
✏️ Thanks to our friends at L’Agence Web for sponsoring this blog post!
1. Unify designers and developers with shared terminology
The roles of designer and developer are very different. While both roles work toward the same goal, they reach this goal in different ways. Designers envisage the form the project will take, while the developer applies their technical knowledge and skill as they realize the vision.
This might not be a problem if there is a complete understanding of what needs to be achieved at each stage. For example, if the designer has a very simple brief resulting in a design with only a few different elements, developers will be able to render this without too much trouble—especially if they have completed the task before. Unfortunately, this is often not the case. For more complex design projects, a closer understanding is required.
There needs to be shared terminology that is used by both designers and developers during the project: a shared language that both sets of professionals understand.
🎨 COLOR PALETTE EXAMPLE
Designers need to refer to color elements using highly specified terminology. They will need to assign specific labels to the color elements within the design system. This means attaching specific labels for colors like “cherry red” and “ruby red” so that developers do not need to guess which shade of red is which.
This shared language is the foundation for collaborative efforts and will speed up communication and real-time collaborative work.
2. Manage file organization
You can’t render stunning designs if you can’t find your files. This is why it’s so critical to extend the shared terminology and language to your design system file organization. Teams need to know which file folders they are working with, saving all their design tokens and completed assets into a centralized system, so they can be easily found by the next team that needs to use them.
Cloud storage features make this easy to achieve. With cloud storage of tokens and assets, any team, anywhere in the world, can find the files they need. Of course, this still hinges on one factor: a standardized system of file naming and storage used by all teams and all team members.
3. Collaborate on design token management
The shared terminology discussed above is great for discussing collaborative projects and bringing together designer and developer roles with a shared language. But it needs to go further than this. It needs to be embedded into the design system itself.
This is achieved via the systematic use of design tokens. When the design team makes a decision on the layout or structure of the project, they can store this within the system as a design token. The token is a specific file that informs the development and final rendering of the project. Developers need to be able to access this token and immediately see how rendering should be applied.
For design token management, the shared language essentially bridges the gap between design and development. When the designer makes a decision and saves this as a token, they are already translating their own vision into a development component.
Designers can use pre-existing tokens already saved into the system, or they can create new tokens specific to this particular project. If developers want to query a specific design token with the design team, the designers will know immediately what is being discussed because the shared terminology is embedded into the system.
4. Support shared tasks with real-time collaborative tools
What we’ve discussed so far is considered collaboration, but it’s only a rudimentary form of collaboration. In the modern design and development landscape, teams need to work together effectively, not simply completing one task and handing it on to the next team, but operating side by side and in full communication.
Businesses can’t rely upon design and development teams sharing an office space. Instead, the operational structure is likely to be more spread out, with remote teams operating in different locations around the country, or even across international borders. This makes enterprise-level connectivity and collaboration two must-haves for teams working on a design project.
A high-quality design system will include collaborative features to some extent. Design tokens can be saved and stored via cloud structures, ready for easy access in remote locations, while token uploading and management will take place in real-time, supporting concurrent work on the project.
But to upgrade this concurrent work to collaborative work, teams will also need effective communication tools. Video collaboration tools and secure instant messaging features keep teams on the same page, building upon the foundation provided by the shared terminology and the stored design tokens.
5. Automate elements of asset design
Collaboration and communication are predominately manual features, with teams working together ‘face to face’ via digital connections. However, automation still has an important role to play.
Automation provides an element of autonomy to development teams as they carry out aspects of the design process themselves ahead of rendering. Effective collaboration depends upon this autonomy. Development teams can’t always wait to get the green light from design teams, as these designers may be busy working on other projects. Instead, dev teams need to be empowered to act with autonomy and decisiveness.
Design tokens are not one-off pieces of coding—they are files that are stored within the structure of the design system. This can accelerate the job of the designers, as they draw upon pre-existing tokens to ensure design consistency, but it can also assist developers at the same time. Developers can use these pre-stored tokens to complete their own simple design tasks, accelerating the path to development and deployment.
Designers and developers in harmony 🤝
It’s time for a conceptual shift when it comes to design and development. Designers and developers are not wholly separate entities, working with their own playbooks and best practices. They are two sides of the same coin, pursuing the same goals and objectives. With the right approach to collaboration and communication, supported by a highly effective design system, this unification is easy to achieve.
The result? Brand consistency across all products and assets, and a streamlined process of design and development. ■
🎨 Illustrations by Violetta Barsuk from Ouch!
✏️ About the author: Dorian Colin is the Brand Designer at Aircall, the cloud-based phone system designed with modern businesses in mind. Aircall seeks to empower businesses across a range of fields with connectivity solutions that suit their diverse needs.
Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
