OVERVIEW
After the PLUS design system team completed a full revamp, each designer was responsible for updating their assigned pages with the new UI components. My role involved replacing legacy elements in Figma with updated, responsive components, ensuring design consistency across breakpoints, and preparing clean, developer-ready files for smooth implementation.
MY ROLE
UX Designer
TEAM
Individual Project
TIMELINE
May 2024 (1 Week)
Upgrade in progress…🚀
Before & After Design Facelift
CONTEXT
Updated design systems ready for rollout.
PLUS design system team revamped the entire design system and each designer was tasked with updating designated pages using the updated UI components, ensuring responsiveness of each frame, and handoff to developers for implementation.
PROCESS
Out with the Old UI
First, I selected the appropriate UI components from the design system and tailored their variables based on the documentation and the specific content of the page.
Example Updated UI: Title, Form, Button
Variables Of Component Set In Figma
Mark the distance
Then, I ensured the spacing between UI components was aligned with the local variables and established spacing conventions.
Make things responsive!
Finally, I adhered to the internal responsive design guidelines, using a 3-step checker to ensure adaptability across different screen sizes and breakpoints.
