Setup Workflow Experience from Design

Setup Workflow Experince from your Design

You are able to set up any design you like in Spiff from any Photoshop or Illustrator design. No matter how many colors, text steps of photo uploads you need. We can do it!


This exmaple will show you how to set up a simple design from a PSD (Photoshop) file.

  1. Open your PSD file

  1. Turn off the visibilty on any layers you don't want to export

  1. Go to File > Export As > and export your design

  1. Make sure your png/jpg is not super large. Try to keep everything under 1mb otherwise things can load slowly.

  1. Open your newly exported png/jpg in Illustrator and ensure it is the correct size you want it. When doing this make sure your point is set to the top left and your x and y is set to 0, 0. This needs to be on 0, 0 because our editor reads from the top left point.

  1. Now you have your design in Illustrator you can draw a box around the areas you want to add text. This will be your regions. Select one of the boxes you have drawn and in the Properties tab you can see the measurements you will need to put in your region. Make sure these meaurements are in pixels.

  1. Now, go to Spiff Asstes and upload your png/jpg you exported from PSD into the Images tab.

  1. Now go to Workflows in the Content tab and create your workflow. Select the model you want to use.

  1. Enter in the workflow details, and panel size.

  1. Start by creating a Silent Illustration step to put your jpg/png on. Select your asset and put in your regions and keep your layer low as possible because you want this image to sit behind the text. 0 works best.

  1. Now it's time to add your text. Do this by adding a Text step. Fill in your desired information and in the bottom tab enter in your regions from Illustrator. We round up the pixels to make the process cleaner. Make sure the layer is higher then what you set your Silent Illustration to. In your Options tab you can choose as many fonts as you like to be used.

  1. Do the same with your second text step.

  1. This should be a basic set up of your workflow. You can now go to the product you created, attach your workflow. This is really easy you just need to search for the name of your workflow, select it and save.

  1. You can now test out your magic!


  • Get all your regions from Illustrator in pixels
  • In Illustrator your x and y need to be on 0, 0


  • If you can't see something you have put into the workflow, check your layers. Often you have put it behind something and it is hiding.
  • If you have multiple Options on a Text step, make sure you have one set as a default.