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.
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.
Figma 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.
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.
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.
The 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.
The mobile library allowed the design team to have consistency and parody between platforms.
This project was a fast-paced, month-long initiative (spanning two sprints), and upon reflection, I recognized the complexity of building a library from the ground up that would support multiple platforms. In addition to developing the library itself, creating detailed documentation and spec file for every app flow that utilized each component required careful planning and coordination. To ensure the project stayed on track, I realized the importance of setting clear deliverables and planning out the timeline for each week.
As the lead, I delegated specific features to individual designers on the team. We adopted a collaborative approach, agreeing not to sign off on any component or flow until it had been reviewed and approved by all team members. This process ensured alignment and consistency across the project.
Overall, the experience was both challenging and rewarding, as it provided an opportunity to deepen my understanding of creating, maintaining, and documenting a design library. I particularly enjoyed taking the lead on an initiative that ultimately streamlined our design and development process, enabling us to build features more efficiently.
