> 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

Create your iOS and Android App with Monday Hero

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!](https://479678609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEfkN8oSQyQ4BaBzwxH-4037006485%2Fuploads%2FSE31tyTmsggjiwasjYCb%2Fimage%206.png?alt=media\&token=ab0e0213-9d94-4078-962d-f8d1afbd1dc3)