DEV Community: xLayers

xLayers #sketchnote

Ane — Fri, 06 Nov 2020 21:26:37 +0000

Hey! Do you know @xlayers_?
An oos project that seeks to make designers' and developers' lifes better :-)

Thank you @wassimchegham for this initiative and for giving me the opportunity to be part of it!

Here's my #sketchnote about it

You can join us and also support our work from github.com/xlayers/xlayers

Thank you @GitHub

Easy version stamp your Angular app🦶

Jeffrey Bosch — Fri, 23 Oct 2020 15:53:17 +0000

Did you ever create bash scripts that you've used in multiple projects to do version stamp your Angular application?

Today we are very happy to announce 🎉 @xlayers/version-stamp 🎉 an Angular Builder that will help you to version stamp your Angular apps.

How to use version-stamp

1.Navigate to your Angular project

2.Add @xlayers/version-stamp to your project

ng add @xlayers/version-stamp

The package will make some small changes to the angular.json

3.Add the following snippet (only the version property) to your environment files.

export const environment = {
    production: false,
    version: "_BUILD_HASH_"
};

4.Use the version that the packages has provided in your environment properties.

import { environment } from "../environment";

@Component({
    selector: "xlayers-root"
})
export class AppComponent {
    version = environment.version;
}

5.Now you can stamp your app by running

ng run <your-app>:stamp

or use --version for a specific version

ng run <your-app>:stamp --version="1.2.1"

6.When we navigate to our dist folder we can look at our code and see something that is similiar to the picture below

Thank you

Thank you for reading our article, we hope this article encourages you to try xLayers products as it is fairly easy to use and provides a lot of value in the collaboration between designers and developers.

Would you like to help us with xLayers by contributing? We have issues for first-timers and we are willing to help you in all possible ways. Next to contributing you can help us by donating, this way we can develop more features that are on our roadmap.

How to contribute to xLayers this hacktoberfest

Sumit Parakh — Wed, 02 Oct 2019 14:29:15 +0000

The Hacktoberfest 2019 is here. :D

This event is organized by digitalocean every year in October, to celebrate the open-source community and their contributions. It not only promotes the idea of open-source but also provides a great opportunity for developers across the world, to make contributions to ANY open source project.

If you have never made any open source contribution but are willing to, then this is the best opportunity for you to begin with and learn.

Don't know how to make PR to any open source project? Well, you got to read this:

Demystifying Open Source Contributions

In order to keep the momentum of open source, we, the xLayerians also invite your contributions.

What is xLayers?

xLayers is a community driven open source project which is a perfect companion for designers who want to see their design running ;)

What does xLayers do?

Convert your sketch prototype into code of any framework.
Display your design directly on the web.
3D rotation, preview mode and zooming support
Display metadata of your design such as size, position, layout structure, etc. on the page.
Edit, run and deploy the generated code directly from your browser. Thanks to stackblitz :)
Download generated code as a zip file.

How to contribute to xLayers?

It is very simple.

Just go through this link to get a list of hacktoberfest issues.
Pick any issue you want
Read our contribution guidelines
Get started. :)

Apart from the main xLayers project, we also have few more projects in our github organization which you can look around:

xlayers-lite (Web Component of xLayers)
xlayers-vscode-extenstion (vscode extension of xLayers)

So what are you waiting for? Let’s begin. Afterall, it is open to all :)

If you have any doubt, feel free to comment here or raise an issue, or tweet/DM us :) .

From design to code

Jeffrey Bosch — Sat, 03 Aug 2019 12:16:21 +0000

It has been a while since we have updated you on xLayers. Within this article, we will introduce xLayers and the value it can add to your daily work as a designer or as a developer. But first, let's repeat the goal of xLayers, this will help us understand why xLayers is created.

The Goal:

xLayers is an online Web application which aims to bridge the gap between designers and developers. Its mission is to allow an easy collaborate world between Designers and Developer so that they can iterate fast.

Now that we all have an understanding of the main goal, let’s move on and see how xLayers is working. Our journey within xLayers will consist of three parts where we go from a sketch file to code.

Part 1, From SketchApp to xLayers:

Before we can start using xLayers, we need a ‘sketch’ file. With this file, we can start using xLayers! (if you don’t have any sketch files no worries we provide a couple of demo file)

Open https://xlayers.dev, we will arrive on the landing page, on this page you will see a variety of information on all the things xLayers will provide you. Have a look at it, for now, we will continue our journey on how we can create code from Sketch.

On the landing page, you see a button with “Get Started”, let’s press this button.

Here we can upload our sketch file or select one of the demo files.

xLayers, will analyze this file and create a live example within your browser. This live example is called the component viewer, it represents the designed sketch file in HTML.

Great, let’s continue to the next part!

Part 2, Collaboration

Now that we are in the component viewer, we encourage the designer and developers to sit side by side and have a conversation about the designed parts that are visible on the component viewer.

