Crafting a design system with Figma, React & Storybook

• Conducted comprehensive UX audits to identify design inconsistencies and usability gaps.
• Worked closely with stakeholders and the design team to define the MVP for the Vulcan Design System.
• Developed a token-based visual language and themes in Figma.
• Contributed to the development of a React Component Library with automated versioning and testing.

As part of the product team, I conducted a detailed analysis of leading design systems such as Google’s Material Design and IBM’s Carbon. This analysis was aimed at extracting valuable insights and identifying industry best practices that could guide our development. These systems provided a wealth of inspiration and set a benchmark for our own design aspirations. With this foundation, we set out to define a focused set of features, aiming to deliver them within a stringent timeline to meet our project goals efficiently.

Core Workshops: I facilitated and participated in several workshops with the design team to carefully define the core principles of our design system. We focused on accessibility, localisation, interaction, and usability, prioritising these elements to guarantee our system's inclusivity and effectiveness. These principles were established as the foundation to guide all future development and ensure a cohesive user experience across our products.

Structure

Foundation Building: I focused on developing robust foundational elements that serve as the cornerstone for all subsequent design components. This included creating versatile colour palettes, defining a clear typography system, crafting consistent iconography, and establishing precise spacing guidelines. These elements are crucial for ensuring a cohesive and effective design system.

Implementation Strategy: I crafted a comprehensive set of design tokens in Figma that ensured consistent styling across all digital assets and platforms, crucial for maintaining brand integrity and design uniformity.

Extensive Documentation: I developed comprehensive documentation for each component in the library I designed, facilitating straightforward usage and customisation by all team members. This documentation is rich with practical examples and best-use scenarios, designed to facilitate optimal application and integration of design components across various projects. The primary aim was to secure strong buy-in from Alchemy's designers and developers, highlighting the crucial role of this design system in enhancing project outcomes and operational efficiency. Ensuring the design system's success was paramount, as it directly impacts the effectiveness and cohesion of our development efforts across the board.

Adaptive Design: I developed components using Figma’s powerful auto-layout and responsive resizing features to guarantee optimal usability across all device types.

Development Synchronisation: We chose Storybook.js as the platform for managing coded components, mirroring the asset management and configuration principles used in Figma. This synchronisation was vital for maintaining consistency between the design prototypes and the final coded components.

Collaboration with Development: I worked closely with the development lead to ensure that all components coded in Storybook were perfectly aligned with the designed components in Figma. This included detailed handoffs of design tokens, behavior specifications, and guidelines to ensure that the developers could replicate the exact design intent in the coded environment, making Storybook an integral tool in our design-led product strategy.

Theming and Customization: Due to Alchemy's collaborations with multiple brand partners, it was essential to customize the look and feel of our design system to accommodate various theming requirements without the need to maintain separate design files. We achieved this flexibility through the strategic implementation of design tokens. This approach allows us to easily adjust and apply different themes across our design system, ensuring both consistency and brand-specific customization while minimizing maintenance overhead.