xlayers/xlayers

✨ Generate code from your design

Welcome to xLayers

Preview and Convert SketchApp Design Files Into ANY Framework And Library.

What is xLayers?

xLayers is a community-driven effort to bridge the gap between designers, who implement the UI sketch and developers who implement the code from these design sketches. Put simply, xLayers is a code generation tool for your design sketches: use xLayers to instantly scaffold your components out of your design.

The xLayers project is driven by community contributions. Please send us your Pull Requests and feedback!

Want to help?

Want to file a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues in the hotlist: community-help.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

xlayers's Issues

The zoom buttons don't work

Describe the bug
The zoom buttons don't work as expected.

To Reproduce
Steps to reproduce the behavior:
Just click on the zoom buttons.

Expected behavior
The zoom buttons should zoom in and out as expected.

Screenshots

Allow downloading the generated code as a ZIP file

Describe the solution you'd like
Allow downloading the generated code as a ZIP file

Allow zoom in/out using the mouse wheel

Describe the solution you'd like
As an xlayers.app user, I want to use my mouse wheel to zoom in and out.

Refactor the codegen implementation

Bazel can't build subfolder component

Describe the bug
Actual implementation of Angular rules in Bazel doesn't work for component in subfolders. And CDK actually fail to compile with Ivy.

https://github.com/sfeir-open-source/xlayers/tree/build/bazel

To Reproduce
Steps to reproduce the behavior:

1. bazel run //src:prodserver

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)

angular/angular-bazel-example#263

Add Stackblitz integration

Describe the solution you'd like
Add Stackblitz integration

Sidebar reopen when closing workspace

Describe the bug
When in codegen the close workspace re-open the tree sidebar.

To Reproduce

1. Select demo file
2. Click on codegen
3. Click on close

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)
• Browser: Brave
• Version: 0.57.18 Chromium: 71.0.3578.80 (Official Build) (64-bit)

CodeGen: add Svelte support

Hi, are there any plans to support Svelte?

Thanks!

Add sharing support

Describe the solution you'd like
As an xlayers.app user, I want to be able to share my current project, using a unique URL.

Integration test per Sketch file version

Make it easy to track the ability of our sketch parser to parse different versions of SketchApp by adding different version of demo files.

Cannot click on element anymore

Describe the bug
Cannot click on element anymore.

To Reproduce
Steps to reproduce the behavior:

1. Load a sketch file
2. Click on any element

Expected behavior
The tree structure should have shown the element and the right sidebar should have appeared.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS 10.14.1
• Browser Firefox
• Version 63.0.3

Flaky monaco tabs on first rendering

Describe the bug
When we generate the code and add it to the monaco editor, the text doesnt show up on the first rendering. We need to switch to another tab and switch back so the text gets re-rendered.

To Reproduce
Steps to reproduce the behavior:

1. load any demo file
2. the UI editor shows up with the generated files (one file per tab)
3. code doest show up at first
4. click on any other tab
5. click back on the first tab, and the code shows up

Expected behavior
We need to see the generated code (of the first tab) after the parsing is done and the code editor is populated.

switch to angular#master^HEAD

Let's use angular#master^HEAD as our main version.

NOTE: this is forcing us to stay up to date but also, this may introduce some breaking changes, so we should be reactive and fix bugs as they arise ^^

auto select the layout toggle button when selecting a layer

Rewrite the landing page wordings to be more inclusive

Is your feature request related to a problem? Please describe.
Rewrite the landing page wordings to be more inclusive (technology wise).

remove console logs in parser

remove console logs in parser

Potencial Sketch file version parsing inconsistency

Question

Hi,

