Figma to HubSpot: how to turn your designs into a theme marketing can edit

Design teams are often told that HubSpot can't do what they have designed. In almost every case that isn't true; it simply means the design was forced into an off-the-shelf theme. A custom HubSpot theme built from your Figma files can match the design pixel for pixel and still give marketing full drag-and-drop control.

Here is how a Figma to HubSpot project works when it is done well.

1. Prepare the Figma file for development

The smoother the handover, the faster and cheaper the build. Before development starts, make sure the file has:

• Desktop, tablet and mobile versions of each key page.
• A clear type scale and colour styles, set up as Figma styles rather than one-off values.
• Reusable components for buttons, cards, forms and navigation.
• Hover, focus and error states for anything interactive.
• Notes on animation, if there is any.

Missing states are the most common cause of delays. A form that only exists in its empty state will raise questions the moment it is built.

2. Break the pages into modules

This is the most important step. A developer reviews every page and identifies the repeating sections: the hero, the logo strip, the three-column feature grid, the testimonial slider. Each becomes a HubSpot module with fields for the content and options for layout.

The goal is a library small enough to stay consistent and large enough to build pages the design team hasn't drawn yet. Around fifteen to thirty modules covers most B2B marketing sites.

Decide what editors can change

For every module, agree which parts are editable: text, images, links, background colour, alignment, number of columns. Too few options and marketing comes back to developers for every change; too many and pages drift away from the design. The right answer is usually a handful of preset variations rather than free-form settings.

3. Build the theme with the HubSpot CLI

The theme is developed locally and uploaded with the HubSpot CLI. Global styles go into the theme's settings so fonts, colours and buttons are controlled in one place. Each module is built as clean HubL, HTML, CSS and a small amount of JavaScript, and tested at every breakpoint against the Figma frames.

4. Templates, system pages and forms

Beyond the pages in the design, a complete theme needs:

1. 1Drag-and-drop templates for landing pages, website pages and blog posts.
2. 2Styled system pages: 404, search results, password, subscription preferences.
3. 3Form styles that match the design, connected to the right CRM properties.
4. 4Global header and footer partials, so navigation changes once for the whole site.

5. Quality checks before launch

Test on real devices, run Lighthouse for speed and accessibility, check every form submission arrives in HubSpot with the right properties, and confirm tracking is firing. Then rebuild one or two pages from scratch using only the modules. If that is easy, the theme is ready.

6. Hand over with training

A short walkthrough for the marketing team, plus a one-page guide to the module library, prevents most future support requests. The team should leave knowing how to build a new landing page without help.

A real example

For Inai, a global payments platform, we set up the HubSpot portal and built every module from scratch with the CLI, so the design team could design anything without worrying about development limits. For Appknox we went further, connecting the HubSpot site to the product's back end so visitors can upload an app and start a security scan from the browser.

New to HubSpot as a platform? Start with our practical guide to HubSpot CMS website development. Ready to build? See our HubSpot development service or send us your Figma file.