International Labour Organization

The International Labour Organization (ILO) faced significant inconsistencies in how UI components were designed and implemented across platforms, stemming from outdated, fragmented, and poorly organized design system documentation in Figma. This lack of structure and clarity created inefficiencies, made it difficult for designers and developers to work in alignment, and hindered scalability and quality control across products.

I led the effort to audit, restructure, and modernize the ILO’s design system documentation. My specific tasks included:

• Conducting a detailed audit of existing Figma files to identify inconsistencies and redundancies.
• Restructuring and optimizing documentation, reorganizing pages for better usability and adopting Figma’s advanced features like variables, themes, and component properties to improve maintainability and scalability.
• Creating a comprehensive “getting started” guide for designers and developers to establish a clear foundation and encourage consistent usage of the system.
• Performing rigorous quality control by cross-referencing Figma templates with Storybook, identifying and resolving discrepancies to ensure design-development alignment.
• Maintaining and updating the design system library, integrating new component requests, and refining developer-focused documentation to improve implementation accuracy on future websites.
• Preparing detailed handover documentation to support long-term adoption and maintenance by internal teams.

We transformed the ILO’s fragmented design system into a clear, cohesive, and scalable asset that now serves as a shared source of truth for designers and developers. The restructured documentation and “getting started” guide made it easy for teams to understand and adopt standards, while the integration of Figma’s advanced features improved the system’s flexibility and efficiency.

By meticulously aligning Figma with Storybook and refining developer guides, we reduced inconsistencies across platforms and established a workflow that fosters collaboration, accuracy, and scalability. The ongoing maintenance of the design system ensures that the ILO can continue to deliver a consistent and high-quality user experience across its digital platforms, supporting its global mission with a robust design foundation.

Thanks to Inês Gomes for allowing me to participate in this very special project on improving the ILO design system.

The ILO’s design system went from fragmented files to a dependable shared tool.

• One source of truth for designers and developers, replacing outdated and scattered Figma documentation.
• Figma and Storybook aligned, with discrepancies found and fixed, so what is designed matches what is built.
• A “getting started” guide that makes onboarding to the system simple for both disciplines.
• Variables, themes and component properties that make the library easier to maintain and scale.
• Handover documentation that lets internal teams own and evolve the system long term.