GEICO Design System

GEICO needed help migrating their existing design system from Sketch to Figma, optimizing it for Figma’s functionality, and reducing the time from component design update to code deploy.

Goals:

Create a comprehensive, flexible component library that works together in a responsive system
Reduce manual work for designers
Lower the component detachment rate

Role:
Design Systems Consultant

Discovery Workshop (Onsite)

Through a series of in person design and tech workshops, we worked with the client to discover current processes, identify pain points, and and prioritize the scope for the duration of the client engagement.

Foundational Elements

We began by migrating color styles, text styles, shadows, and spacing rules from Sketch to Figma. From there, we established design tokens and a new responsive spacing system.

Component Library

In Sketch, components were built individually for different viewport sizes, content types, and modes (light/dark). With migrating to Figma we leveraged component properties, variants, and design tokens to create fewer, more flexible components.

Documentation

After the migration was complete, we developed guidelines for the GEICO designers to follow for future component enhancements and net new components. These included naming conventions, best practices, and troubleshooting guidelines.

Design to Dev Pipeline

Ultimately, through efficiencies created in Figma as well as a Storybook implementation, we created processes to decrease the time between a component design update and a code deploy.