The Free Design 2D editor

The Free Design editor is your solution to 2D editing in the Spiff Platform. Free Design is presented in an organized and easy-to-access format, with all of the core features of any top-performing 2D design platform. The Free Design editor is currently available as an extension of the ‘Themes’ addon and can be purchased as an additional ‘Theme Layout’. Put the freedom back into the personalization process with Free Design.

Although Free Design is currently available, features of it are still in-development. For any queries please contact a SpiffCommerce team member.
Screenshot 2023 03 09 at 4.07.56 pm

View Controls

The Free Design editor features handy controls for the users experimenting with designs. For experiences that still feature a 3D model, the user can switch between “2D”, “3D”, or the “Split” view options.
As the names suggest, “2D” will bring the 2D view into full view, allowing the user to focus purely on this flat design version. Split will allow them to see a split view of the 3D product and the 2D view, allowing them to line things up better for the actual product, and 3D will bring only the 3D product into full view.

freeDesign View

Selecting Elements

Selecting elements within the Free Design editor is easy. Working similarly to any other 2D canvas editor, where the user can easily click-select on any element displayed in the canvas and adjust it accordingly by dragging, even using the handles of the selected elements to scale or rotate.

Options for elements currently can only be added in the backend of the Spiff Hub, contact a SpiffCommerce team member for assistance.
freeDesign Selecting

Transform Settings

The transform settings, accessed at the bottom of the editor allows for fine-tuning of selected elements. The standard X and Y position values are available, as well as height, width and rotation. This can likewise be useful for merchants that want to create a purely 3D experience without Free Design but want to easily find positions for regions for each step in their workflows. Another helpful feature is the ability to change the measurement type, from Pixels to Millimeters etc could be incredibly helpful for creating designs originally made in that particular measurement.

freeDesign Transform


The Panels button is used to switch the current panel that’s in view. As a standard, whatever panel is added first in your workflows experience config will be displayed initially, but any panel can be switched to with this function.

freeDesign Panels


Here the customer or user can upload any standard image file to their design. Once uploaded, the user can see that it is now available underneath the upload area. Clicking on any image uploaded will add it to the canvas.

freeDesign Upload 5


Text can also be added to any Free Design experience, once the user selects a font they can enter the applicable text.

freeDesign Text 2


The elements tab allows the user to add images, illustrations, or other assets built from options into the canvas.

freeDesign Elements

Structured Steps

Traditionally the spiff workflows, in pure 3D had steps for each design element on the product, these structured steps can still be used with the Free Design editor. This allows you, the merchant to create design templates that the user can edit via the structured steps tabs, whilst still being able to add their own elements via the upper tabs.

Screenshot 2023 03 09 at 3.41.52 pm

Home » Documents » Quick Start » Site Navigation » The Free Design 2D editor