Figma Design System for Ecommerce

Job ID: 40500470

Budget: €250 – €750 EUR

UX/UI Design in Figma for a Magento + SvelteKit Ecommerce
We are looking for a UX/UI designer with proven ecommerce experience to create a complete Figma design for a musical instruments online store.

The design will later be implemented in an existing prototype built with SvelteKit, TypeScript, TailwindCSS, and Magento GraphQL.

We already have a basic functional structure, an initial color palette, and a clear idea of the main sections.

Project Goal
Create a design system and the main public-facing screens for a modern, fast, and user-friendly ecommerce website

Technical Context
No coding is required, but the design must be created with a component-based frontend implementation in mind.

Scope
1. Home Page
Complete homepage design, including:

Full header
Main hero or slider
Featured category blocks
Featured product sections
Promo blocks
Trust blocks: shipping, returns, guarantees, customer support, etc.
Footer
2. Header and Navigation
Mobile and Desktop header
Main category navigation
Desktop megamenu
Mobile drawer menu
Search input
Search menu / search overlay
Account, wishlist, and cart icons
Toasts / visual notifications
Hover, active, focus, and disabled states where needed
Megamenu
Main categories
Subcategories
Optional banner or featured content area
Desktop behavior
Mobile adaptation or alternative
Mobile Drawer Menu
Category navigation
Sub-level navigation
Access to account, wishlist, cart.
Open and closed states
Overlay or dimmed background
3. Categories / PLP
Breadcrumbs
Category title and description
Subcategories, if applicable
Product grid
Mobile and Desktop filters
Sorting
View selector, if applicable
progressive loading
Empty results state
Loading / skeleton state
Basic error state
4. Product Grid and Product Card
Main image
Brand
Product name
Price
Previous price / discount, if applicable
Availability
Labels: new, sale, featured, etc.
Add to cart button
Wishlist button
Basic variants or options, if applicable
Hover, loading, disabled, and out-of-stock states
5. PDP / Product Detail Page
Image gallery
Main product image
Thumbnails
Product name
Brand
SKU or reference
Price
Availability
Quantity selector
Add to cart button
Wishlist
Shipping information
Financing or payment method information
Description
Specifications
Technical attributes
Related products
Recommended products
Reviews / rating
Out-of-stock state
Product with variants state, if applicable
6. Wishlist
List of saved products
Product card adapted for wishlist
Remove from wishlist action
Add to cart action
Empty state
7. Cart
Product list
Quantities
Remove product action
Update quantity action
Subtotal
Discounts / coupon code
Estimated shipping cost, if applicable
Total
Continue shopping button
Proceed to checkout button
Empty cart state
Toasts or update messages
8. Checkout
one-page checkout

Contact details
Shipping address
Shipping method
Payment method
Order summary
Validation errors
Loading state
Error state
Order confirmation
Clear and usable mobile adaptation
9. Contact Form
Form
Success message
Error message
Contact information
11. Footer
Corporate links
Customer support links
Featured Campaigns or sections
Newsletter
Social media
Payment methods
Legal information
Desktop and mobile versions
Expected Deliverables
The project must be delivered in Figma and include the following.

0. Desktop and Mobile Screens
Desktop
Mobile
A tablet version or clear responsive behavior guidelines will be considered a plus.

1. Basic Design System
Colors
Typography
Size scales
Spacing
Border radius
Shadows
Iconography
Button styles
Form styles
Card styles
Interactive states
2. Reusable Components
Buttons
Inputs
Selects
Checkboxes
Radio buttons
Badges
Toasts
Modals
Drawers
Product cards
Category cards
Header
Footer
Breadcrumbs
Tabs
Accordions
Pagination
Skeleton loaders
Empty states
Error states
Material We Will Provide
Initial color palette
Logo and brand assets
Basic structure of the current frontend
Screenshots or access to the existing prototype, if needed
Visual references from ecommerce websites we like
Category and navigation structure
Examples of real products
Specific business requirements
Desired Profile
We are looking for someone who can contribute UX/UI judgment, not just produce screens.

Proven ecommerce experience
Professional Figma experience
Ability to create design systems
Responsive design knowledge
Understanding of component-based frontend development
Ability to document design decisions
Portfolio with similar projects
When applying, please include:

Link to portfolio
Work methodology