Export Kit allows you to create custom user data for the UI Builder/Elements and Virtual Scripts (Script Kit) to further extend the functionality of the plugin. Export Kit will parse your user data each time you load the plugin, so you are always in-sync with your content.

Default ftml-data Folders

For new v128 users, we recommend you download the default fmtl-data folders which contains version 1 of both UI Elements and Web Templates.

Create Your ftml-data Folder

1
2
3
4

|[Users Folder]
----|[Your User Name]
--------|Export Kit
------------|ftml-data

EXAMPLE (WIN):
C:\Users\[Your User Name]\Export Kit\ftml-data

EXAMPLE (MAC):
~/Export Kit/ftml-data

Creative Cloud: You MUST create this location if it does not exist, we will add this to the plugin shortly.

CS5: This location is created when you download the default templates inside the plugin.

[ui-elements] Folder

Need a visual? Watch our step-by-step tutorial!

This folder contains all PSD assets related to UI Elements. You can add any custom UI library to this folder and Export Kit will auto-load the library and categories into the UI Builder.

1
2

|ftml-data
----|ui-elements

Your folders and PSD files will sync with our UI Builder and must maintain the correct folder/file relationship:

Library/Category/UIElement.psd

Once you add your PSD folders to this directory, and maintain the Library/Category/UIElement.psd structure – your files will auto-sync with Export Kit.

1
2
3
4

|ui-elements
----|Library
--------|Category
------------|UIElement.psd

IMPORTANT: Our image preview is only available in CS5, and equally our Edit PSD/AI/INDD feature is only available in Lightning Storm.

[web-templates] Folder

Need a visual? Watch our step-by-step tutorial!

This folder contains all PSD assets related Script Kit. You can add any custom HTML, CSS, JavaScript or PHP code to this folder and Export Kit will auto-load the content into Virtual Scripts.

1
2

|fmtl-data
----|web-templates

Your folders and template files will sync with our Virtual Scripts and must maintain the correct folder/file relationship:

code/code.js

IMPORTANT: You must have a code file with the same name as your code folder.  Eg. my-custom-script/my-custom-script.js.

NOTE: Export Kit will parse each code folder and all files within to edit the Script Tags inside Export Kit.  Files located inside subfolders are not parsed.

Once you maintain the code/code.js folder/file relationship, all files auto-sync with Export Kit. Virtual Scripts have a very specific sync pattern to optimize your web templates.

1
2
3
4
5
6
7
8
9

|web-templates
----|code
--------|code.js
--------|code.css
--------|code.php
--------|assets
------------|file1.css
------------|file2.js
------------|file3.html

There are a few basic rules to follow.

1. All files/folders inside your [code] folder are copied
2. All files inside your [code] folder allow for Script Tags
3. All folders and files inside your [assets] folder do not process Script Tags

NOTE: You can use any name for your [code] or [assets] folder, but the folder/file relationship is key to correctly auto-sync with Virtual Scripts.

Script Tags

When customizing code for Virtual Scripts, you must use Script Tags to set a property and default value:

@{ name :value }
- eg. @{Your Email:youremail@yourserver.com}

Each property you create in your code file will directly reflect as options in your Output Environment. You must enable your web template in Export Kit Pro to allow for editing.

Reuse Script Tags

@{ name }
- eg. @{Your Email}

You can reuse your Script Tags anywhere in your code using only the @{name}, this will replace with the value of your Export Kit options at run-time.

[export-options] Folder

This folder contains all custom save options used with Export Kit Pro Panel. When you save your custom export options, you can both modify or delete the .options file directly in this directory. The name of your Export Options file has no restrictions, but keep in mind there is a display limit in the plugin so long names are not recommended.

1
2
3
4
5

|ftml-data
----|export-options
--------|custom export.options
--------|myCustomExport.options
--------|Custom-Export.options

IMPORTANT: This is only available with Export Kit Pro Panel. 

NOTE: You can create, modify and reuse any options files locally, learn more.