Platform
Platform
Platform
Web
Deliverables
Deliverables
Deliverables
Design System
Tools
Tools
Tools
Figma
Figma
Figma
E-commerce design system creation
E-commerce design system creation
E-commerce design system creation
The project focused on creating a cohesive Design System for an e-commerce website. Tasks included developing a component library, integrating variables, and ensuring responsive design. Screens then needed to be transferred from Miro to Figma using the Design System.
The project focused on creating a cohesive Design System for an e-commerce website. Tasks included developing a component library, integrating variables, and ensuring responsive design. Screens then needed to be transferred from Miro to Figma using the Design System.
My approach
My approach
The objective was to establish a comprehensive Design System for an e-commerce website, facilitating consistency, efficiency, and scalability in design and development processes. The goal is to transfer client's screens seamlessly from Miro to Figma while integrating predefined variables, components, and responsive design principles to ensure a cohesive and user-friendly experience across all devices.
The objective was to establish a comprehensive Design System for an e-commerce website, facilitating consistency, efficiency, and scalability in design and development processes. The goal is to transfer client's screens seamlessly from Miro to Figma while integrating predefined variables, components, and responsive design principles to ensure a cohesive and user-friendly experience across all devices.
Design
Design
Design system development
Design system development
Design system development
Created a robust Design System encompassing typography, color palette, spacing, layout grids, and reusable components tailored specifically for the e-commerce website using the client's branding kit, fostering consistency and efficiency in design iterations.
Created a robust Design System encompassing typography, color palette, spacing, layout grids, and reusable components tailored specifically for the e-commerce website using the client's branding kit, fostering consistency and efficiency in design iterations.
Variables implementation
Variables implementation
Variables implementation
Integrated variables, such as font sizes, colors, and spacing values, into the Design System and component library within Figma, allowing for efficient design adjustments and ensuring coherence across all screens and interactions.
Integrated variables, such as font sizes, colors, and spacing values, into the Design System and component library within Figma, allowing for efficient design adjustments and ensuring coherence across all screens and interactions.
Components library construction
Components library construction
Components library construction
Developed a comprehensive library of reusable components within Figma, including buttons, cards, navigation bars, and filters, adhering to established design principles and brand guidelines, streamlining the design process and promoting design consistency.
Developed a comprehensive library of reusable components within Figma, including buttons, cards, navigation bars, and filters, adhering to established design principles and brand guidelines, streamlining the design process and promoting design consistency.
Responsive design integration
Responsive design integration
Responsive design integration
Implemented responsive design principles within the Design System and Figma files, ensuring that screens adapt seamlessly to various screen sizes and devices, optimizing the user experience for desktop, tablet, and mobile users.
Implemented responsive design principles within the Design System and Figma files, ensuring that screens adapt seamlessly to various screen sizes and devices, optimizing the user experience for desktop, tablet, and mobile users.
Miro to Figma transfer
Miro to Figma transfer
Miro to Figma transfer
Successfully transferred screens from Miro to Figma while maintaining the integrity of the Design System and components, leveraging established variables and components to expedite the transition process and maintain design consistency.
Successfully transferred screens from Miro to Figma while maintaining the integrity of the Design System and components, leveraging established variables and components to expedite the transition process and maintain design consistency.
Client's feedback
〞
Thank you for the great work. You have a great feeling for details, work fast and communication/iterations work smoothly.
Upwork Client
CEO
〞
Client's feedback
〞
Thank you for the great work. You have a great feeling for details, work fast and communication/iterations work smoothly.
Upwork Client
CEO
〞
Client's feedback
〞
Thank you for the great work. You have a great feeling for details, work fast and communication/iterations work smoothly.
Upwork Client
CEO
〞
