Using Figma + Buzzy to create a 'free trial' landing page

Updated: Aug 5

Of course we use Buzzy ourselves! When we say "Built by designers and developers that know things should be easier" - we really are our own target audience. 😊


Powered by Buzzy. Built by designers and developers that know things should be easier.

When we wanted to promote a limited free trial license for Buzzy via a series of online ads, we needed a landing page with an email signup form that the ads could direct a user towards.


The signup form submission would redirect to whole new page that outlined the next steps for the user. At the backend, the submitted email addresses needed to be added to the correct Buzzy user lists, and trigger an automated email response.


All of which adds up to complexity and time, which we didn't have. The landing page had to go out now, to coincide with a window of opportunity for our ad campaign.



Figma + Buzzy to the rescue


Luckily, there's a simple solution available - and we just happen to build it. Since we were already wire-framing and designing in Figma, it made sense to use the Buzzy plugin to markup and deploy our Figma design as the actual landing page, complete with working signup form.

Here's our initial wireframe cut-&-pasted together in Figma. Ugly but did its job.


Screenshot of the wireframe in Figma.

That was refined and worked up into this design (still in Figma)...


Screenshot of the initial design in Figma.

...which was marked up and deployed with the Buzzy plugin. We haven't left Figma yet!


Screenshot of the Buzzy plugin.

This could all be done by our designer, Rihan. So far so good! We've gone from an initial wireframe, to a deployed website with a working signup form that captures email addresses - all without leaving Figma.



The 'tricky' bit


Now for the 'tricky' stuff - redirecting submitted email addresses into SendGrid (an email delivery platform) to trigger an email response to the new user. This could be done via an API call in a Buzzy 'rule'.


Setting up the Buzzy 'rule' with an API call required a tiny bit of code work in the Buzzy CMS, which was easily taken care of by Adam (Buzzy founder and CEO).


Screenshot of the Buzzy CMS showing an API call being defined via a 'rule'

When SendGrid received a call from the Buzzy landing page with a newly submitted email address, it would fire off an automated email response welcoming the new user and providing additional information. We already had email templates ready to go, so there was little effort involved here beyond defining a new SendGrid campaign , and tweaking some wording.


An email design in SendGrid.


Job done? Not so fast.


The initial design was functional, but not the prettiest. We also wanted to refine the wording, and add some tracking code so we could monitor the campaign's effectiveness. No problem. We simply edited our Figma design, and hit re-publish - the changes were instantly deployed, with no interruption to our live landing page.


Screenshot of the final design.

The end result


We managed to design and deploy a functional landing page extremely rapidly and we could work in Figma (with the Buzzy plugin!) almost the entire time. Critically, tech expertise (in this case Adam) was needed only for the API interaction with SendGrid and not for the design, production and deployment tasks which could all be done in Figma by Rihan, the designer.




Screenshot of the shared Figma file.

Need something similar? Happy to share


Best of all? A version of this landing page design is available as a Figma community file for you to copy, use and modify however you see fit. The design has already been marked up with the Buzzy plugin, all you need to do is grab the file, open the Buzzy plugin and hit publish!



Blog

Ramblings, rants and news from Buzzy.