106 Facing the world

Steps to be taken After finalizing the Figma files, interaction templates, and illustrations and before using them properly in design screens we had to introduce our design system to other Company departments. The design system contained Atoms and components in a single file, the Icon library in a separate file that helped us to share it with the graphic design and marketing team freely, and design templates inside each platform design file to make it easier for each squad to use, edit and create.

Handing off, and more

Handing off the design system is not a one-time task it was a repetitive and ongoing task that has its ways and methods, after introducing the whole package we had to find the best way to hand off each type.

for atoms and components, we used Supernova because it's the most dynamic way of linking figma components with its documentation and Github/Gitlab repo link sending a notification in case of any update happened from the design system team (if automatic updates are turned on) with features that help some frameworks to turn this atoms and components into code format.

For Tokens, we exported them using Supernova in the first step of developing our design system, and we started to code every component one by one when it is relevant to the current sprint flows.

Icon libraries were converted to icon font to help in case updating and editing easily without hassling the development team to focus on a task that can be made without their efforts.

Templates were made to help the design team to keep updated with each other and to fasten their design process without looking back on old designs.

exp. list of cards that have been used in 6 screens, instead of creating each one individually we create the template once and take the instance inside to those 6 screens. so we don't look back on them each time we have to edit or add any new feature.

Documenting Design system

Every component and change had to be documented correctly to ensure that everyone on the team and newcomers in the future find the appropriate documents to know the history of every piece.

As an example of this method, we had 4 main points in every component that cover every detail.

• Anatomy: to explain every single element inside this component

• Properties: to explain Variants, States, and back changes relevant to it

• Layout & Spacing: covers padding, alignment, and vertical & horizontal sizing.

Sample Link from our design system Link

After these 3 main points, we had another automated area with the help of Supernova that display release notes for every component individually to help us at the product team know the history of these component changes and to help the tech team if something changed and where the changes are.?

Preparing the design system for multi-platform support

Creating a design system that supports multi-platform integration is essential for maintaining a consistent and seamless user experience. By establishing two levels of components - foundational and platform-specific - companies can strike a balance between consistency and customization. Through cross-platform design reviews, comprehensive documentation, and shared component libraries, maintaining consistency across platforms becomes achievable.

Embracing an iterative process with feedback loops ensures that the design system remains adaptive and continuously improves

Understanding Multi-Platform Design Challenges

Designing for multiple platforms entails accommodating diverse screen sizes, interaction patterns, and technical constraints. These challenges can lead to inconsistencies and disjointed user experiences if not properly addressed. Establishing a seamless design system to adapt to different platforms mitigates these issues, ensuring a cohesive and harmonious user experience.

Defining Design System Levels

To create a design system that caters to multiple platforms, it's crucial to establish levels of components that allow for flexibility and customization while maintaining consistency. Our company implemented a two-tier approach: foundational components and platform-specific components.

1. Foundational Components: These components form the core of the design system and are platform-agnostic. They include fundamental elements such as typography, colors, spacing, and icons that remain consistent across all platforms. Foundational components serve as the building blocks for higher-level components, providing a solid foundation for a cohesive user experience.
2. Platform-Specific Components: While foundational components ensure consistency, platform-specific components address the unique requirements and constraints of each platform. These components include navigation menus, input fields, buttons, and other interface elements tailored to the specific platform's design guidelines and interaction patterns. Platform-specific components allow for customization without sacrificing consistency, enabling users to feel at home on their respective platforms.

Ensuring Cross-Platform Consistency

While platform-specific components add flexibility, maintaining consistency across platforms is paramount. To achieve this, we established guidelines and workflows that promote collaboration and ensure updates are applied uniformly across all platforms. Key strategies include:

1. Cross-Platform Design Reviews: Conducting regular design reviews with representatives from each platform ensures that changes or updates to the design system are evaluated from a cross-platform perspective. This collaborative approach enables the identification of potential conflicts or inconsistencies and fosters a shared understanding of design decisions.
2. Shared Component Libraries: Utilizing shared component libraries, such as design system software or plugins, allows designers and developers across different platforms to access and implement components seamlessly. These libraries streamline the integration process and ensure that updates are propagated uniformly across all platforms.

Iterative Improvement and Feedback Loops

A design system is a living entity that requires constant evaluation and improvement.

Regular feedback loops from designers, developers, and end-users play a vital role in identifying areas for refinement and enhancement. By actively seeking feedback and iteratively evolving the design system, we ensure that it remains adaptable and effective in serving the needs of multiple platforms.