Frames render an upload button to a step allowing users to add an image from their device. Frames are a powerful and easy way to empower your consumer with the ability to create professional and artistic personalisation's without needing to have any knowledge of how to design. Without frames we would only be able to drop images into a square region defined by a length and width.

Like all other Spiff assets we provide you with public library so that you can start building workflows straight away. To see the library of frames simply make sure the Show public assets button is checked. Here are some of our existing frames.

Accepted File Formats

When a use is uploading to a frame their image needs to be a JPG, PNG or SVG.

Uploading Logos

Uploading logos to a frame works the same as uploading any other image except the image will need to have a transparent background. The file types that we reccomend to use are PNG's and SVG's because they support transaprency. JPG does not, applying a logo in a JPG will result in white space to fill the area outside of the logo.

How many Frames can I use?

When adding frames to a workflow step you can have as many as you like! As long as they all have the same aspect ratio. The reason they all need to be the same aspect ratio is because they will all be placed into the same region, which will stretch/squish a frame that is not the right size.

Placing your Frames

Placing your frames is made very simple with the use of regions. A region is an area that defines the location where the content in your step is placed on the panel. Simply find out the region in which you want your frame to appear on the panel and then add your chosen frame(s). Go here to more about placing your regions.

Creating a Frame

Frames are created as vectors in Adobe Illustrator and are exported as SVG’s and uploaded to the frames in the asset gallery. Only SVG’s in this folder will be able to be used in the upload step. See steps below for detailed instructions on how to create a frame in Adobe Illustrator.

  1. Create your desired shape as a vector in Illustrator, this shape can be anything you like. We have chosen to make all of our frames grey to keep them consistant and reccomend you do the same. The hex code is #616262.

  1. After you have created your shape turn it into a compound path. Do this by going to the Object tab in the top menu, and down to Compound Path and then Make. Also it's important to note if your frame is made up of two or more objects, first group your objects and then make them a compound path.

  1. Now your frame is ready to export as an SVG. To do this go to the File tab in the top menu and down to Export and Export As....

  1. This will bring up an SVG Options box. In this box ensure that the Images drop down is set to Embed. Then press OK.

  1. Now your frame is exported to your desired location. Now all you need to add in a small snipped of code so that our system will recognize the SVG as a frame. Open up any editor that can read XML such as Visual Studio Code and open your new frame. Near the top of the code you should see the word path. Once you find this all you need to do is paste "id=target-path" after it and then save. Your frame is now ready to upload.

  1. Now your frame is ready sign into your account on Spiff and got to your frame tab in assets and press Create New Asset in the top right. And viola you have created a frame!