SPAN product front-end engineering teams were having issues implementing designs as specified. They were re-creating common components over-and-over while sometimes missing states and impeding accessibility. The challenges multiplied as they spread across the different products SPAN has built.
Using the design application Figma as the source of truth, SPAN built a seamless pipeline to Storybook—a UI development, testing, and documentation platform—where common UI components like buttons, input fields, dropdowns, switches, and more can live.
Now, SPAN engineers are able to copy usable, accessible code and paste it into their files where styling happens automatically. As the design system evolves, Storybook is easily kept up-to-date by exporting the latest changes from Figma.
This solution has reduced UI bugs by 90% (needs verification) and reduced the time it takes front-end engineers to build features by 50% (needs verification). Accessibility issues have been reduced by 80% (needs verification). The team now works faster and can release on a tighter schedule than ever.
