Design to Code, in a few minutes
Figure out how KnowCode works, converting images into code for UI development.
KnowCode "reads" .jpg or .png files. The good news is that you can keep using your favorite graphical design tools, like Photoshop, Adobe XD, Figma, etc. You only need to export your screenshots in one of these types of files. Besides that, it will be better if you have the assets (images and icons). In this way, KnowCode'll provide an output with more quality and precision.
Follow these steps:
1. On the KnowCode tool, click "Get Started";
2. Fill the form with the Early Access Key and the name of the Project;
3. Upload the screenshots (.jpg or .png) in a package (.zip);
4. Upload the image icons in another package (.zip). If you don't have the access check the box stating this;
Note: if you don't upload the assets, KnowCode only generates code with the components position and type;
5. Click "Send Project".
The KnowCode tool loads the screenshots and identifies all elements, using AI. So, it's time to check if everything is OK with each element, such as buttons, image buttons, images, text views and so on.
At this phase, you can check and change:
On the screens
On the components
Also, it's possible to
The goal here is to be quick. With more people using the KnowCode, the AI keeps learning to be more and more precise.
Here is where the magic happens. In this step you'll download a file with all UI data for your mobile app, based on an available UI framework. The purpose of this is to help developers in a time consuming task, such as positioning the elements and configuring navigations. In addition, developers can continue to use his favorite UI framework.
For now, the only available UI frameworks is Flutter and TouchGFX (for embedded systems). But soon we are going to be compatible with more frameworks.
After the download is complete, you'll follow specific steps to "upload" the source code in each UI framework. As each of them has different steps, we recommend watching our tutorials videos, on YouTube.