Home

What is xLayers?

In development, particularly in web application or agile project management. We tend to create an evolutive design in time to get an idea of how it would look like before the dev team starts implementing it in code. The goal of xLayers.app is to help designers to easily integrate and experiment their Sketchs against the real working application without relying on developers every-time by using xlayers.app's code generation feature.

How does xlayers.app work?

xlayers.app have three separate components:

• Parser: responsible for the translation of the Sketch file into web readable CSS;
• Preview: a preview of the real world component using the parser output;
• CodeGen: consuming the same source as the preview but outputting code.

For which frameworks xLayers generate code?

Currently xLayers generates code for following frameworks:

• Angular
• Vue
• React
• Web Components
• Stencil
• LitElement
• Xamarin.Forms

We also have some open issues to add new framework support, which you may be willing to contribute :) :

• add svelte code generation support
• add flutter code generation support
• add Angular Element support