The problem

• Documentation lagged the library. Writing each component page by hand took hours, so Confluence fell behind Figma.
• Overlapping components. List Box and List Item solved the same problem in two ways.
• Accessibility varied by component. ARIA patterns and focus behavior were not documented the same way everywhere.

My role

Senior Product Designer. I own documentation and component work for Sullivan, working with the design system team and the accessibility specialist.

Key decisions

1. An AI pipeline from Figma to Confluence.
   A workflow with the Figma MCP and Atlassian Rovo MCP servers turns library components into structured Confluence pages (anatomy, sizing, states, accessibility) linked back to Figma.
2. One list component, two sizes.
   List Box and List Item unified into one set with Small and Large variants, then rolled into Select Option, Dropdown Menu and Predictive Search through a Figma branch and design review.
3. Accessibility as part of the spec.
   Every component page defines its ARIA pattern and focus management, for example role=”dialog” and aria-disabled in the Notification Center.
4. Teach the process, not just the output.
   Knowledge transfer so the team can run the pipeline themselves.

Impact

56+ component pages documented, around 70 hours saved and about 83% less time per page. Documentation now points straight to the Figma component it describes, and the team runs the pipeline on its own.

Reflection

The fastest way to improve a design system was to automate the boring part. Once documentation stopped costing hours, the conversations moved to what actually matters: which components should exist and how they should behave.