xLayers: Design & CodeGen
Tags: webdev, design, javascript, productivity
Published: 2019-03-27 11:05:18

---
title: xLayers: Design & CodeGen
published: false
description: Preview and Convert Design Files Into ANY Framework And Library.
tags: webdev, design, javascript, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5qfr4ny94eqs54wgrbek.png
published: true
---

We are super excited to announce the Beta release of the https://xLayers.dev ([@xlayers_](https://twitter.com/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<sup>1</sup> and libraries such as Angular, Vue, React, Stencil...etc.**

## Why xLayers?

There are many tools out there that allow you to preview a SketchApp<sup>2</sup> 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<sup>1</sup>.

## What xLayers is not?

xLayers is not a UI design tool. Designers would still need to use their SketchApp<sup>2</sup> 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](https://github.com/xlayers/xlayers/issues). 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](https://www.producthunt.com/posts/cross-layers), 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](https://opencollective.com/xlayers). 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_](https://twitter.com/xlayers_) on Twitter for more updates about xLayers.

<hr/>
*1: more platforms and frameworks will be added in the future.
2: more UI tools will be added in the future.*