Butterfly Network is transforming patient assessment and streamlining the diagnostic process through handheld point-of-care ultrasound technology. While the company highly values quality design, their lack of a unified design system and component library led to increased load on designers, longer design timelines and inconsistencies across Butterfly’s product ecosystem.

Project Meta

design system
component library
product audit
design ops


Agency: Atomic Health
Sr. UX Designer, Design Ops Lead


September 2021 – March 2022


Project Lead: Liz Hixon
Project Manager: Erin Ziebart
Product Designer, Design Ops: Liz Hixon
Additional: Victoria Macia


I created an extensive and scalable component library from Butterfly’s range of digital products, guided decision-making for duplicate components, implemented component usage documentation and led discussions about design system governance. In addition to standard library styles and components such as colors, effects, icons, buttons, forms, tags and more, this far-reaching undertaking also captured custom elements specific to Butterfly’s technology, unlocking their capacity to scale and design on greatly shortened timelines.


While Atomic Health had partnered with Butterfly on multiple product features, we found the lack of a component library quite taxing. It took time to locate elements in existing designs and determine whether new components were needed. We also discovered inconsistencies across the product: search designs, tags, forms fields, icons, button sizes and font weights varied across product applications.

Our team (especially me) was thrilled when Butterfly gave us the challenge of unifying the product through the creation of a single source of truth design library. This would not only ensure a consistent product experience, but also enable faster design and development processes.


Taking Inventory

Beginning with the Butterfly enterprise platform, our team conducted a full scale audit and “scrubbed” all styles and components found in the products. We made a spreadsheet of every Butterfly Figma file as well as each page contained in those files.

Figma inventory spreadsheet. We used this spreadsheet to catalog Butterfly’s design projects and files and to track the scrubbing process of components into the design inventory file.

Component Scrubbing

Marking our progress in the spreadsheet along the way, we slowly went through each Figma file, copying every last element – typography, colors, shadows, icons, buttons, tables, cards, forms, etc. – and pasting them into an organized inventory file. Styles got pasted to one page; illustrations, icons and photos to another; buttons on another; form elements on another… Elements in this inventory file were arranged in columns by source project and file, enabling us to reference the context in which the component was found if necessary.

Layout of design inventory file. Every single component found across all of Butterfly’s Figma files and live products was documented, creating a comprehensive inventory from which we built out the Figma design library and compared duplicate components for review and governance.

Populating a Library

Going column by column in the inventory file, I added each element to a new design library. As we came across duplicate components with varying styles, we documented these variations to discuss for governance.

An example of duplicate components: both round and square tags were being used interchangeably across Butterfly’s products. We documented and presented the various use cases, enabling the Butterfly team to decide to eliminate round tags.

A sample of styles and components in the new Butterfly design library


After the first few months of progress on the design library, we published a Beta version for the design team to begin using in their work. Not only did this enable them to move faster right away, it also opened up communication between us and the people actively using the library. They were able to provide feedback about how they were using the components, what worked well and what could be improved. Based on their contributions, we made library updates to further streamline Butterfly’s design process.



Butterfly’s design leadership expressed immense gratitude for the extensive thought and care put into this project. They acknowledged how much the library’s implementation enabled their teams to design faster, develop faster and ensure consistency, both visually and interactively, across all of their digital platforms.


If you would like a deeper look at this project, please reach out to me directly via

Butterfly Network Website

Jump To…

Copyright © 2024 Elizabeth Hixon. All Rights Reserved.

Copyright © 2024 Elizabeth Hixon. All Rights Reserved.