In the fast-paced world of sales, efficiency is key. However, sales teams often waste valuable time searching for warm introduction paths, a process that forces them to leave their CRM and consult multiple data sources. The Swarm, a company specializing in relationship intelligence, tackled this problem head-on by building an app card with HubSpot's UI Extensions. The Swarm’s platform helps go-to-market leaders leverage their company’s collective network—including stakeholders, investors, and team members—by automatically mapping relationships based on shared work history, education, and mutual investors. This rich relationship data is then seamlessly integrated into the HubSpot CRM via a public app, allowing sales professionals to find trusted connections and have warmer, more credible conversations without ever leaving their workflow.
Here's a look at their journey, from the initial stages of design to the valuable lessons they learned along the way.
The Canvas: Starting with a Native Design
The Swarm's development process was significantly accelerated by leveraging HubSpot's existing tools, a practice they highly recommend to other builders. In fact, their first step on the journey was to adopt a native design approach.
The most impactful tool was the HubSpot Figma Design Kit. HubSpot’s Figma Design Kit for UI Extensions provides a visual representation of the UI components that can be included in React-based app cards within UI extensions.
Instead of starting with traditional low-fidelity mockups, The Swarm's design team duplicated the kit and began building a high-fidelity app card immediately. The kit’s clear structure, consistent naming conventions, and a wide array of ready-to-use components—including tables, lists, tags, and panels—meant they didn’t have to reinvent the wheel. The auto-layout features of the panel component were particularly useful for visualizing their data in a clean, HubSpot-native way.
As The Swarm's Co-Founder and CTO, Michal Bil, recounts: “All in all, we were able to go from PRD to developer handover in less than 24 hours. Developers also appreciated how clear and clean it all was.” They saved time not only in the design phase but also during stakeholder reviews and approvals, as the designs were already aligned with HubSpot's visual language.
The Toolkit: From Design to Development
With the design foundation in place, the team transitioned to the development phase. Here, they found several other resources invaluable to their process.
They discovered that the HubSpot CLI tool was a critical asset for project management. It allowed them to create a new UI Extensions project and, using the hs project dev command, update their UI live, which significantly shortened their development cycles.
For handling authentication, they relied on the HubSpot OAuth Quickstart app. This provided them with a working example of the OAuth flow for marketplace apps and even served as a local backend for their initial development, removing a major hurdle.
For any questions or unexpected challenges, The Swarm found the HubSpot Developers Slack community to be an excellent resource for timely, peer-to-peer support. The team's advice to new community members is to always search for an answer before posting a new question.
The "Aha!": Lessons Learned and Security in Mind
Every development project has its moments of discovery, and The Swarm’s was no different. Their hard work led them to a few key insights. One of their most significant "aha" moments came from understanding the nuances of backend data fetching.
Here's some actionable advice for other developers and decision-makers:
Budget extra time for understanding HubSpot's embedded request data structure. While the hubspot.fetch() function is required for fetching data from an external backend; it isn't immediately obvious that HubSpot adds several important pieces of data behind the scenes. These include identifiers for the HubSpot portal and the user, your app's unique identifier, and a signature header to verify that the request is coming from HubSpot. As Michal recalls: “With this knowledge, implementing the API that serves the required data becomes much smoother.”
Embrace constraints as a creative guide. HubSpot provides a library of static and interactive UI components for app card development. Rather than seeing the limited styling tools as a challenge, The Swarm's team found that working with the platform's components, like Flex and Box, was a satisfying experience. These components naturally guide the design, ensuring that the UI not only works but also feels like a native, integrated part of the HubSpot ecosystem.
The Takeaway: Just Build It!
The Swarm's journey is a testament to how HubSpot's developer platform, with its robust tools and supportive community, can enable companies to build powerful, native integrations quickly and efficiently.
When asked for their biggest piece of advice for other developers considering building a UI Extension for the HubSpot Marketplace, their answer was simple and direct: "Just do it!"
They encourage others to start small, use the provided Figma toolkit for prototyping, leverage the documentation and the HubSpot CLI, and actively engage with the developer community. By following this path, you can create a compelling app that not only addresses a real-world problem but also delivers an exceptional user experience.
If you're ready to start building your own app, head over to the HubSpot Developers page to learn more about the tools and resources available. To learn more about The Swarm's approach to relationship intelligence, visit their website to see their solution in action.