Layer Effects are the backbone of XD, PSD, AI and INDD. It is almost impossible to create a modern design without using effects, so Export Kit makes it easy to include them in your design.

Layer Kit Pro Options

Export Kit Pro Layer Options

Enabled

If enabled, this will render layer styles and effects along with the general layer information. You can add layer effects to any layer element and Export Kit will render the effect directly in each environment – where available.

If Effects IE6+ is selected, this will render layer styles and effects with support for Internet Explorer browsers.

Note: Not all environments support all XD, PSD, AI and INDD layer effects.

Shape and Vector Effects

All layer effects are supported with shapes and vectors. Basic shapes convert to CSS3 and vectors convert to SVG Filters.

Text Effects

Most text effects are supported but all devices and browsers will render text effects differently!

IMPORTANT: HTML5 and CSS3 have poor text effects support for glow, stroke, and gradient fill.

Image Effects

All image layers are rasterized.

Disabled

Layers are converted as-is without additional effects and styles information.

CAUTION: You should disable your effects on your layers also.  Your layers will calculate with size of your Layer Effects, if you do not have Effects enabled - then you may have unexpected layer sizes.

EXAMPLE: If your element is 100x100 and you have a stroke with a 2px line-size.  Your element is now 104x104 - which may cause unwanted display errors if Effects are not enabled.

When To Use Effects

PRODUCTION: Always ENABLE effects for production exports.

CLIENT PREVIEW: You can DISABLE effects for client previews, until paid-in-full.