Collaborative Approach
Collaborative Approach
I believe design systems achieve the greatest impact when built collaboratively. I prioritize structured, ongoing communication with design, development, and product teams to ensure the system meets organizational needs while upholding consistency, quality, and scalability.
I believe design systems achieve the greatest impact when built collaboratively. I prioritize structured, ongoing communication with design, development, and product teams to ensure the system meets organizational needs while upholding consistency, quality, and scalability.
Process
My design system process in five steps
A systematic approach to creating cohesive, scalable design systems that serve both users and development teams.
1. Audit & Define Needs
I research user pain points, analyze existing UI inconsistencies, and collaborate with designers to identify required components. My goal is to align on a single source of truth for styles and interactions.
2. Design & Prototype
Create high-fidelity UI components in Figma using Auto Layout, variants, component properties, and design tokens to ensure scalable and consistent design systems. Leverage Claude and MCP integrations to connect with Figma projects, audit components, and review accessibility, enabling efficient design validation and system governance.
3. Document Rules
I create clear guidelines so everyone uses components correctly:
When and how to use each component.
Accessibility standards (contrast, focus states).
Spacing, edge cases, and "do’s/don’ts."
Shared documentation (Confluence & Notion)
Create a log table to compare Figma vs Storybook (component name, priority, designer, eng, links, notes and status).
4. Handoff & Collaborate
I work closely with devs to ensure smooth implementation:
- Annotate designs (props, breakpoints).
- Ensure feasibility and discuss edge cases.
5. Implementation
Once the component is built, I check it in Storybook to:
- Pixel-check for visual accuracy.
- Test interactions (does it match my prototype?).
Process
My design system process in five steps
A systematic approach to creating cohesive, scalable design systems that serve both users and development teams.
1. Audit & Define Needs
I research user pain points, analyze existing UI inconsistencies, and collaborate with designers to identify required components. My goal is to align on a single source of truth for styles and interactions.
2. Design & Prototype
Create high-fidelity UI components in Figma using Auto Layout, variants, component properties, and design tokens to ensure scalable and consistent design systems. Leverage Claude and MCP integrations to connect with Figma projects, audit components, and review accessibility, enabling efficient design validation and system governance.
3. Document Rules
I create clear guidelines so everyone uses components correctly:
When and how to use each component.
Accessibility standards (contrast, focus states).
Spacing, edge cases, and "do’s/don’ts."
Shared documentation (Confluence & Notion)
Create a log table to compare Figma vs Storybook (component name, priority, designer, eng, links, notes and status).
4. Handoff & Collaborate
I work closely with devs to ensure smooth implementation:
- Annotate designs (props, breakpoints).
- Ensure feasibility and discuss edge cases.
5. Implementation
Once the component is built, I check it in Storybook to:
- Pixel-check for visual accuracy.
- Test interactions (does it match my prototype?).
Process
My design system process in five steps
A systematic approach to creating cohesive, scalable design systems that serve both users and development teams.
1. Audit & Define Needs
I research user pain points, analyze existing UI inconsistencies, and collaborate with designers to identify required components. My goal is to align on a single source of truth for styles and interactions.
2. Design & Prototype
Create high-fidelity UI components and prototypes in Figma using Auto Layout, variants, component properties, and design tokens to ensure scalable, consistent design systems. Use Claude with MCP to connect to Figma projects and support the design workflow.
3. Document Rules
I create clear guidelines so everyone uses components correctly:
When and how to use each component.
Accessibility standards (contrast, focus states).
Spacing, edge cases, and "do’s/don’ts."
Shared documentation (Confluence & Notion)
Create a log table to compare Figma vs Storybook (component name, priority, designer, eng, links, notes and status).
4. Handoff & Collaborate
I work closely with devs to ensure smooth implementation:
- Annotate designs (props, breakpoints).
- Ensure feasibility and discuss edge cases.
5. Implementation
Once the component is built, I check it in Storybook to:
- Pixel-check for visual accuracy.
- Test interactions (does it match my prototype?).