All exports using the Export Kit plugin will output to the ftml-www folder RELATIVE to your PSD, AI or INDD file. You can quickly access your export in the same folder as your design.

ftml-www

All exports are contained within their respective project folders. Each project has specific rendering to optimize your workflow, some are Linked Projects while others are Self-contained Projects.

Your ftml-www folder will also contain all image assets associated with your design, including snapshots, template files and more.

TIP: You can delete these folders at any time to re-export a fresh copy.

skins/

This is your global skins/ directory where most image assets are located. All projects will link to this directory, this makes it easy for local debugging and testing multiple environments without creating additional image assets.

1
2
3
4
5
6
7
8
9

|ftml-www
----|skins
--------|project
------------|image1.png
------------|image2.jpg
------------|image3.gif
--------|project2
------------|image1.png
------------|image2.jpg

When you export your design using Image Kit or Export Kit, your image assets will save in this location under an individual project folder (based on your PSD, AI, or INDD file name).

TIP: For production you may want to localize your project images to your export folder - learn more.

images/

All image assets exported using Smart Resize or Smart Images are stored in this location.

1
2
3
4

|ftml-www
----|images
--------|image1.png
--------|image2.jpg

assets/

All PSD, AI and INDD assets are stored in this location when you enable Keep Assets with your export or with Smart Images.

1
2
3
4

|ftml-www
----|assets
--------|file1.psd
--------|file2.ai

TIP: Move your PSD, AI and INDD files outside this location before exporting each.  

The safe approach is to move these to the same folder as your project, all PSD, AI and INDD files will localize their exports RELATIVE to the design file. If you do not move your files outside this directory, you will end up with many folders:

1
2
3
4
5
6
7

|ftml-www
----|assets
--------|file1.psd
--------|file2.ai
--------|ftml-www
------------|assets
----------------|file3.psd

layers/

All image assets exported using Layer Kit Pro are stored in this folder.

1
2
3
4

|ftml-www
----|layers
--------|image1.png
--------|image2.jpg

Linked Projects

Most projects use this rendering pattern. This will name your project files based on your PSD, AI or INDD file and link all image assets to the global skins/ directory.

Example HTML5 Linked Project

1
2
3
4
5
6
7
8
9

|ftml-www
----|html5
--------|my_project
------------|my_project.html
------------|my_project.css
----|skins
--------|my_project
------------|image1.png
------------|image2.jpg

Self-contained Projects

All advanced exports such as Android and WordPress use this rendering pattern. This will enclose all project and asset files into a single folder. Advanced exports often require a specific file names or structure, linking projects assets may not work out-of-the-box.

Example WordPress Self-contained Project

1
2
3
4
5
6
7
8
9
10
11

|ftml-www
----|wordpress
--------|my_project
------------|index.php
------------|functions.php
------------|header.php
------------|footer.php
------------|styles.css
------------|skins
----------------|image1.png
----------------|image2.jpg