DEV Community

Cover image for xLayers: Design & CodeGen
Wassim Chegham for xLayers

Posted on • Updated on

xLayers: Design & CodeGen

We are super excited to announce the Beta release of the (@xlayers_) 🎊🎉

What is xLayers?

Put simply, 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 frameworks1 and libraries such as Angular, Vue, React, Stencil...etc.

Why xLayers?

There are many tools out there that allow you to preview a SketchApp2 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 beyond1.

What xLayers is not?

xLayers is not a UI design tool. Designers would still need to use their SketchApp2 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? 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.

Top comments (1)

rsandagon profile image
ryan sandagon

Hi Wassim,
The https certificate seems broken right now.