# Introducing FlutterVision

### Design to code Tool, for Flutter

Here is a step-by-step guide on how to use FlutterVision more smoothly and easily. 

And for this first phase of the tool, the Beta Version witch may contain a few bugs. Please let us know whatever you think that can be improved. 

{% hint style="info" %}
To use the FlutterVision tool you need an account. To create one, click [here](https://web.fluttervision.com/).
{% endhint %}

This workflow includes 4 basic steps: 

1. **Choose and upload your input:**  You can use FlutterVision with two kinds of inputs: (1) Figma project or (2) Screenshots. Using Figma is the best way to get a better application, because Figma provides a lot of important information to build your app. 
2. **Adjustments and navigation**: After uploading your input in FlutterVision, you should check the AI results and, if necessary, make the adjustments. In this phase you can set the correct screen order.
3. **Download**: This is the easiest step, you just need to finish the project and choose the framework you are working with. For now, FlutterVision is compatible with [Flutter](https://flutter.dev/), which generates code that you can run on [VSCode](https://code.visualstudio.com/), for i,e. 
4. **Run**: The last step is done outside FlutterVision, where you will open your project, make any adjustments and compile it to run on your board.

If you prefer a more illustrative tutorial in video format, click [here](https://youtube.com/playlist?list=PL8VoBnjh_RnJrVwbPnekEwSCRK4scubAt).