SHOPSYS
SHOPSYS
SHOPSYS
WHAT ?
The task was to build a flexible design system for e‑commerce sites using Figma, enabling visual customization across multiple brands—without changing functionality. I collaborated as part of a small team, contributing significantly to the design system’s structure and logic to ensure seamless brand-specific theming.
The task was to build a flexible design system for e‑commerce sites using Figma, enabling visual customization across multiple brands—without changing functionality. I collaborated as part of a small team, contributing significantly to the design system’s structure and logic to ensure seamless brand-specific theming.
WHY ?
WHY ?
Design systems with clear, semantic components and variables are vital for making visual updates quick and reliable. For ShopSys, the goal was to allow easy brand customization—colors, spacing, typography—across different e-shops by simply tweaking foundational “atoms.” A well-structured system ensures that changing those base elements propagates consistently, saving time and reducing errors—both in design and in the handoff to code.
Design systems with clear, semantic components and variables are vital for making visual updates quick and reliable. For ShopSys, the goal was to allow easy brand customization—colors, spacing, typography—across different e-shops by simply tweaking foundational “atoms.” A well-structured system ensures that changing those base elements propagates consistently, saving time and reducing errors—both in design and in the handoff to code.
This approach also strengthens collaboration between designers and developers by giving both sides a single source of truth, reducing miscommunication and ensuring that visual changes could be implemented with confidence and precision.
This approach also strengthens collaboration between designers and developers by giving both sides a single source of truth, reducing miscommunication and ensuring that visual changes could be implemented with confidence and precision.
HOW ?
HOW ?
We structured and developed the design system in Figma from the ground up, defining scalable variables such as colors, text styles, and spacing as the core building blocks. Components were organized hierarchically—from atoms to molecules to organisms—to ensure modular consistency and easy maintenance. The system was built to be developer-friendly, making updates via design tokens efficient and reliable. Brand-specific customization was also integrated so that adjusting a few base variables, like color or typography, would automatically cascade through all UI elements and instantly update the entire system.
We structured and developed the design system in Figma from the ground up, defining scalable variables such as colors, text styles, and spacing as the core building blocks. Components were organized hierarchically—from atoms to molecules to organisms—to ensure modular consistency and easy maintenance. The system was built to be developer-friendly, making updates via design tokens efficient and reliable. Brand-specific customization was also integrated so that adjusting a few base variables, like color or typography, would automatically cascade through all UI elements and instantly update the entire system.
IMPACT: The result was a highly scalable, efficient design system that empowered rapid rebranding across multiple e-shops. By centralizing visual definitions and promoting variable-based thinking, I delivered long-term value through accelerated design-to-code workflows and reduced manual work for designers and developers alike.
IMPACT: The result was a highly scalable, efficient design system that empowered rapid rebranding across multiple e-shops. By centralizing visual definitions and promoting variable-based thinking, I delivered long-term value through accelerated design-to-code workflows and reduced manual work for designers and developers alike.
SCROLL