Design Systems: From Figma Components to AI-Assisted Prototypes

Date	2024–2026
Role	Design Systems, UX/UI, Tooling
Tags	Design Systems Figma Component Libraries Design Tokens AI-Assisted Prototyping

Scaling Rapid7's design system from Figma components into coded libraries, platform patterns and AI-assisted prototyping workflows. The work focused on making UI more consistent, customisable and production-ready across a large cybersecurity platform.

• Helped evolve Rapid7's design system across Figma, code, tokens and platform patterns.
• Defined token foundations to support theming, visual consistency and implementation.
• Supported the shift from fully custom components to a customised component library.
• Created AI-assisted prototyping foundations to help generated output stay aligned to product standards.

Rapid7's design system needed to support a wide range of products, workflows and acquired experiences while still feeling like one coherent platform. The system needed to improve consistency across complex cybersecurity products, give teams stronger foundations to build from, and help the platform evolve without fragmenting across teams, workflows and acquired experiences.

The challenge

The design system started with familiar foundations: components, tokens and shared visual standards. But as the platform grew, the challenge became bigger than maintaining a component library.

The system needed to support dense product workflows, multiple product areas, engineering implementation, accessibility expectations, acquired experiences and a growing need for faster prototyping. It had to be flexible enough for different teams, but structured enough to protect consistency across the platform.

Foundation and token architecture

A major part of the work was defining a token architecture that could carry Rapid7's visual language across design and code. The token structure created a shared language for colour, typography, spacing, states and theming, helping visual decisions move more cleanly from Figma into production.

This made the system more adaptable. Instead of treating styling as fixed values inside individual components, the token structure created a more scalable foundation for theming, customisation and future visual updates.

From in-house components to a customised library

As the system matured, Rapid7 moved away from a fully in-house component approach and towards wrapping an established component library with Rapid7's own design language.

This created a more practical foundation for scale. The product could benefit from the reliability, accessibility and engineering maturity of an established framework, while still using Rapid7's token structure and visual standards to make the experience feel specific to the platform.

The work involved deep customisation, refinement and review to make sure the library could support real product needs rather than feeling like an off-the-shelf system.

Governance and product fit

As adoption grew, the work became less about individual components and more about governance, scale and product fit.

Components needed to work across many different product areas, support dense cybersecurity workflows and remain usable as new teams and acquired experiences entered the platform. This required ongoing refinement, documentation, review and customisation to make sure the system could flex without fragmenting.

The goal was not to make every product surface identical. It was to create a shared foundation that helped teams design and build consistently while still solving their own workflow-specific problems.

From components to platform patterns

Over time, the design system matured into a broader platform foundation. Alongside components and tokens, it began to include reusable templates, documented patterns and experience-level guidance.

This helped teams move away from solving the same layout and interaction problems in slightly different ways. Instead, designers and engineers could work from shared standards for common product scenarios, making experiences more predictable across the platform.

AI-assisted prototyping

More recently, the role of the design system shifted again with AI-assisted prototyping.

As AI became more useful for generating coded prototypes, the design system became an important quality guardrail. Without the right foundations, AI-generated output can quickly become inconsistent, generic or disconnected from product standards.

I created a prototyping setup that brought together the design system, product packages and guidance needed to support AI-assisted prototype work. This included rules and steering to help generated output stay aligned to Rapid7's components, patterns and visual standards.

The goal was not just to create prototypes faster. It was to create better prototypes: more consistent, more recognisable and closer to the quality expected from the platform.

Outcome

The design system evolved from a set of Figma components into a broader foundation for design, engineering, governance and AI-assisted workflows.

It helped teams work from shared standards, improved consistency across complex cybersecurity experiences and created a stronger bridge between design and code. As AI-assisted workflows became more capable, the system also became a way to protect quality and reduce inconsistency in generated prototypes.

My contribution

• Token architecture
• Figma component libraries
• Component library customisation
• Pattern documentation
• Design-system governance
• AI-assisted prototyping setup

Key outcomes

• Stronger consistency across product surfaces
• Better Figma-to-code alignment
• Reusable templates and platform patterns
• More reliable AI-generated prototypes

Reflection

This project showed how a design system can become more than a component library. At scale, it becomes the operating layer for how a product looks, behaves and evolves.

The most valuable design systems do not just provide reusable parts. They create shared standards, reduce repeated decisions, support implementation and help teams move faster without lowering the quality of the product.