Home

What is xLayers ?

In application development, especially in web development. We tend to create a graphic prototype to get an idea of what an application would look like before beginning real application. The objective of xLayer is to create a pipeline between the design prototype and the real world application by generating an agnostic framework component.

What is xLayers for ?

xLayer is designed to do the following:

• Make web front development more accessible for the pure designer
• Automatically generate the standard code
• Build and test faster with less technical approach

How do xLayers work ?

Every project critical features reside inside /src/app/editor/viewer/lib.

At the root of the library are several UI components, including public components: SketchDropZone, SketchSettingContainer, SketchEditorContainer, SketchContainer and SketchTreeView. Those imported by the editor component to compose the final view page.

Sketch file processing

The SketchContainer component is responsible for listening to the input file emitted by SketchDropZone and then delegate the file to the SketchService for processing.

A Sketch file type is a zip container composed of a recurrent folder structure as:

.
+-- pages/
|   *.json
+-- previews/
|   +--preview.png
+-- meta.json
+-- user.json

The meta.json file is the entrypoint of the file responsible of describing the sketch project. And referencing all pages files present in the pages folder by their hash at the "pagesAndArtboards" key.

{
  "commit": "String",
  "pagesAndArtboards": {
    "*": {
      "name": "String",
      "artboards": {}
    }
  },
  "version": "Number",
  "fonts": ["String"],
  "compatibilityVersion": "Number",
  "app": "String",
  "autosaved": "Number",
  "variant": "String",
  "created": {
    "commit": "String",
    "appVersion": "String",
    "build": "Number",
    "app": "String",
    "compatibilityVersion": "Number",
    "version": "Number",
    "variant": "String"
  },
  "saveHistory": ["String"],
  "appVersion": "String",
  "build": "Number"
}

The page file include a root object defining the page information and a recursive tree of layer describing the disposition and other properties of a form in space hierarchically.

Sketch displayer

The previously parsed sketch file is then emitted in the state of the application listened to by SketchContainer and TreeView components.

The SketchContainer and TreeView will use the same layer hierarchy as the sketch file to, on the SketchContainer side display form in the canvas with SketchLayer and SketchPage and on the TreeView side as a the folder structure on the sidebar.