Design Facelift
Crafting modernized, responsive, and developer-friendly Figma files
During my internship at PLUS, I revamped its outdated UI by applying a newly updated design system, incorporating components and local variables, ensuring responsiveness, and delivering detailed handoff documentation.
ROLE
UX Designer (Design Systems)
TEAM
Individual Project
DURATION
May 2024 (1 Week)
WHAT I DID
Design Systems
Responsive Design
Handoff Documentation
Upgrade In Progress...🚀
Before & After Design Facelift
CONTEXT
Updated Design System 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.
Design Systems Snippet: Component Documentation
Design Systems Snippet: Tokens & Variables
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 set in the design systems.
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.​
Internal Responsive Design 3-Step Checker
_gif.gif)
Final Responsive Deliverable (Example Screen)
FINAL DELIVERABLE
I documented all UI and spacing changes for quick front-end adoption.
Next Project 🌱 👉