During my investigation of the sketch style parser for unit tests, I discovered that some parts of the Style Parser Service are never used.
Because the if (root.style.textStyle) { is never the truth and textStyle is always undefined in the root case but not in the obj case.

The second remark is that the code followed within the condition is still invalid. After checking a JSON page file of md-components-cards-safari (sketch demo file). The NSxxxxxx fields do not exist and _archive either in the textStyle field but a simple JSON object is present.

During my investigation, I found that there were fewer cases where the use of bplist is necessary. I think it's because of version inconsistency in the integrity of the file, but i'm still not sure.

Style Parser Service

src/app/editor/viewer/lib/parsers/sketch-style-parser.service.ts (51-91)

case 'text':
    this.setStyle(obj, root, {
        color: 'black' // default for now
    });

    /**
     * @todo make the Binary Property List parser stable.
     * The current implementation is a little bit hacky!
     */
    if (root.style.textStyle) {
    console.log('=======MSAttributedStringFontAttribute=======');
    const MSAttributedStringFontAttribute = root.style.textStyle.encodedAttributes.MSAttributedStringFontAttribute
        ._archive as string;
    console.log(MSAttributedStringFontAttribute);
    const parsedMSAttributedStringFontAttribute = this.binaryPlistParser.parse64Content(MSAttributedStringFontAttribute);

    console.log('=======archivedAttributedString=======');
    const archivedAttributedString = root.attributedString.archivedAttributedString._archive as string;
    const parsedArchivedAttributedString = this.binaryPlistParser.parse64Content(archivedAttributedString);
    console.log(archivedAttributedString);
    console.log(parsedArchivedAttributedString);

    console.log('=======NSParagraphStyle=======');
    const NSParagraphStyle = root.style.textStyle.encodedAttributes.NSParagraphStyle._archive as string;
    const parsedNSParagraphStyle = this.binaryPlistParser.parse64Content(NSParagraphStyle);
    console.log(NSParagraphStyle);
    console.log(parsedNSParagraphStyle);

    console.log('=======NSColor=======');
    const NSColor = root.style.textStyle.encodedAttributes.NSColor._archive as string;
    const parsedNSColor = this.binaryPlistParser.parse64Content(NSColor);
    console.log(NSColor);
    console.log(parsedNSColor);

    (root.style.textStyle.encodedAttributes
        .MSAttributedStringFontAttribute as any)._transformed = parsedMSAttributedStringFontAttribute;
    (root.attributedString.archivedAttributedString as any)._transformed = parsedArchivedAttributedString;
    (root.style.textStyle.encodedAttributes.NSParagraphStyle as any)._transformed = parsedNSParagraphStyle;
    (root.style.textStyle.encodedAttributes.NSColor as any)._transformed = parsedNSColor;
    }
    break;

Card Safari Page

src/assets/demos/skecthapp/md-components-cards-safari/pages/319AD824-DAE8-44E7-8EB2-B07161591010.json (514-541)

"textStyle": {
    "_class": "textStyle",
    "do_objectID": "8D8E5D61-558E-4270-ACB3-8EC7F6FD0BEC",
    "encodedAttributes": {
        "ligature": 0,
        "MSAttributedStringColorAttribute": {
            "_class": "color",
            "alpha": 1,
            "blue": 1,
            "green": 1,
            "red": 1
        },
        "MSAttributedStringFontAttribute": {
            "_class": "fontDescriptor",
            "attributes": {
                "name": "Roboto-Regular",
                "size": 24
            }
        },
        "paragraphStyle": {
            "_class": "paragraphStyle",
            "maximumLineHeight": 24,
            "minimumLineHeight": 24,
            "allowsDefaultTighteningForTruncation": 0
        }
    },
    "verticalAlignment": 0
}

Button export fail

Describe the bug
If codegen is not open the export button will fail.

To Reproduce

1. Select a demo file
2. Click on export button

Expected behavior
The export button should appear after the code have been generated by clicking the codegen button in the menu.

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)
• Browser: Brave
• Version: 0.57.18 Chromium: 71.0.3578.80 (Official Build) (64-bit)

Add some demo Sketch files

Describe the solution you'd like
Create a folder for some demo Sketch files can be a good idea.

Additional context
If I upload the Sketch file that create an issue the contributors can easily jump into the code.

Make the 3d design rotate

Describe the solution you'd like
As an xlayers.app user, I want to be able to rotate the 3d design -presumably- using my mouse.

add documentation to editor/viewer/lib

The core viewer library and the parsers need developer documentation.

• Let's add create a wiki and make sure the API is well documented.
• add a detailed architecture diagram of the core parsing process

CodeGen: add React support

• add Component codegen
• add spec file codegen
• add JSX codegen
• add styles codegen
• add readme codegen
• add export to stackblitz
• add unit test
• add entry to the editor menu

zoom: even if the scrollbar is necessary does not appear

Describe the bug
Even if the scrollbar is necessary does not appear.

To Reproduce
Steps to reproduce the behavior:

1. Open md-components-cards-safari.sketch demo file
2. Click zoom button
3. Scrollbar does not appear

Screenshots

Desktop (please complete the following information):

• OS: macOs High Sierra
• Browser: Chrome
• Version: 68

No style on certain components after CodeGen

Describe the bug
The component is missing for the most part the button style or on a "group" class component.

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)
• Browser Brave
• Version 0.57.18 Chromium: 71.0.3578.80 (Official Build) (64-bit)

Allow closing the current workspace

Is your feature request related to a problem? Please describe.
We need to be able to close the current workspace and load a new one.

Editor page is unavailable on Firefox

Description
User has no access to https://xlayers.app/#/editor page on Firefox

To Reproduce
Steps to reproduce the behavior:

1. Go to https://xlayers.app/#/home
2. Click on Get Started
3. Nothing happens.
4. Check the console, see the error

or

1. Try to go to https://xlayers.app/#/editor
2. See the error in console

Expected behavior
User has access to Editor page

Screenshots

Desktop:

• OS: Windows 8
• Browser Firefox
• Version 61.0.2 (64-bit)

Desktop:

• OS: Linux Mint 18.3 Sylvia
• Browser Firefox
• Version 57.0 (64 bit)

Check the SketchApp file against supported version

