First Person invited me back to help redesign the Omnicell homepage. The client wanted to add a news section featuring events and updates. As a prerequisite, I was allowed a few days to organize the Figma project and design library.
First Person had migrated the Omnicell project while I was away. They had imported my Sketch library, but they didn’t update it to work as a Figma library and only used it as a reference.
As a result, designers were creating their own design systems for each design file. This was causing inconsistencies and fragmentation throughout the project.
The first step in building a design library is to establish text and color styles so every element that follows can refer back to a single source.
I only had a few days to work on the library, so I decided it would be best to start fresh.
I migrated style values from the imported Sketch library into a new shared library. Then I searched through the feature files, looking for updates or additions, and consolidated any styles that would be universal to the overall project.
The new Figma library consists of modular shared libraries. Modular libraries are smaller and easier to update in small bursts. They can also be hidden individually to reduce clutter in the Assets panel.
At the foundation are Styles and Brand Assets. This is a lightweight library that all other libraries and projects would refer to for text, color, & other styles.
I also created an Image Assets project to be a dumping ground for large image files that often weigh down library files.
My time was limited, so I focused on creating components for commonly used assets like icons, ornaments, buttons, and text blocks. They would essentially be the atoms of an atomic design library.
Inspired by Figma's best practices, I created a Helper Components library. These are non-production, internal components for organizing designs:
I also added an Introduction Kit for new designers. Each library has a “Start Here” page with instances of this documentation. The kit explains how to use Figma shared libraries and how it's all organized.
Omnicell: Figma libraryModular design library
Obvious: MVP designHigh-fidelity design specifications
Obvious: wireframesMulti-device strategy for a solo developer
OmnicellSketch design library & developing interactive kiosks
Starsky RoboticsUX research & design for a remote-driving system
Disney Movies AnywhereMaterial Design & Development
Star Wars APIAndroid design & code exercise
Fitness goals appProduct design exercise
DayframeAutomated photo frame for social media
HD WidgetsTop 10 Android app 2011-2014
App StatsPlay Store app tracking & metrics
CloudskipperFree music player
Flash / FlexBack when the web was fun
Elemental DesignOld school rave flyer designs