Senior Design System Designer

Brief Bio

I’m a senior design system designer with 10+ years in UX, specializing in building scalable, accessible, and developer-friendly design systems that bridge design and code.

Project Highlights

Enterprise Design System for the Automatization industry - scaled to 20+ teams.

The design system at Rockwell Automation began its journey in 2017 as a forward-thinking, technology-driven initiative, primarily focused on extending Angular Material by incorporating features based on the specific needs and feedback of adopters. In 2021, recognizing the growing importance of a cohesive visual and functional experience, a dedicated design team was officially established with the strategic goal of creating comprehensive and user-friendly documentation for all system components. At that time, I was engaged as a Software Engineer on the collaborative team responsible for developing the Angular toolkit, where I was deeply involved in enhancing the project. In September 2022, an exciting new opportunity arose for a Senior Design System Designer position, prompting me to apply and pursue this role. I officially transitioned into the position in February 2023, where I now leverage my dual expertise in engineering and design to contribute to the ongoing evolution and improvement of the design system.

Highlights of My Role as a Senior Design System Designer:

  • Solving Inconsistencies
    Identified and addressed design and implementation inconsistencies across products by establishing unified tokens, components, and usage guidelines.

  • System Design & Foundations
    Defined scalable design foundations including semantic color palettes, design tokens, typography, spacing, and a responsive grid system—ensuring visual consistency and accessibility.

  • Components & Patterns
    Designed and documented core UI components with blueprint specs, token mapping, accessibility guidelines, and clearly defined usage patterns.

  • Documentation
    Authored comprehensive documentation in Zeroheight, covering component anatomy, usage best practices, accessibility standards, and visual examples to support adoption across teams.

  • Collaboration
    Acted as the main point of contact for design system adopters—supporting design teams with guidance, facilitating contributions, mentoring junior designers, and leading design-dev communication.

  • Leading
    Led cross-functional initiatives, including the integration of 3rd-party libraries (e.g., AG Grid), grid/tables standardization, and design oversight for the development team (4 developers, 2 testers), including Jira planning and UX reviews.

Solving Inconsistencies

The design team at Rockwell Automation was struggling with inconsistent UI components in Figma and in tech stack. I was brought in to create a centralized design system to improve consistency and speed. Some of our adopters were reporting some issues and inconsistencies and were asking questions. 

Discovery & Research

Because our adopters were asking questions about the components we decided to do the research to understand more the problems that our adopters are facing. 

I looked at Figma analytics and identified the most used components to start with and analytics also helped me to see which teams were using those components. This helped us to prepare and do qualitative research and ask concrete teams. We prepared some questions like:

“What is the most concern/obstacle that you have using the design system?”

The most common answer was: “Inconsistency between design and implementation”

“What do you think might help to solve this concern/obstacle?”

  • “to have the same components in Figma and in code”

  • “to have a same naming convention for properties”

I started with an audit of the existing UI kit in Figma and web components in Angular. There were reviewed 60+ components and identified and documented differences and inconsistencies.

Proposal & Solution

Based on the findings we decided to try to align the Figma kit with the tech stack to have the same properties and naming convention. There were also some bugs and inconsistencies in the tech stack and we created stories for the dev team to fix those issues. We also updated the documentation to match the latest version of the components.

Design System & Foundations

🎨 Color System & Theming

To ensure visual consistency and accessibility, I helped define a comprehensive color system and scalable theming structure.

  • Created semantic color palettes (e.g. color-success, color-warning, color-error) and applied them across UI components.

  • Conducted contrast testing for all semantic colors to ensure WCAG AA compliance, especially for text/background and status indicators.

  • Enabled light/dark theme support through tokenized values, making the system adaptable and future-proof.

Tools used: Figma Tokens plugin, Contrast plugin, internal theming framework

🧩 Iconography Management

I led the refinement and management of iconography as a key part of the design system.

  • Reviewed icon contributions and updated icons to meet consistency, clarity, and pixel-perfect standards.

  • Created Figma components for each icon, added metadata (description, keywords) to improve searchability, and tokenized icons for theme flexibility.

  • Prepared icon files for developers to convert into font icons, ensuring a smooth designer-dev handoff.

Outcome: Reduced duplicate icons by 40%, improved searchability and consistency.

♿ Accessibility for Status Colors

A big focus was on making status feedback colors accessible (e.g., success, error, warning).

  • Used tool WebAIM contrast checkers to evaluate each color.

  • Adjusted background and text color pairings to meet at least AA standards, while maintaining visual distinction.

🧮 AG Grid Token Integration

AG Grid (a 3rd-party data table library) required custom theming aligned with our system.

  • Audited AG Grid’s token hooks and identified matching tokens from our side (e.g., borders, cell padding, background).

  • Defined a token pairing strategy, mapping AG Grid properties to our internal token names, ensuring visual harmony.

  • Created AG Grid Figma kit with our themes.

