.png)
HubSpot's UI extensibility initiative aims to give developers the ability to build custom app interfaces within the HubSpot ecosystem. However, before this project, developers faced several challenges when trying to create UI components for their extensible apps:
Lack of Standardized UI Components – Developers had no official library of HubSpot-native UI elements, leading to inconsistent designs that didn’t align with the platform.
High Development Effort – Without pre-built components, developers had to spend extra time designing and coding basic UI elements from scratch.
Inconsistent User Experience – Since developers were building their own UI elements, the look and feel of third-party apps varied significantly from HubSpot’s core experience.
Limited Discoverability & Accessibility – There wasn’t a clear, centralized way for developers to find and use the right UI components, making adoption difficult.
When I joined the UI Extensibility team, I inherited a bloated and undocumented Figma file containing poorly built components. I started by conducting an audit of this file in addition to existing HubSpot components with the goal of identifying gaps and opportunities improvement.
The file was hard to navigate and most components lacked documentation. Those that had documentation were out of date.
Additionally, variants in the file had not been set up properly so the components were difficult to use and costly to update.
Partnering with a front-end engineer and product manager, I catalogued the existing components and made a list in order of priority. From there, I documented each component in its current state, starting with the highest priority.
I avoided rebuilding where possible, but many components needed to be refactored or built from scratch. I met with app developers regularly throughout this process to understand how and when they were using different UI component variants.
These conversations helped me determine which properties to group together, which components to nest, and how to structure the variants.
I also knew the library needed to be future-proofed, so I set up a token system that aligned to HubSpot brand values. This would allow us to easily streamline any future changes without significant overhead.
This allows updates to flow to all components simultaneously, rather than requiring manual, breaking changes to each.
Once I had stabilized the state of the design system components and documentation, I was able to establish the newly-minted HubSpot Extensibility Design Kit.
Using the information gathered in my exploratory phase, I began building components.
The above are just a few of over 40 components I built with excruciating attention to detail. Each component had a vast number of properties and variables. I constructed each one with the user experience in mind, knowing they needed to be intuitive for non-designers.
I implemented a new header for each component to maintain consistency across the file. It was essential that each component linked to documentation that provided additional resources to developers. For this piece, I worked with our Documentation team to build out code samples and design guidelines for each component.
Button documentation
The final step was to ensure developers were aware of the updated design kit and had easy access to it.
The old version of the kit was password protected, and only had 90 users. Awareness of its existence was limited among our almost 500 developers, and they had to request access through their HubSpot admins.
To remedy this, I investigated the potential of adding the library to Figma Community, a platform within Figma that allows users to share and discover design resources.
The Design Kit's Community page
We received consistent positive feedback from developers regarding the design kit. Developers told us that it cut their build time in half by enabling them to align on visuals before writing a single line of code.
As the project wrapped up, I checked back in on our original goal: increase design kit usage. Once our Community profile was up and running, we saw steady increase in users. Within one quarter, the user base grew from 90 to 412, a more than 350% increase.
The impact of this increase will be long-lasting, influencing the product for years to come. It has already lead to improved app designs from developers, which will benefit both HubSpot and its users in the long term.
The design kit has been released to the public, but I continue to iterate and expand its components on a weekly basis.
