This work was all about Design Systems
Three Brands and Three Design Systems
This project was especially significant to me, as it deepened my expertise in Design Systems.
​
When I joined VF, they were undergoing a major platform overhaul, migrating their Design Systems to Figma. This provided me with the opportunity to take a key role in designing the system itself.
​
During the migration, our small but efficient team meticulously built everything—from atoms and molecules to full components, culminating in high-fidelity examples for each page. We achieved this across three unique brands, ensuring consistency and responsiveness across mobile, tablet, and desktop screen sizes.
This was a team effort requiring a ton of communication. We would at minimum meet 1 hour a week. During these meetings we would discuss every aspect of our designs systems including:
​
-
Design Principles
-
Establish core principles that guide the design system’s development
-
-
Visual Design
-
Color Palette: Primary, secondary, and accent colors with accessibility in mind.
-
Typography: Font families, sizes, weights, line heights, and text spacing.
-
Iconography: Style, size, usage guidelines, and scalability.
-
Spacing and Layout: Grids, spacing units, and responsive breakpoints.
-
-
Components
-
Atoms and Molecules: Buttons, input fields, checkboxes, icons.
-
Organisms: Navigation bars, footers, forms.
-
Templates: Page layouts or section templates that combine multiple components.
-
High-Fidelity Examples: Demonstrate components in real-world scenarios.
-
-
Interaction Patterns
-
States: Hover, active, focused, disabled, error, and success states for components.
-
Transitions: Micro-interactions, loading spinners
-
Feedback and Notifications: Alerts, toasts, error messages, and validation cues.
-
-
Accessibility
-
Color Contrast: Ensure text and interactive elements meet WCAG guidelines.
-
Keyboard Navigation: Design for ease of use without a mouse.
-
Screen Reader Support: Ensure that the system is fully compatible with assistive technologies
-
-
Scalability
-
Responsive Design: Guidelines for different screen sizes, including mobile, tablet, and desktop.
-
Grid Systems: Flexible grid systems that work across various devices.
-
Component Flexibility: Allow components to adapt easily for future changes or new requirements.
-
-
Brand Consistency
-
Ensure that the design system aligns with the overall brand guidelines, tone of voice, and visual identity.
-
-
Documentation
-
Usage Guidelines: Clear instructions on when and how to use each component.
-
Best Practices: Recommendations for designing with the system.
-
Change Log: Record updates or changes to the design system.
-
-
Collaboration Tools
-
Version Control: How changes to the system are managed.
-
Dev Handoff: Figma Dev mode
-
Design Tokens: Variables for colors, typography, spacing, etc.
-
-
Governance and Maintenance
-
Ownership: Identify who maintains the system and how contributions are managed.
-
Feedback Process: How teams can suggest improvements or report issues.
-
Scalability Plan: Ensure the system can grow with the product as new features and elements are introduced.
-
Visuals
Here are examples of our white label product cards, along with detailed documentation on how to implement them. For interactive components, we also provide examples and annotations to clarify expected user behaviors.
In addition to the visual documentation, we utilized Dev Mode to annotate and include detailed specifications directly within the components themselves.
Here are additional visuals, showcasing the beauty of our Design System. It's inspiring to see the intricate patterns they form, knowing that every pixel reflects the thoughtful work and detail that went into its creation.
