> For the complete documentation index, see [llms.txt](https://learn.mondayhero.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.mondayhero.io/design-to-flutter/convert-design-to-flutter.md).

# Convert Design to Flutter

You can now easily convert Figma, Adobe XD, and Sketch designs into Flutter code to build natively compiled apps for both iOS and Android from a single codebase. 

Join the Flutter community on our Discord. If you find a bug or have any suggestions, please contact us on our [Discord community](http://bit.ly/HeroesInDiscord).

### How to Get Flutter Code? 

1. [Log in](/getting-started/login-create-project-in-monday-hero.md) to your Monday Hero account.
2. [Create a Flutter project](/getting-started/login-create-project-in-monday-hero.md).
3. [Upload](/getting-started/import-design-files-into-monday-hero.md) designs to your project. Please make sure the designs are revised to[ get the best code results](/getting-started/design-handoff-to-ios-android-developer.md) on Monday Hero.
4. Create [your Flutter components](/design-to-flutter/creating-components.md) like Buttons, Lists, and more.
5. [Make your code responsive](/design-to-flutter/create-responsive-code.md) by clicking the 'Make layout responsive' button, or add your responsive components on Monday Hero.
6. Preview the code on Monday Hero or[ sync it ](/design-to-flutter/sync-code.md)to your project.

{% hint style="info" %}
If you don't have a design, we have a demo at Figma Community prepared for you. [Click here to view](https://www.figma.com/community/file/1052567636946646090) and start discovering the app.
{% endhint %}

Here is a complete Flutter App Tutorial:

{% embed url="<https://youtu.be/Fb5AaJFyohE?si=eBacrav_zEn-eKjP>" %}
Complete Flutter App Tutorial
{% endembed %}

![Monday Hero Flutter support is live!](/files/hrJ9EF2TkMpgM0zARLw5)