The goal and the power of xLayers is now visible, you can use the viewer to have a conversation about the different aspects of the component, see if all parts are correct. Within the viewer, you can easily see each created page with their layers by using the left sidebar or click on the layers. By selecting a layer, the layer will be highlighted by a red indication border.

To see more details you can use the toolbar on the top, these actions all have their own goal.

Zooming In:

The zoom-in action can be used by clicking on the magnifying glass (as shown below) or by holding Ctrl + moving your mouse.

Zooming Out:

The zoom-out action can be used by clicking on the magnifying glass (as shown below) or by holding Ctrl + moving your mouse.

Reset to initial zoom:

By pressing the “basic magnifying glass” the zoom level will be reset to the initial zoom.

3D:

When pressing the 3D action, you have the ability to look through all the different layers in a 3D viewing way. By pressing the left shift and moving your mouse to a side you can even navigate around all of the different layers and see it from different angles.

Part 3, Source code:

The last action in the toolbar is the action which navigates you to the code generation. After navigation, you will have a set of generated code based on the sketch file. By default it will open with the selection of the Angular framework, however, you have the possibility to select a framework to your own choice.

On this page, you also have the ability to use the toolbar. Only this time you have fewer options. One of these options is to go and use StackBlitz as your online IDE. When this action is enabled, all code will be published to Stackblitz and you will have a setup of the project that you can use in an online IDE 🚀.

The second option is to download all of your code. With this option, you will be provided with a compressed zip that can be downloaded to your machine. This way you can integrate it easily within the desired repository.

What brings the future of xLayers?

At the moment we are focussing on the following topics:

Support more than only web frameworks, Xamarin support is already there
Have a completely new sketch parser to handle bitmaps and SVG and many more extensibility

Thank you

Thank you for reading our article, we hope this article encourages you to try xLayers as it is fairly easy to use and provides a lot of value in the collaboration between designers and developers.

xLayers - v1.0.0-beta 5

Jeffrey Bosch — Wed, 19 Jun 2019 20:50:41 +0000

We are happy to announce a new version of xLayers: v1.0.0-beta 5 🎉🎉

Within this release, we have some new features, improvements and small fixes.

Some highlights of this release are:

Upgraded to Angular V8
Support for Xamarin
Multi translated (ENG, NL)
Updated support for Stencil One

For the complete changelog click here

Here is a sample Xamarin code generated from the Sketch design:

If you have any questions or want to provide us feedback send us a DM or create an issue at our Github.

Follow @xlayers_ on Twitter for more updates about xLayers. You also can support us by make a donation on Open Collective

xLayers: Design & CodeGen

Wassim Chegham — Wed, 27 Mar 2019 11:05:18 +0000

We are super excited to announce the Beta release of the https://xLayers.dev (@xlayers_) 🎊🎉

What is xLayers?

Put simply, https://xLayers.dev is an online Web application which aims to bridge the gap between designers and developers. Its mission is to allow both the Design and Development worlds to collaborate and iterate fast. Simply upload your design to xLayers and instantly scaffolds code for many popular frameworks¹ and libraries such as Angular, Vue, React, Stencil...etc.

Why xLayers?

There are many tools out there that allow you to preview a SketchApp² design online. xLayers is not yet another tool that does the same thing. xLayers was designed from the ground up to be both designers and developers friendly. It features what designers would need to preview and inspect a sketch, and helps developers to convert a sketch to a code that they then can use in their Web application (more platforms and frameworks will be added in the future). xLayers will target mainstream libraries and frameworks (Angular, React, Vue...etc) for both the Web and beyond¹.

What xLayers is not?

xLayers is not a UI design tool. Designers would still need to use their SketchApp² as usual, without changing their habits or workflow.

xLayers is not meant to scaffold all of your application in one single magic click! We are not there yet, we simply can’t act as a substitute for human creativity. Not yet!

How can you help?

https://xLayers.app is fully open-source and available on GitHub. The project is still in its early stage and we need your help.

Contribute on GitHub

As we mentioned before, xLayers was designed for both developers and designers, so we need feedback from both of you. You can give it a try and let us know by opening an issue on Github. We are also open to any suggestions, feedback and feature requests:

You are a designer: You can suggest or help implement a better UI and UX;
You are a developer: You can help implement new features, fix bugs, tests, documentation.

Upvote on Product Hunt

xLayers is available on Product Hunt, so please give us an upvote, and if you believe in our mission, we’ll be very grateful!

Support us on Open Collective

xLayers had joined the Open Collective. However, we are not seeking for financial funds right now. Our priority is to get some contributors to help us fix the issues, add features and stabilize the current beta releases.

If you still want to support xLayers financially, that’s also welcome. All the funds will help us pay for the xLayers infrastructure (hosting, storage...etc). Thank You for that.

Help us shape the future of Designers and Developers' productivity!

Follow @xlayers_ on Twitter for more updates about xLayers.

1: more platforms and frameworks will be added in the future.
2: more UI tools will be added in the future.