Introduction

Sligro Foodgroup, a leading foodservice company in the Netherlands and Belgium, aimed to streamline operations and enhance user experience across its various brands. To achieve this, we embarked on developing a comprehensive design system in Figma, designed to meet the diverse needs of Sligro's business units while ensuring consistent brand identity across all platforms.

Team Composition and Evolution

The project began with a small, dedicated team comprising a frontend architect and myself. As the project progressed, the team expanded to include a product owner, an analyst, and two designers specializing in UX and UI. Initially, our team operated remotely, but as the scope of work grew, we transitioned to a hybrid model. This approach allowed us to combine the flexibility of remote work with the benefits of in-person collaboration at Sligro headquarters in the Netherlands and Belgium.

Design Process

Our design process was meticulously structured into three main phases to ensure clarity, efficiency, and alignment among all stakeholders.

Phase 1: Groundwork and Goal Setting

We began by laying a strong foundation:

• Define Goals: We clearly articulated why we needed a design system, the specific problems it would solve, and how we would measure its success.

• Stakeholder Alignment: We ensured that all stakeholders understood the value and purpose of the design system. This included obtaining buy-in from leadership by highlighting the long-term benefits.

Phase 2: Inventory and Analysis

We conducted a comprehensive audit of Sligro's existing digital assets:

• Cataloging Elements: We gathered and documented all design elements, including colors, typography, icons, components, and patterns.

• Identifying Inconsistencies: We identified areas of redundancy and disjointed design elements, which highlighted the need for a cohesive design system.

Phase 3: Building and Implementation

With a clear understanding of our existing landscape, we moved into the creation phase:

• Define Foundations: We established essential visual and functional elements such as accessibility standards, color palettes, typography, and iconography.

• Create Components: We built reusable components and documented them in Figma. This included defining variables and styles to ensure consistency.

• Organize the Library: We structured our Figma library to be easily accessible and usable by all team members, facilitating a single source of truth for design assets.
  

Implementation of Design Tokens

Design tokens are fundamental to maintaining consistency across various products and platforms, especially in a multibrand environment like Sligro Foodgroup. Our approach to implementing design tokens focused on efficiency, scalability, and clarity.

Understanding Design Tokens

Design tokens encapsulate design decisions in a format that can be used across different platforms and brands. They standardize properties like colors, typography, and spacing, ensuring consistency and scalability.

Types of Design Tokens

We categorized our design tokens into three main types:

1. Primitive Tokens: Core design values such as colors and spacing.

2. Semantic Tokens: Contextual tokens guiding the application of design values.

3. Component Tokens: Tokens specific to individual UI components.

Naming Conventions for a Multi-Brand System

To avoid confusion and ensure easy maintenance, we used a clear and consistent naming convention:

• Brand Prefix: Distinguish tokens belonging to different brands.

• Category: Specify the type of design property (e.g., color, typography).

• Sub-Category: Further categorize within the type (e.g., primary, secondary).

• State/Variant: Indicate any states or variants (e.g., hover, active).

  Building the Design Token System

• Define Primitive Tokens: We established the foundational elements separately for each brand.

• Create Semantic Tokens: These tokens provided context and guided how and where the design values should be applied.

• Develop Component Tokens: Tailored for specific UI components, these tokens defined properties unique to those components.

Implementation and Distribution

After defining the tokens, we transformed them into formats required by various platforms (e.g., CSS variables for web, Swift for iOS, XML for Android). This ensured proper distribution and utilization across different platforms.

Consistency and Maintenance

• Documentation: We maintained comprehensive documentation of all tokens, including usage guidelines.

• Tools: Utilized tools like Style Dictionary and Tokens Studio to automate the transformation and distribution of tokens.

• Updates: Ensured updates to tokens were reflected across all platforms simultaneously.

Benefits of a Tokenized Design System

• Consistency: Ensures uniform design properties across multiple brands.

• Efficiency: Streamlines the design and development process.

• Scalability: Easily adapts to the growing number of brands and products.

• Collaboration: Aligns designers and developers on token usage and structure.

• Automation: Enhances efficiency in managing and distributing tokens.

Outcome

Our structured approach resulted in a robust, multibrand, tokenized design system that met the diverse needs of Sligro Foodgroup’s business units while maintaining a consistent brand identity. The design system streamlined the design process, enhanced user experience, and improved operational efficiency across all platforms.

Conclusion

This project of setting-up the design system at Sligro Foodgroup underscores the importance of a well-structured, collaborative approach to design. By aligning goals, leveraging cross-functional expertise we created a scalable and efficient design system that serves the diverse needs of the organization while ensuring brand consistency.