Worried about forms and CRM integrations
I’d like to start exploring Figma Sites, but a critical component for me and my company is the ability to integrate with our CRM. Has anybody been able to learn anything about how Sites might work with things like Hubspot or other tools of that nature? There’s probably a form on every single page I make these days.
We also have a logged in/My Account experience that we need to support.
I’m not expecting these things in the beta version that we can play with today, but is that even on the roadmap? I’m not going to learn the tool and evangelize to IT and leadership if it isn’t.
The short answer is:
Unfortunately, official information on the roadmap for direct, native CRM integrations or a built-in logged-in user experience for Figma Sites, especially for the current beta, is limited or non-existent, making it difficult to give IT and leadership a definitive yes.
However, you can achieve your required functionality – form submissions directly into HubSpot and support for a logged-in experience – right now using a common, low-cost, and robust architectural pattern: leveraging Figma Sites’ ability to embed and integrate with webhooks and APIs via an intermediary like Google Tag Manager, Stape, or Google Cloud Platform.
This setup allows you to capture form data on your site and immediately push it to your HubSpot CRM via its API, while the “My Account” experience can be managed through embedded third-party widgets or IFrames combined with client-side storage and API calls for authentication and data retrieval.
The long answer is:
The concerns you have about form submission and a “My Account” area are common for any new website builder, and while native integrations are ideal, there’s a highly effective solution that gives you the required functionality immediately without waiting for a roadmap feature: APIs, webhooks, and a server-side tagging setup.
This approach utilizes the existing capabilities of both Figma Sites (which allows custom code and embedding) and HubSpot’s powerful API ecosystem.
For form submissions, you won’t rely on a simple embed of a HubSpot form, as that can be messy and hard to style within the Figma design environment.
Instead, you design your form in Figma Sites and, upon submission, capture the data with client-side JavaScript which then pushes an event to an intermediary service.
This is where Google Tag Manager (GTM) comes in.
You embed the GTM container code into your Figma Site.
When a user submits a form, you fire a custom data layer event like formSubmission with all the form fields to GTM.
GTM then triggers a server-side process instead of firing directly to HubSpot from the user’s browser, which is far more secure and reliable.
The server-side component can be something like Stape (a commercial managed service for server-side tagging) or a lightweight setup on Google Cloud Platform (GCP) such as a Cloud Function or App Engine instance.
This server-side instance receives the event from GTM.
It then securely uses the HubSpot API to create or update a contact, a deal, or log an event.
The use of the server-side architecture (Stape or GCP) and the HubSpot API makes this an excellent and cheap solution because it is incredibly efficient, bypasses common browser restrictions like ad-blockers, and is highly scalable—you’re only paying for the minimal compute power required to make the API call.
HubSpot’s API is designed for this exact purpose, offering extensive documentation for creating and updating CRM objects.
For your logged-in/My Account experience, while Figma Sites won’t natively manage user authentication or data, you can use IFrames or embedded code to display a custom application or a securely hosted widget.
Your existing back-end/CRM (or a dedicated authentication service) handles the user login.
Once authenticated, that system can serve up an embedded application within your Figma Site that uses the user’s token to query the relevant data from your CRM/database, either through the HubSpot API or your own internal API.
This keeps the sensitive authentication and user data management separate from the Figma site itself while still providing a seamless experience to the user.
This multi-tool, API-driven architecture future-proofs your solution regardless of what native features Figma may or may not launch.
About The Author