Describe the solution you'd like
We need to make sure that the sketchapp file being used, has been created with the right SketchApp supported version (52+)

If the version detected isnt supported by xlayers, we need to run through the fallback parsing.

Hide the vertical scrollbar

Describe the bug
The vertical scrollbar is always visible; It should only be visible if the content is larger than the viewport.

To Reproduce
Just open the editor.

Expected behavior
No scrollbar visible

Screenshots

Desktop (please complete the following information):
ALL

Fix CONTRIBUTING.md

Describe the bug
It might be a mistake, cause in the CONTRIBUTING.md file it says to create a new branch from master, not from develop.

Expected behavior
Contrib documentation should contain instructions with the correct branch - develop.

Text doesn't show up

Describe the bug
Text doesn't show up on really old SketchApp version like the 46.

Expected behavior
Should show at least the text without style.

Screenshots

Desktop (please complete the following information):

• OS: MacOS 10.14.1
• Browser Firefox Quantum
• Version 63.0.3

zoom: "origin" on preview center

Describe the solution you'd like
At the moment the zoom "origin" is on top left corner.
I think the zoom origin is better on the preview center.

Additional context

Unit test integer/float random mock doesn't work

Describe the bug
The int/float random mock's max/min was buggy.

Expected behavior
The integer should be in the max/min range

Add Preview image download

Describe the solution you'd like
As an xlayers.app user, I want to download the preview image

Canvas unit test fail

Describe the bug
The variable "isPreview" should have been remove before merging the #66 because it's now always null and not used anymore.
The newly introduced SketchSelectedLayerDirective fail the canvas unit test "should have current page", the reason is still unknow.

To Reproduce
Steps to reproduce the behavior:

1. Checkout fix/unit-test
2. Remove the test skip by replacing "fit" by "it" at line 47
3. Run "npm run test"

Expected behavior
Should success unit tests

Desktop (please complete the following information):

• OS: MacOS 10.14.1
• Browser Firefox
• Version 63.0.3

CodeGen: add Angular support

• add Component codegen
• add spec file codegen
• add HTML codegen
• add styles codegen
• add readme codegen
• add export to stackblitz
• add unit test
• add entry to the editor menu

highlight current selected layer

Add PWA support

Describe the solution you'd like
xLayers should be installable and usable in offline mode. Make it a PWA.

Migrate third party Drag/Drop to CDK

Describe the solution you'd like
Instead of using a third party component we should use https://material.angular.io/cdk/drag-drop/overview

Add support for Curve Points

Is your feature request related to a problem? Please describe.
Currently, the curvePoint data isn't extracted.

Describe the solution you'd like
We should be able to enhance the parser to extract the curve point data and convert that into SVG elements, when possible.

Additional context

Home logo animation performance

Describe the bug
Logo rotation animation on the homepage triggers hole page re-painting.

To Reproduce
Steps to reproduce the behavior:

1. Go to '/#/home'
2. Open Chrome DevTools
3. Options -> More Tools -> Rendering
4. Enable "Paint flashing" option
5. Hole page will be filled in the green color that means that hole page re-paints

Expected behavior
Logo animation shouldn't trigger re-paint

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 68

The preview icon isn't working

Describe the bug
The preview icon isn't working anymore since we moved the preview to the sidebar.

To Reproduce
Steps to reproduce the behavior:

1. import a new design
2. click on the preview button

Expected behavior
The preview button should show/hide the preview image present on the sidebar.

Screenshots

add a breadcrumb of the current layer path

CodeGen: add Web Components support

• add Element codegen
• add spec file codegen
• add HTML codegen
• add styles codegen
• add readme codegen
• add export to stackblitz
• add unit test
• add entry to the editor menu

Update the favicon

using the xlayers pink logo

Add SSR for the landing page

Add SSR support for the landing page. See docs here: https://angular.io/guide/universal

Codegen doesn't generate code on second upload

Describe the bug
The Codegen show the previous generated code on second upload. We have to refresh every time to make it work again.

To Reproduce
Steps to reproduce the behavior:

1. Select a file or demo file
2. Go back by clicking the home button
3. Reselect a new file

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)
• Browser: Brave
• Version: 0.57.18 Chromium: 71.0.3578.80 (Official Build) (64-bit)

Add GitHub integration

Describe the solution you'd like
xLayers should be able to connect to the user's GitHub account and push the generate code from the current design.

CodeGen: add Vuejs support

• add Component codegen
• add spec file codegen
• add HTML codegen
• add styles codegen
• add readme codegen
• add export to stackblitz
• add unit test
• add entry to the editor menu

Codegen menu "has changed after it was checked"

Describe the bug
A little bug have been introduce into the PR #103.

To Reproduce

1. Select a demo file
2. Click on codegen

Screenshots

Desktop (please complete the following information):

• OS: Mac Mojave 10.14.1 (18B75)
• Browser: Brave
• Version: 0.57.18 Chromium: 71.0.3578.80 (Official Build) (64-bit)

Fix resizing Top and Left edges