Build a landing page to launch your next business idea using Figma, Anima and Zapier
You’ve come up with a great idea for a product or service. But before you pour all your time and energy into developing the idea you want to validate it with your target audience. One simple way of doing so is by creating a simple landing page where you sell users on your idea and let the visitors of the page to sign up with their email if they’re interested. That way you can avoid the cold launch by having a list of potential customers to reach out to upon launching.
This article will show you how you can set up a landing page with an email/newsletter sign-up insanely fast using Figma, Anima and Zapier – all with no coding required!
- Create Figma landing page design
- Add content to the design
- Sync design and deploy using Anima
- Enable email submission in Anima
- Set up Email Parser and Google Sheets integration in Zapier
- Publish website with Anima
Let’s get to it!
What are we selling?
Before we build anything we need to come up with a good idea for a product that we will promote on our landing page.
We want to sell Material Design compliant design systems in Figma. Why? Because they are easy to use, instantly recognizable and simple to modify! Our new product will be called Material Templates — use Material Templates to create amazing Material Design compliant UIs in Figma.
Now that we have our product idea, we will start by coming up with the copy and create design assets to promote our product.
Page content
In order to come up with some compelling sales copy for our product we must come up with a sales pitch.
And of course, we need some design assets showing off our awesome features to drive home the sales pitch for Material Templates! We created some flashy videos to show on the landing page:
Next step will be to create a landing page in Figma.
Create landing page design
To build our landing page website we will use Figma. Either build your own custom designed landing page in Figma, or find one provided by the community. You can find some interesting ones at Landingfolio for free.
We’ve decided to build our own design for our Material Design template landing page. We have 3 different screen sizes; one for desktop, tablet and mobile, which will be translated into breakpoints on our website. After tweaking the page copy content a bit we add it to our template. We won’t add our video/gif assets just yet — this will be done later using the Anima plugin. Here’s what our landing page will look like:
Next we will sync our Figma project with Anima using the Anima plugin. To get to the plugin, go into the Figma plugins and search for Anima and press Run when you see it. Create a new Anima project (we’ll call ours “Material Templates”) and press Sync to project to upload your project to Anima.
Now we need to add a few things to our design using Anima in order to make it into a real website:
- Responsiveness
- Videos
- Enable email submission
Responsiveness
If we want our website to look great on all devices we need to enable responsiveness so that our website changes design depending on the device screen size. To do this we select all art boards for each break point; mobile, tablet and desktop.
Then we use the Add Breakpoints feature in Anima to add breakpoints for all three art boards. We make sure the Use Figma constraints option is checked too since our Figma design is utilizing Auto Layout, then press Save.
Videos
Anima will also let us add videos, GIFs and even Lottie files to our website! You can either link to a file by providing a URL, or upload the assets directly to Anima. In this case we have video files, so we’ll go ahead and upload them to Anima.
We’ve left empty frames with only a border applied throughout our designs in Figma. These are the placeholders for our video assets. To switch out the placeholder with an asset we select a frame and then press the asset we want and hit Save. We also enable the Autoplay, Loop and Hide control panel. Then we repeat the process for all our designs. Our assets will not yet be visible— but they will be soon when we sync up with Anima again!
Enable email submission
Anima allows you to mark certain elements as input elements and submit buttons, which makes it possible to collect data from your landing page visitors! We select a text element located inside our email input and go in Anima to Advanced prototype then Text input and choose Email and press save. This input will now collect email addresses for us. Next we need a way of triggering the form, so we select our button in the design and press Submit button. We enter our email (which we’ll be changing in upcoming steps) and press save. Then we repeat these steps for each input box in all our designs.
Sync with Anima
To see all the features we just added we need to sync our project with Anima. We’ll do that, and check out what we have!
Looks amazing! Next up will be to connect Zapier to our email form.
Connect Zapier
Zapier is a super powerful platform which allows us to create different automated workflows based on events. Our triggering event in this case will be people submitting their email address in our signup form. When someone submits their email we will have Zapier receive the email and add a record to a Google Sheet — but there are plenty of other things we could also do, for example have Zapier send us a notification in Slack, and much more.
Our Zap will be pretty simple. We will have two actions:
- New Email in Email Parser by Zapier
- Create Spreadsheet Row in Google Sheets
Email Parser
To get this set up we create a new Zap and select Email Parser by Zapier as our first action. In the Event dropdown we select New Email to trigger our workflow whenever a new email is received.
Next, we select our Email Parser by Zapier account. If you don’t have an Email Parser by Zapier account, go ahead and sign up for one. Email Parser by Zapier allows you to create email inboxes and pattern recognition to parse incoming emails. When you create a new inbox you get an email address which you can use to receive emails. You then send a test email, and go ahead and mark the part of the email body that you want to create a template for.
In the Mailbox selector we choose the Email Parser by Zapier mailbox we want to receive our email signups. After testing the action and making sure it works correctly we move on to our next action: Adding the parsed email into Google Sheets.
Append email data to Google Sheets
For our second action we will use Google Sheets. In the Event selector we choose Create Spreadsheet Row in Google Sheets and in the next step select the Google account you want to use.
We’ve already created a Google Sheet spreadsheet called email_signup with one worksheet test and added our header email in the first column on the first row. In the Set up action screen we select the Spreadsheet and the Worksheet that we want the email signups to drop into.
After you enter the worksheet Zapier will fetch the headers from that Google Sheet and present them as inputs. We only have one column header which is email, so we select that input and choose the data we want to save. Since we’ve already set up Email Parser to parse the email address out of the email sent to Zapier its being given to us as a suggestion of data to save, called Parse Output Email.
Last step is to test the action. After testing the action successfully we make sure it added a row to your Google Sheet. Finally we press Publish Zap to publish our workflow.
Update receiving email in Anima
Remember how we added a mock email when we set up the email submission on the button component using Anima? In order for us to receive emails being submitted on our Anima landing page we need to update that email address to which Anima will send our responses. Back in the Anima plugin we once again select each of the signup buttons to which we previously added the advanced submit button Anima feature and change the email address to our Zapier Parser mailbox email address. Lastly, we make sure to sync the project with Anima again to make sure our changes take affect.
Publishing the landing page
Almost done now! So far we’ve achieved:
- Building the website design in Figma
- Enabling responsiveness, adding email inputs and form submit capability in Anima
- Set up a Zapier workflow to receive email submits and add to a Google Sheet
Now all we need to do to go live is to publish our webpage to our domain name. Thankfully, Anima will help us with this as well!
In order to upload a website with a custom domain name (which we will be doing in our case) you will also need a paid Anima plan. That being said, publishing a page just using the public link is free! To do so, turn on the Enable public link on the Anima project page. To set up the domain name to point to Animas servers where your page is hosted I recommend following this simple step by step guide to update your DNS settings with your domain service provider.
Thats it! We’ve successfully launched our landing page for our brand new product, Material Templates and did so using no code at all, in record time!
Finishing up
The purpose of this landing page is to pitch a product in an appealing way and a way of gauging interest in it by collect email signups. By adding some awesome videos and responsiveness along with a clean design I think we created an appealing landing page to sell our product idea. And we created a way for our visitors to record their interest in our product by submitting their email.
The website is now live, so go to Material Templates and check it out! And if you want to get updates on when the product launches, make sure to sign up with your email and you’ll be sent a free sample of what Material Templates will offer.
