Iconography Sync
I’ve created a figma plugin for design system teams that allows design and development to be closer in sync, allowing for a fairly optimized and automated process for syncing our design assets to our code assets through GitHub. Designers have control over which of their designed assets gets output from the tooling, developers have control over what gets checked into the codebase, site, and packages.
Responsibilities:
project coordination, user research, design, development, user testing, delivery and presentation
Designers: Darian Rosebrook
Research: Darian Rosebrook
Developers: Darian Rosebrook, Caleb Nance
Scope of impact: Design System Maintainers
Utilizing bidirectional sync with GitHub based on versioning, design and development now have a dual turn key moment for releasing new changes in things like iconography, design tokens, and illustrations. Designers have the ability to see the status of their work, and developers have visibility into what changes are made instead of reaching blindly into the google folder to grab all icons and hope that nothing breaks again
By bridging the gap between design and code here, our design system team can now create, publish, and release new iconography from Figma to the team's codebase the same day. Much better than the 6-8 week turnaround due to meetings, backlogging tickets, and working around release schedules.
From the push of a button, and the approving pull request of a developer, our Figma library, our Web, Android, and iOS libraries, and our documentation site are all updated at the same time.
Main Goals
Addressing the issue
Visual discrepancies
Because of our manual process for updating icons, iconography was often different across platforms due to legacy icons not being removed, being incorrectly imported, or altogether
Naming differences
Icons were notoriously named different things across different platforms, leading to references to the wrong icons, or icons under the wrong reference
Legacy versions
If iconography was transferred by hand, finding old versions, or managing updates could easily be overlooked when making changes to the platform libraries
Addressing the workflow
I met with each of the platform teams and design system team to understand the process of going from Figma to code.
Redundant processes
These icons were being optimized individually before being added to the folder, only to be re-optimized and added into each project by the consuming platform teams
Simplifying our process by removing redundancy
By taking stock of all the steps along the way of having design to platform code, we found the crucial points where these designs still require someone to initiate or approve the process
Me and one of my team members interviewed all leads of each platform (Web, Android, and iOS) to get the exact optimizations and implementation details they use when getting these icons into the project.
This showed that each project was doing nearly the exact same things:
Creating tickets (3rd ticket for the same icon after design has started)
Optimization and Code translation: Taking the output svg and converting it or optimizing it after it had already been converted and optimized by design
Awaiting approval from an engineer to implement an icon change. 3rd change of hands during this process.
Icons also were not being checked for existing icons or name clashes before adding
Transitioning to automation
Automating the flow
Once the key moments were defined, we were able to take the laborious time-heavy moments of exporting, optimizing, and importing iconography and hand that off to a custom tool built to handle eBay's current needs
Introducing versioning
By intelligently connecting Figma to GitHub we're in a much better space to understand and track the changes across icons while still being native to the user's experience
Working together with Design Technology I had been given the green light for the development direction and for the design direction by our Icon designer.
Results
I would further work with our designer on more specific details like how to address optimization details across iconography
These optimization steps could be brought into the same process behind the scenes of the designer's output, meaning the designer just had to verify the design still looked correct and then forward on the icon.
The overall process when finally hooked up would enable our icon design process to reduce almost 30 steps across the whole process down to 6
4 for design:
Create the Figma component holding the icon
Update the Figma documentation
Select the icon in the plugin
Publish changes
2 for developers:
Accept the created pull request from the plugin for the library
Pull the changes down to their local machine