iOS component library & spec file
Overview
DocuSign recently launched their new design system, named INK. Because iOS had just undergone a redesign the previous year, Android became the first mobile product to adopt INK. The mobile design team collaborated with a representative from the design systems team to develop the Android Figma library consisting of foundations, components, tokens, and guidelines. However, iOS required a separate Figma library to support the existing app and help the team transition to INK in the future.
My contribution
Lead creator Design Documenter
The team
3 × product designers
Year
2022-2023
Process
Tight timescale
While the majority of our development resources were dedicated to updating Android to INK, I took the lead in creating a separate Figma library for iOS to support the existing app until we transitioned to INK. This initiative significantly streamlined the design team's ability to deliver iOS features more efficiently. In one month, I successfully built a new Figma library from scratch, complete with a spec file of production-ready designs, enabling us to meet our commitments for the new fiscal year.
Specifications
Figma Library
- The library needed to scale across multiple device sizes.
- The components and tokens needed to be consistent with web, but also be platform-specific.
- The library needed to be easily updatable for transitioning to INK.
Spec File
- Document every workflow screen by screen and states of the app for multiple device sizes.
- Utilize our mobile library components, tokens, and auto layout so it can adapt to updates to the design system.
- Be easily maintained when new features or updates to screens are made.
Creating the library
I developed a comprehensive mobile component library consisting of foundations, components, tokens, signature elements, and standard iOS components tailored to suit our iOS app's needs. Each component was meticulously aligned with our existing design system tokens, ensuring seamless updatability and consistency throughout the interface.
Spec file
The spec file comprised of production-ready end-to-end flows of our product features, including edge cases, error states, and device sizes. Each screen within these flows utilized auto-layout and integrated with the iOS library components and tokens. This allowed the team to make updates to a component in the library which would then update the spec file automatically saving time and effort in maintaining consistency across the board.
Updating the library to INK
During our transition to INK, I began the process of updating the foundations of INK in three distinct phases: colors, icons, and typography. In the initial phase, I updated all color tokens to the INK color palette. In phase 2 I replaced our icon components with the corresponding INK icons. Finally in phase three I updated the font to our new DS Indigo typeface and consolidated our font style tokens from 24 down to 16.
Throughout each phase, the team would utilized the spec file to conduct thorough audits of the app, ensuring seamless integration of INK components and tokens. Once the transition was complete, the library and spec file served as the definitive point of reference for our developers and QA team, ensuring consistency and accuracy across the board.
After I completed updating the foundations this allowed the team to update all the iOS components and guidelines to fully support INK and integrate into the Android library.
Outcome
The iOS mobile library and spec file streamlined the mobile design team's process, consistency, and delivery of new app features.
The library helped enable us to seamlessly transition to INK by updating components and tokens and automatically reflect the changes in the spec file without needing to maintain it manually.
The library and spec file served as a centralized source of truth for developers, providing the latest tokens, styles, and assisting with QA processes.