Publix Design System

Design system and responsive components for web, iPad, Android, and iOS

4 Platforms

Web, iPad, Android, and iOS responsive components

100+ Components

Customer-facing components built for the design system

Publix E-commerce Project

Overview

Worked on the design system for Publix using Figma and Publix's private Figma plugin for data integration. I helped create responsive components across all platforms including web, iPad, Android, and iOS. My work focused on building components for all customer-facing projects while establishing a robust token and variable system.

My Role

Design Systems Designer and Product Designer

  • Design system development in Figma
  • Integration with Publix's private Figma plugin for data
  • Responsive component creation for web, iPad, Android, and iOS
  • Customer-facing project component development
  • Token and variable system setup

Challenge

Publix needed a unified design system that could scale across multiple platforms—web, iPad, Android, and iOS—while maintaining consistency across all customer-facing experiences. The system needed to integrate with their proprietary data plugin and support a growing product ecosystem.

Solution

Built a comprehensive design system with:

  • Responsive components that adapt seamlessly across web, iPad, Android, and iOS
  • Integration with Publix's private Figma plugin for real data
  • Reusable components for all customer-facing projects
  • Organized tokens and variables for consistent styling

Catering

I worked on the Catering experience to improve how users choose stores and create their orders. The redesign focused on reducing user errors when selecting the wrong store location, streamlining the order creation flow, and creating a more intuitive experience overall.

  • Improved store selection flow to reduce user mistakes
  • Streamlined the order creation process
  • Enhanced the overall catering experience

Impact

  • Increased online orders by 55%
  • Improved checkout completion rate by 38%
  • Reduced order time by 30%
  • Enhanced customer satisfaction scores

Tools & Technologies

Figma Publix Figma Plugin Design Tokens Variables