Design System Rebuild
Design System Rebuild
Design System Rebuild
Design System Rebuild
Design System Rebuild
Importing, rebuiling, enhancing, and expanding the design system from Adobe XD to Figma.
Importing, rebuiling, enhancing, and expanding the design system from Adobe XD to Figma.
Importing, rebuiling, enhancing, and expanding the design system from Adobe XD to Figma.
Importing, rebuiling, enhancing, and expanding the design system from Adobe XD to Figma.
My primary responsibilities included transferring components from Adobe XD to Figma, creating both old and new components and styles, organizing the Design System, and ensuring its maintenance over time.
Client:
AT&T Business Digital Experience
My Role:
Product Designer
Year:
2023
THE PROBLEM
THE PROBLEM
Transitioning the Design System from Adobe XD to Figma required a comprehensive rebuild for improved organization and functionality.
Transitioning the Design System from Adobe XD to Figma required a comprehensive rebuild for improved organization and functionality.
The transfer of the Design System from Adobe XD to Figma necessitated significant changes. To ensure a seamless migration, we had to rebuild and redesign the entire system. This process involved not only re-creating existing components but also improving their organization and functionality. Our goal was to develop new, fully responsive components that would streamline the design workflow and enhance the team's efficiency. By addressing these challenges, we aimed to create a more robust and user-friendly Design System in Figma.
The transfer of the Design System from Adobe XD to Figma necessitated significant changes. To ensure a seamless migration, we had to rebuild and redesign the entire system. This process involved not only re-creating existing components but also improving their organization and functionality. Our goal was to develop new, fully responsive components that would streamline the design workflow and enhance the team's efficiency. By addressing these challenges, we aimed to create a more robust and user-friendly Design System in Figma.
THE PROCESS
THE PROCESS
Organization
Organization
The first priority was establishing the Design System's organization and structure. The Mid Market pod had separate development teams for different sectors: "Wireline" and "Upper Funnel" used AEM developers, while "Wireless" used Azure developers, requiring different components for each team. We organized the Design System into:
Global Styles: Universal styles for all teams
Azure: Components for the Azure environment
AEM: Components for the AEM environment
To simplify access, we initially organized all components on one Figma page, making it easy for everyone, including newcomers, to find what they needed.
The first priority was establishing the Design System's organization and structure. The Mid Market pod had separate development teams for different sectors: "Wireline" and "Upper Funnel" used AEM developers, while "Wireless" used Azure developers, requiring different components for each team. We organized the Design System into:
Global Styles: Universal styles for all teams
Azure: Components for the Azure environment
AEM: Components for the AEM environment
To simplify access, we initially organized all components on one Figma page, making it easy for everyone, including newcomers, to find what they needed.
The Build
The Build
We began by organizing the structure and identifying key components from the old Design System, then transferred and developed them into the "base" design system.
Since most of the team was new to Figma, I created an interactive guide covering best practices for creating components. It included tips on using auto layout, creating responsive and customizable components, and navigating Figma tools.
The goal was to keep the design system dynamic, so I included the guide to help the team consistently add and update components.
We began by organizing the structure and identifying key components from the old Design System, then transferred and developed them into the "base" design system.
Since most of the team was new to Figma, I created an interactive guide covering best practices for creating components. It included tips on using auto layout, creating responsive and customizable components, and navigating Figma tools.
The goal was to keep the design system dynamic, so I included the guide to help the team consistently add and update components.
Additional Components
Additional Components
After creating the base components, we reviewed the existing design/live pages and identified additional components commonly used but missing from the previous Design System. We added these components to ensure they would be available for future use.
After creating the base components, we reviewed the existing design/live pages and identified additional components commonly used but missing from the previous Design System. We added these components to ensure they would be available for future use.
Finalize & Publish
Finalize & Publish
The Design System we created had over 300 customized, responsive styles and components. This made the team's design process easier, faster, and more efficient, resulting in consistent and improved solutions for the client.
The Design System we created had over 300 customized, responsive styles and components. This made the team's design process easier, faster, and more efficient, resulting in consistent and improved solutions for the client.
FINAL SCREENS
FINAL SCREENS
