Loading...

Using Layers Panel

Layer Kit is designed to give a visual code rendering of your PSD, AI and INDD layers in multiple code formats. To select Layer Kit, click Layers in the top navigation menu of the Export Kit.

Step 1: Select A View

Select your desired View using the dropdown menu. All views are enabled in the Free Trial, but only views active by Activating Keys will be available after.

Lightning Storm CC Views

There are many environments supported by Export Kit with some specific to CS5 only. Learn more about using each view by clicking on the environment below:

HTML5
CSS
JavaScript
jQuery
Android UI
Android Styles
PHP
SVG
LESS
SASS
ASP
Silver Light
VB
XAML
Swift
XCode
JSON
XML

Legacy CS5 Views

These are our Legacy Flash-based product views:

FTML
AS3
Flex

Step 2: View your Layer Code

Once you select your layer view, click any PSD, AI or INDD layer and the code – reflective of the layer will be displayed. Select All will allow you to select the code displayed in the view. You can then copy-and-paste your code as required.

Selecting Specific Lines

Sometimes when you select specific lines, your text layers may not copy correctly. To fix this:

(a) select the text you want
(b) right-click in the empty space
-- the red boxes in the image above --
(c) click the copy option

Auto Refresh

Use Auto Refresh to auto-update the current layer code or pin the code content.

ENABLED
- the code will update when each new layer is selected.  
DISABLED
- the current code will remain as new layers are selected.  

LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Dropdown +Rollover Menus

Professional dropdown menus with full CSS rollover support.

Connect With Us

Figma Connection Error - Tech has resolved this issue