Figma to Hubspot
The best prototyping starting point for Hubspot theme development
Dan MacleodWhen it comes to prototyping toolsets, the most popular amongst my clients lately has been Figma. There’s no doubt that Figma makes a developer’s job considerably easier, namely:
Inspection
Granular level inspection of elements enables the developer to understand precisely the intentions of the designer when it comes to brand interpretation and layout. CSS rules can also be grabbed directly.
Export
Being able to directly export svg/png assets such as images, background graphics and icons directly ‘in dev flow’ saves a lot of time and bypasses last minute requests for compliant visual content.
Collaboration
Annotations and commenting streamlines client > developer workflow.
While Figma is a great starting point for a Hubspot project what it doesn’t provide, unless the designer has been exceptionally thorough, is a fully responsive interpretation of the templates across multiple viewports (page widths essentially - small mobile > large mobile > tablet > desktop > widescreen etc). This is where you need a skilled design-led developer who understands how layouts need to adapt; with my background I can add in design interpretation that is often missing from the initial brief.
I’ve also worked from layouts in Invision and Adobe XD.