🧬 Design Tokens Implementation

To scale the system, I built a structured token system applied both in design and code.

  • Defined foundational tokens: color, spacing, typography, border radius, shadows.

  • Applied tokens across Figma components and design blueprints.

  • Used tools like Tokens Studio to ensure easy syncing between design and dev environments.

  • Created detailed token documentation with usage examples, naming conventions, and theming strategy.

Result: 90% of components are fully tokenized and ready for theming or future scaling.

Components & Patterns

I created a robust library of UI components in Figma, each backed by detailed blueprints, design tokens, and usage guidelines to ensure consistent implementation across products.

  • Designed multiple core UI components in Figma (e.g., buttons, inputs, dropdowns, banners, cards).

  • Created component blueprints to support developer handoff, including all states, interactions, specs, and responsive behavior.

  • Wrote design guidelines explaining:

    • What each component is for

    • When to use / not use it

    • Accessibility considerations (e.g. focus states, labels, minimum touch targets)

    • Token mappings (e.g. color-bg-primary, spacing-md)

Outcome

  • Accelerated dev/design alignment

  • Reduced inconsistencies

  • Made the system easier to onboard and scale

  • Helped adopters on how to use each component

Components & Patterns

I was responsible for designing, documenting, and systematizing multiple UI components in Figma — not just in terms of visuals, but also interaction, accessibility, and implementation. I introduced a scalable blueprint system to streamline developer handoff and created robust component documentation in Zeroheight to promote adoption and consistency.

Blueprint Strategy (My Initiative)

I introduced the concept of blueprints — detailed design specs for each component in Figma using a structured branching strategy. This allowed designers to iterate without affecting the main library, while developers always had a clear source of truth for specs.

Component Creation

Built numerous reusable components in Figma (e.g., buttons, inputs, banners, filters) with tokenized properties (color, spacing, radius, typography) and interactive variants for every state.

Component Documentation (Zeroheight)

Authored comprehensive component guides that included:

  • Purpose and usage
    Do’s & Don’ts with visual examples
    Variants and responsive behavior

  • Component anatomy with token labels (e.g., spacing-md, color-bg-info)
    Accessibility specs (e.g., contrast compliance: AA/AAA)
    Full technical specs: dimensions, spacing, typography, and token structure

This documentation ensured designers and developers had a shared language and understanding — making the system more scalable and adoption-ready.

Driving Cross-Team Collaboration, Contribution & Mentorship

Beyond designing and documenting the system, I played a key role in fostering collaboration, guiding adoption, and mentoring teammates — ensuring that the system wasn’t just built, but embraced and scaled effectively across teams.

Close Team Collaboration

I worked closely with our core design system team (4 designers + 1 engineer) to define foundations, review contributions, and align across Figma and development workflows.

Adopter Support

I acted as the primary contact for product designers using the system — answering design questions, clarifying tokens and components, and helping them adapt system elements to their product context.

Leading Communication Channels

I managed communication via Teams (whatever applies), ensuring questions were answered quickly, issues were tracked, and feedback loops were established with adopters.

Contribution Support

I helped designers contribute new components, patterns, and icons by guiding them through naming conventions, token usage, accessibility, and documentation standards.

Research Collaboration

Supported our team in conducting UX research around component usage and design consistency, helping inform system improvements.

Mentorship

Mentored junior designers on our team — offering guidance on best practices in design systems, Figma structuring, and accessibility.

This collaborative approach made our system more resilient, more usable, and better aligned with real-world needs.

Leading System Implementation Across Development, Tools & Strategic Initiatives

In addition to designing and documenting the system, I also took ownership of key initiatives and acted as the design lead for our development squad. I bridge the gap between design, testing, and implementation — ensuring the system works not only in Figma but also in code.

Dev Team Leadership (4 Developers + 2 Testers)

  • Acted as the design lead for our dev team, helping with day-to-day design decisions and implementation reviews.

  • Conducted UX reviews to ensure components were implemented correctly and followed usability and accessibility standards.

  • Created and updated blueprints with detailed specs to support the team in building consistent UI.

  • Acted as a communication bridge between design and dev teams — translating complex requirements and questions both ways.

  • Took ownership of Jira story creation for design-related tickets — defining clear implementation details and acceptance criteria.

Initiative Leadership

  • Grid System Redesign:
    Leading the creation of a consistent grid system across the design system, ensuring visual alignment and responsive behavior across viewports.

  • 3rd-Party Library Integration:
    Leading the design and integration strategy for external libraries (e.g., AG Grid), defining token mappings, customizing themes, and ensuring consistency with our core system.

These initiatives ensured that the design system was not only scalable — but also practical, adopted, and developer-friendly.