Design Transform: Overview

What is Design Transform?

Design Transform (DT) enables marketers to go from design concepts to live interactive digital experiences more easily than ever before.Starting by uploading any design file, marketers can add interactivity and publish to their website. Teams can easily transform any design file – from Figma and Sketch to the entire Adobe® Creative Cloud® (Photoshop, Illustrator, XD, and InDesign) - into a live shoppable Experience, all without writing a single line of code. 

Details: 

• Supports the following file types: .fig; .sketch; .psd; .ai; .xd; .pdf; 
• Layers from your design file will be preserved and can be manipulated during the transformation process. 
• All text will be imported as live text.
• Image assets in your design file will be added to your Creator image library for repeat use.

The Transformation Process

Below you can find a short video showing how to use Design Transform:

Our more in-depth, six minute training on Design Transform can be seen here:

Preparing Your Design File for Upload

While Design Transform can handle a lot, each Design tool has its own way of doing things. As a DT user, there are ways to optimize how you build and process your file so that it converts quickly and accurately. The following section describes the various ways to prepare your file to have the best experience.

What Design File are you uploading?

• The design tools we have found that work best with DT are Figma, Sketch, XD and Photoshop.
  • While DT can accept many file types, the results may vary with programs like Illustrator, PDF, and InDesign.  The Adobe Creative Suit is a powerful collection of programs that were created to perform highly technical design related tasks. Because of this, each program is different and may not always convert as expected. 
• Working with InDesign?
  • Export your InDesign file as an Adobe PDF(Interactive) file and upload it to the Design Transform tool for the best layering of your file.

File Requirements

• Try to keep file sizes under 300mb
• The more layers the file has, the more difficult it is to upload. This can sometimes be the cause of an error, despite what size the file is.
• Always make sure to set up your artboard as the size you want your experience to be for the best possible quality.

Multi-Artboard / Multi-Scene

• DT supports single artboard files for the creation of a single scene experience and multi-artboard files for the creation of multi-scene or multi-variant experiences
• If you have multiple artboards in a file but do not want to create a multi-scene experience, please save the artboard you would like to transform into an independent file before uploading.
• For more details on creating multi-scene experiences check out our related articles:
  • Design Transform: Multi-artboard designs into multi-scene experiences
  • Design Transform: Multi-variant experiences

Embed Assets vs Linking

• All assets present in the file should be embedded, rather than linked. This helps ensure DT can access all assets and transform them properly.

Text

• Text will import as live text, as long as it’s not an image in the file
• Text may be converted incorrectly depending on applied effects 
• For curved or specialized text, users can import these as raster images   
• There is SEO risk; recommendation is to change the alt-text

Prepare Fonts for Upload

• Make sure the fonts present in the file are readily available to upload during the transformation process or are already in your Creator account.
• Google fonts, Typekit fonts and any custom fonts you have already uploaded into your Creator account will not need to be uploaded again. 
• These will automatically be matched for you during the DT process Be aware that  fonts will not be automatically recognized from a PDF file through the Design Transform tool.

Text on a Path

• Text that was placed on path with the pen tool to add text onto is currently not supported within DT.

Character Attributes

• Character attributes like, lowercase, super/subscript, and all others do not convert through the Design Transform Tool.

Name Your Layers

• Naming your layers in a differentiated way will allow you to keep your layers organized. 
• While not mandatory, this will be useful if you decide to get more granular with your design transformation and want to manipulate these layers. 
• Naming your image layers will auto-generate as your alt text when the widget is created, you can name your layers within your design file and that will show as alt text within DT.

Organize Your Layers

• The order of layers that you set in your original file is the order in which we will present widgets to you.

Group Your Layers

• Please make sure all widgets are inside of a larger group.
• When working within your design file, grouping like-layers is very important. The uploader could timeout with complicated files.
• Best Practice: Merging groups of like images is an easy solution to having your file upload much faster and be less prone to errors.
• Image layers that you group together in your design file will be grouped together as one widget in our transformation process. We encourage you to keep that in mind as you build your design so that things are already grouped the way you want them. 
• For example, grouping together an image and its mask layers is the best practice as we will automatically keep those together for you. Inversely, grouping layers of different images that you will want to make interactive in different ways might not be the best set-up as you will have to separate them again later. 
• During the upload process, DT checks each layer to determine whether the previous layer is also a non-text layer and is adjacent (i.e. same group or level). If so, we combine them into a single image widget for you. 

Components

• Components are reusable designs and or graphics within tools like Figma/Sketch/XD that allow designers to quickly create assets that follow the same branding and structure.
• If you have master components used in your file located in another place, you will need to detach the instances of those components within your file to make sure all assets come through during upload.

Blending Options & Layer Effects

• Blending options and layer effects will need to be flattened or merged to maintain the effects.
• To achieve this, we recommend flattening the graphic within the larger file before upload, or exporting it separately and replacing the file within your creator experience.
• Some examples of layer effects and blending options: Drop shadows, Casing, Layer masks, Darken, Multiply, Overlay, etc.

Hidden Layers

• Remove any hidden layers from your file. By doing this you will decrease the overall file size and make your file easier to upload.

Image Tracing (Illustrator)

• This process takes an image and converts it into a complex group of vector paths. This will dramatically increase file size and cause the file not to load into the Design Transform tool.
• If image tracing is necessary, after image tracing, save your graphic as a png or jpeg to use in another design software.

Reduce the Size of Large Design Files

• If your file is large and contains a lot of assets, converting the file all at once can be slow, as DT will need to convert every element of your design file and place them into your experience.
• Best Practice: Try to work through your design file a screen/scene at a time rather than the entire file at once. Start by optimizing the largest assets first and flatten any like elements. Be aware of the file size you started with and where you ended up. 

Simplify Complex Design Files 

• Whenever you are working with programs like Illustrator or InDesign that can use vector-based imagery and potentially contain a file with 100s of vector paths, importing could take a very long time.
• Best Practice: Stay away from having too complex of a file, rasterizing your vectors is a simple and effective way to reduce import time and improve widget creation. This can be done by importing your graphics into a raster-based software like Photoshop, or exporting graphics as .png images and adding them into your design.

More Design Transform Resources

Design Transform: Multi-artboard designs into multi-scene experiences
Design Transform: Multi-variant experiences
Design Transform: Keyboard shortcuts

Please email support@zmags.com if you have any questions or feedback.