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
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
Results
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
The changes used to take a whole quarter to become fully available to developers. Now, it takes as much time as this 1 minute video here
