Block Design System
Crafting a scalable design system to unify experiences, elevate the brand, and enable faster innovation.
Senior Product Designer, DS Manager
Saas- no code/low code
Web
July 2024 - Sept 2024
8 (5 Product designers, 2 FE Engineers, Head of design)
Overview
Built and scaled the Block Design System in Figma, driving adoption across design and engineering, and elevating the UI to a modern, cohesive, and user-friendly standard.
Where to Start?
I began by auditing existing design foundations at Builder.ai—reviewing component documentation, analyzing Figma library structures, and observing how designers and engineers accessed and used them. Immersing in design reviews and workflows helped me identify gaps and set clear priorities for evolving the Block Design System.
Research & Observation
Inconsistent UI Library
Multiple button styles, navigation patterns, and form inputs existed across products due to siloed design practices. This resulted in visual inconsistency, redundant component creation, and fragmented user experiences (e.g., data tables, modals).
Outdated Visual Style
Poor color contrast fails WCAG 2.1, print-optimized typography disrupts responsive design, and skeuomorphic elements feel dated. User feedback highlights a perception of being “outdated” compared to competitors (42%).
Lack of Modern, Tokenized Architecture
The system relies on hard-coded values instead of semantic tokens and Figma variables, limiting theming flexibility, efficiency, and long-term scalability.
Competitor Analysis
To understand where our design system needed to evolve, I analyzed both competitor and industry-leading systems, including Google’s Material Design, IBM’s Carbon, and Salesforce’s Lightning Design System. This helped uncover best practices in component architecture, documentation, and governance.
The research showed a clear pattern: successful design systems balance structure and flexibility through clear component hierarchies, robust documentation, defined governance processes, and seamless design-to-development integration.
Methodology
Following a similar model to Brad Frost’s Atomic Design, we modeled our Figma structure similarly and built all smaller components into its own library. Pages inside of the Atomic Figma were semantically named to also match the internal repository site, creating parity between Figma and code.
Setting it Up
Foundations
I began by centralizing colors, typography, and atomic components into a single Figma source file. As the design team grew, the previous “source of truth” had become fragmented across multiple files, leading to inconsistencies.
By partnering with Engineering and aligning with our internal code repository, designers could confidently apply the correct colors and tokens—resulting in faster reviews and smoother developer handoffs.
Starting with these foundational elements proved to be the most strategic choice, since they cascade across every product and domain. It also enabled me to run an accessibility audit early on, identifying quick wins that improved usability and strengthened compliance
Building components
Every design system builders dream is building a ton of components, but the hard part is how to make them intuitively composable while still maintaining some parity between code and our Figma design tool. Although Figma does a LOT to streamline code and design, sometimes it is not always 1-1 transferrable.
Anatomy & spacing
Component set
Variables
Future-Proofing Through Tokenization
To modernize our design system, we adopted Figma variables and enforced the use of semantic tokens. Rather than relying on hard-coded values like #6200EA for our primary purple, we defined descriptive, purpose-driven names such as Surface-primary. This shift to tokenization not only improved clarity for designers and engineers but also unlocked scalable theming across products, reduced maintenance overhead, and established a future-proof foundation for evolving the system.
Exploring Theming with Figma Variables
We ran a POC to demonstrate how Figma variables and semantic tokens can power scalable theming beyond basic color and typography changes. This showcased the potential of a tokenized system to deliver significant visual flexibility across products.
The POC demonstrated how a tokenized approach enables designers to:
Rapidly prototype diverse visual styles
Easily create multiple brand and product themes
Maintain consistency through centralized tokens
Reduce effort in updating and scaling themes
The demo highlighted both the efficiency and creative possibilities of tokenized theming, reinforcing our commitment to building a future-proof design system.
Design System Impact: Before & After
To showcase the impact of our new design system, we applied it to a key product interface. The comparison highlights the transformation from the previous design (“before”) to the updated system-driven design (“after”), demonstrating improvements in consistency, usability, and visual clarity.
Before
After
The Results
Implementing the new design system delivered measurable improvements across product teams and the business:
Consistency at Scale → Unified colors, typography, and components reduced design drift and ensured a cohesive brand experience across all products.
Faster Design & Development → Clear guidelines, semantic tokens, and reusable assets cut design review time and accelerated developer handoff.
Improved Accessibility → Early audits of foundational elements surfaced key fixes, enabling us to meet accessibility standards.
Cross-Team Alignment → A single source of truth in Figma and code empowered designers and engineers to collaborate more efficiently.
Future-Ready Foundation → Tokenization and variable-driven architecture unlocked theming flexibility, setting us up to support multiple markets, clients, and brand evolutions.
Overall, the design system has evolved from a tactical solution into a strategic asset—driving brand integrity, product quality, and business growth.
© 2025 Ankur Kushwaha