menu
First Apartment: E-Commerce UX & Scalable Figma Design System
First Apartment: E-Commerce UX & Scalable Figma Design System
First Apartment: E-Commerce UX & Scalable Figma Design System
Building an end-to-end Figma design system—from multi-tier color tokens and atomic components to responsive, light/dark mode page templates and hi-fi prototypes.
Building an end-to-end Figma design system—from multi-tier color tokens and atomic components to responsive, light/dark mode page templates and hi-fi prototypes.
Role: UX Designer
Project Type: E-Commerce UX & Design System Case Study
Timeline: August 2026 - October 2026
Tools: Figma, Figma Variables, Auto Layout, Interactive Components, Atomic Design Theory
Role: UX Designer
Project Type: E-Commerce UX & Design System Case Study
Timeline: August 2026 - October 2026
Tools: Figma, Figma Variables, Auto Layout, Interactive Components, Atomic Design Theory
Overview
Overview
Overview
The goal of First Apartment was to design an end-to-end, responsive e-commerce platform grounded in a robust, multi-tiered Figma design system. The project aimed to combine a nostalgic "late-90s domestic" aesthetic with modern, production-ready UI architecture.
Scenario-Driven E-Commerce UX: Shift from traditional product-type navigationto real-life milestone scenarios that offer bundled or individual item purchases.
Scalable Token Architecture: Build a 3-tier variable system in Figma to support seamless global styling and Light/Dark mode switching.
Atomic Component & Template Library: Leverage Auto Layout, component variants, and Atomic Design theory to construct flexible, responsive page templates and high-fidelity interactive prototypes.
The goal of First Apartment was to design an end-to-end, responsive e-commerce platform grounded in a robust, multi-tiered Figma design system. The project aimed to combine a nostalgic "late-90s domestic" aesthetic with modern, production-ready UI architecture.
Scenario-Driven E-Commerce UX: Shift from traditional product-type navigationto real-life milestone scenarios that offer bundled or individual item purchases.
Scalable Token Architecture: Build a 3-tier variable system in Figma to support seamless global styling and Light/Dark mode switching.
Atomic Component & Template Library: Leverage Auto Layout, component variants, and Atomic Design theory to construct flexible, responsive page templates and high-fidelity interactive prototypes.
Research & Aesthetic Direction
Research & Aesthetic Direction
Research & Aesthetic Direction
Scenario-Based Shopping Experience:
Customers can purchase curated room packages or extract individual items directly out of nostalgic catalog scenes:
First Kitchen: cookware, dish sets, dish towels
First Laundry Room: hampers, starter detergents, sorting bins
First Night Alone: cozy lighting, initial bedding, essential tools
Scenario-Based Shopping Experience:
Customers can purchase curated room packages or extract individual items directly out of nostalgic catalog scenes:
First Kitchen: cookware, dish sets, dish towels
First Laundry Room: hampers, starter detergents, sorting bins
First Night Alone: cozy lighting, initial bedding, essential tools
Scenario-Based Shopping Experience:
Customers can purchase curated room packages or extract individual items directly out of nostalgic catalog scenes:
First Kitchen: cookware, dish sets, dish towels
First Laundry Room: hampers, starter detergents, sorting bins
First Night Alone: cozy lighting, initial bedding, essential tools
"Late-90s Domestic" Visual Language:
Defined a warm, nostalgic brand identity rooted in late-1990s domestic catalog media:
Extracted Palette: Curated a cozy domestic palette spanning soft neutral surface fills to vibrant accent swatches.
"Late-90s Domestic" Visual Language:
Defined a warm, nostalgic brand identity rooted in late-1990s domestic catalog media:
Extracted Palette: Curated a cozy domestic palette spanning soft neutral surface fills to vibrant accent swatches.
Design System Architecture & UX Execution
Design System Architecture & UX Execution
Design System Architecture & UX Execution
Phase 1 - Style Variables (Typography & Colors):
Implemented a scalable, industry-standard variable system in Figma to completely decouple visual styles from UI logic:
Typography System: Created a 32-variable typography system controlling font styles, size scales, and proportional line heights (1.3x for headings, 1.5x for body copy) across Desktop, Tablet, and Mobile viewports.
3-Tier Color Tokens: Decoupled raw colors from functional styles using Primitives, Semantics, and component-level Tokens.
Phase 1 - Style Variables (Typography & Colors):
Implemented a scalable, industry-standard variable system in Figma to completely decouple visual styles from UI logic:
Typography System: Created a 32-variable typography system controlling font styles, size scales, and proportional line heights (1.3x for headings, 1.5x for body copy) across Desktop, Tablet, and Mobile viewports.
3-Tier Color Tokens: Decoupled raw colors from functional styles using Primitives, Semantics, and component-level Tokens.
Phase 2 - Components & Variants:
Engineered a flexible component library using Auto Layout and linked design tokens:
Button Component Matrix: Created interactive component sets covering 3 visual tiers (Primary, Secondary, Tertiary), 5 states (Default, Hover, Selected, Focused, Disabled), and 4 icon layouts across 3 sizes.
E-Commerce Pattern Components: Built reusable variants for dynamic product cards, item accordions, coupon banners, favorite drawers, and customization modals utilizing padding variables and radius tokens for fluid responsiveness.
Phase 2 - Components & Variants:
Engineered a flexible component library using Auto Layout and linked design tokens:
Button Component Matrix: Created interactive component sets covering 3 visual tiers (Primary, Secondary, Tertiary), 5 states (Default, Hover, Selected, Focused, Disabled), and 4 icon layouts across 3 sizes.
E-Commerce Pattern Components: Built reusable variants for dynamic product cards, item accordions, coupon banners, favorite drawers, and customization modals utilizing padding variables and radius tokens for fluid responsiveness.
Phase 3 - Responsive Atomic Templates:
Constructed reusable page layouts built on Atomic Design Theory to bridge atomic components and full page assemblies:
Light & Dark Mode Support: Leveraged semantic surface and text tokens so templates seamlessly toggle between Light and Dark modes without broken contrast ratios.
Fluid Layout Rules: Applied
min-widthandmax-widthAuto Layout constraints on header, footer, product grid, and section templates to ensure automatic content reflow across breakpoints.
Phase 3 - Responsive Atomic Templates:
Constructed reusable page layouts built on Atomic Design Theory to bridge atomic components and full page assemblies:
Light & Dark Mode Support: Leveraged semantic surface and text tokens so templates seamlessly toggle between Light and Dark modes without broken contrast ratios.
Fluid Layout Rules: Applied
min-widthandmax-widthAuto Layout constraints on header, footer, product grid, and section templates to ensure automatic content reflow across breakpoints.
Phase 4 (Final) - High-Fidelity Prototypes:
Assembled full high-fidelity e-commerce prototypes combining all system assets—tokens, component variants, and atomic templates:
Delivered fully interactive desktop, table, and mobile prototype flows, allowing users to browse scenario bundles, view item details in pop-up modals, toggle theme modes, and customize room bundles.
Phase 4 (Final) - High-Fidelity Prototypes:
Assembled full high-fidelity e-commerce prototypes combining all system assets—tokens, component variants, and atomic templates:
Delivered fully interactive desktop, table, and mobile prototype flows, allowing users to browse scenario bundles, view item details in pop-up modals, toggle theme modes, and customize room bundles.
