How to use Spark AR to create Instagram and Facebook filters: a tutorial for beginners

What is Spark AR?

Spark AR is a free-to-use platform produced by Facebook that enables users to create interactive augmented reality experiences, i.e. filters, for Facebook and Instagram.

As the software can be used without any coding knowledge, anyone can now make the next viral Instagram filter, challenge, or facemask with little to no experience in an AR world.

This tool is particularly great for any digital marketers looking to get people talking about and engaging with their brand, for free. Within Facebook Business Manager, there is also an option to put budget behind your effects and promote them to wider Facebook users – a great opportunity to grow your business’ social media presence. As part of a wider social media campaign, Spark AR has the potential to set your brand apart from competitors.

For example, check out this valentine’s themed filter that Jammie Dodgers released this year:

Jammie Dodger's Valentines Instagram Filter

Delta Air Lines took this one step further by promoting the use of their ‘My 2020 Destination’ randomizer filter with an incentive: 5 users were given tickets to visit their resultant destination.

You can take a more direct response route, such as Kylie Cosmetics enabling users to ‘try on’ various shades of lipstick on Instagram to help them decide which to purchase.

If you’re interested in trying this, you’ll need to get started with the basics.

In this tutorial, I’m going to be making a filter for Facebook and Instagram in the vein of the popular ‘Which X are you?’, covering the fundamentals across different areas of Spark AR, including handling assets and creating patches.

'Which X are you?' filter

How to create Facebook and Instagram filters

1) Setting up

The first step is to download the Spark AR software

To start, create a Blank Project.

Intro to Spark AR Studio

You’ll be greeted by a smiling fellow, to whom you can attach a face tracker by right clicking anywhere in the ‘Scene’ tab:

Add Face Tracker

Here, we want to assign faceTracker0 a ‘Plane’ child. A face tracker is an object that will follow a person in a frame’s face, and a plane is a 2D object whose texture you can manipulate. The combination of these two allows us to set the image’s positions relative to a person’s facial position.

Add Plane

Once the plane is added, you will see it appear in frame with a default checker texture. You need to pause (left-hand side) and reposition this plane to be in the position it needs to be in when the filter is running. Once paused, use the green arrow to move the object along the y-axis to position it above the user’s face.

Move Plane Spark AR

You will need two planes, one for the question (“Which X are you?”) and one for the answer, so press Cmd+D on Mac or Ctrl+D on Windows to duplicate the plane you’ve just made and rename one to Question and one to Answer. Then, use the scale feature to stretch the question plane in the x-axis (red line) as will be a the question will be a landscape image; whereas the answers are square.

Scale Plane

2) Adding Assets

Next, we need to add our assets. 

I’m creating a ‘Which social media platform are you?’ randomizer, so I’ve placed the logos of a few social platforms (Facebook, Instagram, Twitter, LinkedIn, TikTok, Snapchat and Pinterest) in a folder on my computer.

To import the answers for your filter, navigate to Assets and click Add Asset, then click on ‘Animation Sequence’. With this sequence selected, navigate over to the right panel and under ‘Texture’ select ‘Choose file‘. Then, select all of the images you’d like to be part of your randomizer.

Import Animation Sequence

For your question, you will need to create your text file in a graphics editor and upload it as an image to Spark AR. For my project, I’ve typed out the question “Which social media platform are you?” in a word processor and taken a screenshot of it. 

To add your question image, click ‘Add Asset’ again, but this time, because it’s a static image, click on ‘Import from Computer‘ and select your image. 

Then, select the Question plane and under the ‘Properties’ section on the right, click the ‘+’ icon next to ‘Materials’ to create a new Material.

Add Material

Select this new Material, set it to have a ‘Flat’ Shader Type and assign the Texture as your question.

Add Texture

Now that the Question plane is sorted, you need to assign the animation sequence that you imported earlier to the Answer plane. 

The process is similar: select the Answer plane and create a new Material.

Create New Material Spark AR

Then set the Shader Type to ‘Flat’ and set the Texture to the animation sequence you imported earlier.

Add Animation Sequence as Material

3) The Patch Editor

Now that both planes have been given a Texture, you can begin working on the logic that will govern how a user interacts with the filter. 

In a bid to make Spark AR accessible to as many people as possible, Facebook designed a Patch Editor to enable you to create algorithms without working directly with code. You can access it under View > Show/Hide Patch Editor.

(Check out Facebook’s extensive guide on how to use the Patch Editor if you’d like to learn more about visual programming.)

For this project, you need to insert a toggle, so right-click in the editor and search for Screen Tap

Add Screen Tap Toggle

Then right click and add a switch, which is going to toggle between our two planes, and connect the ‘Tap’ to the ‘Flip’ input of the switch.

After the switch, add a ‘Not Gate’:

Add Not Gate

Then, you need to insert a property of the ‘Question’ plane. Select Question and click the right pointing arrow next to Visible to bring up a patch that lets you control this property.

Add Question 'Visible' Property

Then do the same for the Answer plane. Link the switch directly to the Answer – Visible patch. 

Add Answer Visible

Now, when you click on the camera emulator you should be able to switch between seeing your question and a continuous loop of answers.

Working Filter

Insert a ‘Runtime’, ‘Offset’, ‘Less Than’, ‘Loop Animation’, ‘Random’ and ‘Round’, and take the Screen Tap ‘Tap’ out to the ‘Reset’ input of the Offset. Your Patch should now look like this:

Add More to Patch

Select your animation sequence under Assets and add the Current Frame property. Connect the output of the Round to this:

Add Current Frame Property

In order for the Patch to work, you now need to change some of these values: 

  1. Set ‘Less Than’ to the number of seconds you’d like the animation to run for – I’ve gone for 6 in this project.
  2. Set the ‘Duration’ of the ‘Loop Animation’ to be 0.05 – this is how long each logo is shown for during the randomization process.
  3. ‘End Value’ under ‘Random’ needs to be set to the number of images in your animation sequence – mine is set to 7.

4) Sharing

You’re finally ready to test and run your very own Instagram or Facebook filter! Click the upload button in the bottom left corner of the spark AR interface to post it on your Facebook or Instagram stories and send it to your friends.