From fragmented handoffs to an AI-powered component lifecycle. Connecting Design, Development, Quality, and Documentation in a single, traceable workflow.
challenge.
As Hexa scaled to 70+ components and 50+ adopting squads across 29+ markets, every library update passed through Design, Development, Quality, and Documentation. But the lifecycle lived across disconnected tools: Slack requests, Figma files, Jira tickets, and manual doc updates. There was no single view of component status, no automation between stages, and no traceability when something went wrong.
Designers and engineers manually re-entered Figma specs into tickets and code. Development, QA, and documentation ran as separate workstreams with no shared context. The Hexa squad became a bottleneck for every component update, and squads couldn't self-serve without central team capacity.
Teams needed a way to move faster without losing quality, oversight, or alignment with the design system.
how we solved.
We designed Agentic Workflow, an AI-powered product that automates Hexa's component lifecycle from Figma intake through spec analysis, code generation, quality review, documentation, and final publish.
The workflow connects four AI agents (Analysis, Development, Quality, Documentation) with human review gates at every stage. Users paste a Figma URL, AI extracts structured specs (properties, variants, states, tokens, accessibility), and reviewers validate before code ships. A kanban dashboard shows every component in flight. An activity log records every action for full traceability.
Designed in Figma using Hexa components. Documentation outputs connect to Hexa's live documentation product. Development and Quality stages are in pilot (in progress).
results.
Designed an end-to-end workflow with 6 stages and 4 AI agents. Kanban dashboard provides portfolio-level visibility across all components in flight. AI spec extraction from Figma replaces manual re-entry. Documentation auto-generated to Storybook and live docs. Full activity log traceability per component. Reduced dependency on central squad capacity for library updates. Pilot in progress for Development and Quality stages.
team.
Design Manager: Doug Lazarini
Product Designer: João Gomes
activities.
Workflow Design
Visual Design
Design Systems
DesignOps
AI Agent
Vibe-coding
Documentation
Figma MCP
context.
The Company
This project was developed at BEES, AB InBev's digital ecosystem, a global environment where the Hexa Design System supports 50+ product squads across 29+ markets. Hexa is organizational infrastructure: 70+ components for Web, iOS, and Android, adopted by 2,000+ internal designers and engineers daily.
My Role
I led the Agentic Workflow product from vision through high-fidelity design. That included product vision, information architecture, UI design, the six-stage lifecycle, review gate model, and traceability via activity logging. I defined every workflow screen (kanban dashboard, context intake, AI analysis review, documentation agent) and shaped how human reviewers interact with AI-generated output at each stage.
Duration
2025–2026, from problem definition and workflow architecture through high-fidelity design and pilot stages (Development and Quality in progress).
Rationale
When 50+ squads depend on a design system, the component lifecycle can't live in Slack threads and manual handoffs. Agentic Workflow treats the lifecycle as a product: structured intake, AI-accelerated generation, human review at every gate, and full traceability. It scales library maintenance without linear growth in central team capacity.
process.
Product-Led Workflow Design
Rather than automating isolated steps, we designed an end-to-end pipeline with a clear sequence:
Problem definition: Map the fragmented lifecycle, identify handoff friction and bottleneck points
Workflow architecture: Define 6 stages, 4 AI agents, 3 human review gates
Information architecture: Kanban dashboard + component stepper + analysis tabs + activity log
Visual design: Full UI in Figma using Hexa components
Pilot & iterate: Test with real components through Development and Quality stages (in progress)
This approach balances AI acceleration with human oversight, and visibility with traceability.
discovery.
Problem Understanding
The discovery process included:
Lifecycle mapping: Documented current flow from Figma spec to published component across all platforms
Handoff friction audit: Identified where context was lost between Design, Dev, QA, and Docs
Bottleneck analysis: Measured Hexa squad capacity vs. component update demand from 50+ squads
Tool fragmentation review: Cataloged Slack, Figma, Jira, and manual doc tools used at each stage
Challenge Identified: Fragmented Lifecycle at Global Scale
When component updates don't flow through a unified pipeline, the design system team becomes the bottleneck:
No structured intake: Requests lost in Slack with no status tracking
Manual spec interpretation: Properties, variants, and tokens re-entered by hand
Disconnected workstreams: Development, QA, and documentation with no shared context
No traceability: No audit trail for who approved what and when
Central squad dependency: Every library update required Hexa team capacity
proposed solution.
AI Agentic Workflow
An AI-powered component lifecycle product that connects Design, Development, Quality, and Documentation in a single, traceable workflow.
Key Features:
Kanban dashboard: Portfolio view of every component across Input, Spec review, Development, Quality review, and Documentation stages
Figma-first intake: Paste a documentation URL; AI extracts structured specs automatically
AI spec analysis: Properties, variants, states, tokens, nested components, interactions, auto layout, accessibility
Human review gates: Approve or refine at Spec review, Development, Quality review, and Final review
Code generation: Platform-specific output for Web, iOS, and Android (pilot in progress)
Documentation agent: Auto-generates dev docs (Storybook) and design docs (live documentation)
Activity log: Full traceability of every action, user, and stage transition
The platform transforms a fragmented process into an intelligent, scalable, and traceable workflow that accelerates library evolution..
The Opportunity
Hexa needed a workflow that would:
Automate spec extraction from Figma, eliminating manual re-entry
Connect Development, QA, and Documentation in one pipeline with shared context
Provide portfolio-level visibility via kanban dashboard
Keep humans in the loop with review gates at every stage
Log every action for traceability and audit
Reduce dependency on central squad capacity for routine library updates
design.
High-Fidelity Screens
In this phase, the goal was to define the full Agentic Workflow experience in Figma: dashboard, workflow stepper, AI analysis review, and documentation agent, before pilot testing.
High-Fidelity Screens
Created detailed designs for key surfaces:
pilot.
Workflow Pilot With Real Components
In this phase, the goal is to validate the workflow with real components through Development and Quality stages and measure cycle time improvement.
Pilot Scope
Testing the full pipeline with selected components from Hexa Core library:
Completed: Context intake, AI spec analysis, Documentation agent output
In progress: Development code generation, Quality review automation
Planned: Final publish integration with Figma library and code repository
Early Signal
AI spec extraction accurately captures properties, variants, states, and tokens from Figma documentation URLs
Documentation agent completes dev and design docs with Storybook and live doc links
Activity log provides full audit trail for pilot component workflows
Kanban dashboard adopted by Hexa core team for component status tracking
Areas in Progress
Development agent pilot with real Web, iOS, and Android components (in progress)
Quality review automation and test standards (in progress)
Final publish step integration with Figma library and code repo
Cycle time measurement across full lifecycle
conclusion.
When the component lifecycle doesn't scale, neither does the design system.
Agentic Workflow represents more than automation. It's a product decision to treat the component lifecycle as infrastructure that 50+ squads depend on daily. By connecting Figma intake, AI analysis, code generation, quality review, and documentation in one traceable pipeline, we created a foundation that accelerates library evolution without linear growth in central team capacity.
The workflow was designed in Figma using Hexa components, proving the system works for the tools that maintain it. As Development and Quality pilots complete and final publish integrates with libraries and repositories, this pipeline will keep Hexa aligned across 50+ squads globally.
thanks for reading.
I hope you enjoyed this case overview. While most of the project details are protected by a non-disclosure agreement (NDA), I'd be happy to discuss my role and contributions further in a live meeting. Check the contacts below and feel free to reach out.