# Monday Hero

## V1

- [Overview](https://learn.mondayhero.io/v1-mac-app/master.md): Meet with Monday Hero, documentation and learn how to convert design to code.
- [Workflow Basics](https://learn.mondayhero.io/v1-mac-app/workflow-for-design-to-code.md): Workflow basics that most developers and designers use while converting the Sketch / Adobe XD design to iOS / Android native code with Monday Hero.
- [Installation](https://learn.mondayhero.io/v1-mac-app/getting-started/install-app-and-plugin.md): Install Monday Hero and enjoy saving time, improve handoff quality, and meet deadlines.
- [Login & Create a Project](https://learn.mondayhero.io/v1-mac-app/getting-started/login-create-project-in-monday-hero.md): Log in to Monday Hero. Create an iOS / Android project.
- [Roles & Manage the Project Team](https://learn.mondayhero.io/v1-mac-app/getting-started/manage-team-developer-designer-role.md): Manage the developers, designers, and import work on Adobe XD/Sketch design to one place.
- [Prepare Design To Get Best Results](https://learn.mondayhero.io/v1-mac-app/getting-started/design-handoff-to-ios-android-developer.md): You can use this guide and check whether your Adobe XD / Sketch design file is ready to handoff to the developer on Monday Hero.
- [Import Design File Into Monday Hero](https://learn.mondayhero.io/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero.md): Import design file to convert the Adobe XD / Sketch design to iOS/Android code.
- [Automatically Generated Components](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/auto-component-code-generation.md): Monday Hero can automatically understand some components and convert design to Swift/Kotlin code.
- [Views](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-view-code.md): Monday Hero can automatically understand the views, and convert design to Swift/Kotlin code.
- [Texts](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-text-code.md): Monday Hero can automatically understand the texts, and convert design to Swift/Kotlin code.
- [Images](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-image-to-code.md): Monday Hero can automatically understand the images, and convert design to Swift/Kotlin code.
- [Convert to Components](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code.md): Import the Sketch/Adobe XD design and convert design to iOS/Android code in minutes.
- [How to Convert to Components](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/how-to-convert-component-to-ios-android-code.md): Import your Adobe XD/Sketch design, then convert to components and export all the colors, fonts, assets, images, and generated code for iOS/Android in one place.
- [Convert to Button](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-button-design-to-ios-android-code.md): Convert Button component to Android/iOS code.
- [Convert to TextField/EditText](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-to-ios-android-code.md): Convert TextField/EditText component to Android/iOS code.
- [Convert to Text Area](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-area-to-ios-android-code.md): Convert TextView/Text component to iOS/Android code.
- [Convert to Status Bar](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-status-bar-design-to-ios-android-code.md): Status Bar design in Adobe XD/Sketch should be removed, projects should use a system-provided status bar.
- [Convert to Search Bar](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-search-bar-design-to-ios-android-code.md): Convert Search Bar component to iOS/Android code.
- [Convert to Lists and Grids](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code.md): Convert to List and Grid design to iOS/Android code.
- [Convert to List](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/list-design-to-ios-android-code.md): Convert the List design to iOS/Android code.
- [Convert to Grid](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/grid-design-to-ios-android-code.md): Convert the Grid design to iOS/Android code.
- [Export Code](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero.md): Convert Adobe XD/Sketch design to code. Export the generated UI code as iOS/Android code and run in both Android Studio/Xcode.
- [Export All Screens as a New Project](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero/export-design-to-xcode-android-studio-new-project.md): Convert Adobe XD/Sketch design to code, export the generated UI code as iOS/Android code, and run in both Android Studio/Xcode. Bring your idea to life in minutes.
- [Export Only Selected Screen as a New Project](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero/export-selected-design-to-xcode-android-studio-new-project.md): Convert Adobe XD/Sketch design to code, export the generated UI code for a specific screen as iOS/Android code, and run in both Android Studio/Xcode.
- [Export Only Selected Screen Into an Existing Project](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero/export-design-to-xcode-android-studio-existing-project.md): Convert the changes in Adobe XD/Sketch design to code, export the generated new UI code as iOS/Android code, add new changes that are ready to run in both Android Studio/Xcode.
- [🚧 Configure Code Preferences (WIP)](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/code-preferences-ios-android.md): Configure code preferences for iOS/Android and maintain your/team's code standards.
- [Travel App](https://learn.mondayhero.io/v1-mac-app/step-by-step-tutorials/travel-app-tutorial-design-to-ios-code.md): Build and run the Travel App in both iOS & Android. The source code and designs are available in Sketch and Adobe XD, also free to use.

## V2

- [Overview](https://learn.mondayhero.io/master.md): Learn how to quickly convert designs into code with Monday Hero.
- [Workflow Basics](https://learn.mondayhero.io/workflow-for-design-to-code.md): Workflow basics that most developers and designers use while converting the Sketch / Adobe XD design to iOS / Android native code with Monday Hero.
- [Installing the Desktop App](https://learn.mondayhero.io/getting-started/install-app-and-plugin.md): Install the Monday Hero Desktop App to import Sketch/Adobe XD files into Monday Hero and export code to your local environment.
- [Log In & Create a Project](https://learn.mondayhero.io/getting-started/login-create-project-in-monday-hero.md): Log in to Monday Hero and Create an iOS/Android Project.
- [Prepare Design to Get the Best Code Results](https://learn.mondayhero.io/getting-started/design-handoff-to-ios-android-developer.md): Use this guide to check whether your Figma, Adobe XD, or Sketch design file is ready for handoff to the developer on Monday Hero.
- [Import Design Files into Monday Hero](https://learn.mondayhero.io/getting-started/import-design-files-into-monday-hero.md)
- [Import Figma Design Files into Monday Hero](https://learn.mondayhero.io/getting-started/import-design-files-into-monday-hero/import-figma-design-files-into-monday-hero.md): Import Figma design files to Monday Hero to get iOS/Android code.
- [Import Your Figma Text Style and Color Library](https://learn.mondayhero.io/getting-started/import-design-files-into-monday-hero/import-figma-design-files-into-monday-hero/import-your-figma-text-style-and-color-library.md): Import your design library to Monday Hero
- [Import Adobe XD Design Files into Monday Hero](https://learn.mondayhero.io/getting-started/import-design-files-into-monday-hero/import-adobe-xd-design-files-into-monday-hero.md): Import Adobe XD design files to Monday Hero to get iOS/Android code.
- [Import Sketch Design Files Into Monday Hero](https://learn.mondayhero.io/getting-started/import-design-files-into-monday-hero/import-sketch-design-files-into-monday-hero.md): Import Sketch design files to Monday Hero to get iOS/Android code.
- [Share Your Project & Manage Roles](https://learn.mondayhero.io/getting-started/manage-team-developer-designer-role.md): Share your project with your team members
- [Convert Design to Flutter](https://learn.mondayhero.io/design-to-flutter/convert-design-to-flutter.md): Create your iOS and Android App with Monday Hero
- [Create Flutter Components](https://learn.mondayhero.io/design-to-flutter/creating-components.md): Create components like buttons, text fields, lists, grids, and much more...
- [System Components](https://learn.mondayhero.io/design-to-flutter/creating-components/system-components.md)
- [Material & Cupertino Components](https://learn.mondayhero.io/design-to-flutter/creating-components/system-components/material-and-cupertino-components.md): Choosing Between Material and Cupertino Components in Flutter
- [Flutter Supported Components](https://learn.mondayhero.io/design-to-flutter/creating-components/system-components/flutter-supported-components.md): Learn supported Flutter components in Monday Hero.
- [Custom Components](https://learn.mondayhero.io/design-to-flutter/creating-components/custom-components.md): Create Custom Components and Craft Your Own Library
- [Create Responsive Code](https://learn.mondayhero.io/design-to-flutter/create-responsive-code.md): Create and edit responsive code on Monday Hero.
- [Colors](https://learn.mondayhero.io/design-to-flutter/colors.md)
- [Text Styles](https://learn.mondayhero.io/design-to-flutter/text-styles.md)
- [Assets](https://learn.mondayhero.io/design-to-flutter/assets.md)
- [Sync Code](https://learn.mondayhero.io/design-to-flutter/sync-code.md)
- [Flutter Project Base](https://learn.mondayhero.io/design-to-flutter/flutter-project-base.md): Setting up your Flutter project environment with Monday Hero
- [Fast Start with Monday Hero Starter Project](https://learn.mondayhero.io/design-to-flutter/flutter-project-base/fast-start-with-monday-hero-starter-project.md): Sync faster by using the starter project.
- [Integrate Monday Hero to your Existing Project](https://learn.mondayhero.io/design-to-flutter/flutter-project-base/integrate-monday-hero-to-your-existing-project.md): Manually add dependencies and sync code for integration
- [Shadows, Gradients, and Other Design Elements](https://learn.mondayhero.io/design-to-flutter/shadows-gradients-and-other-design-elements.md): In this section, we'll explore how Monday Hero works with the Figma plug-in.
- [Troubleshooting Guide](https://learn.mondayhero.io/design-to-flutter/troubleshooting-guide.md): Detecting and Resolving Bugs in Your Monday Hero Experience
- [Checklist for Design Element Review and Code Generation](https://learn.mondayhero.io/design-to-flutter/troubleshooting-guide/checklist-for-design-element-review-and-code-generation.md): Design Element Review and Checklist
- [Github Monday Hero Starter Project Troubleshooting](https://learn.mondayhero.io/design-to-flutter/troubleshooting-guide/github-monday-hero-starter-project-troubleshooting.md)
- [Convert Design to Swift](https://learn.mondayhero.io/design-to-swift/convert-design-to-swift.md): Create your iOS App with Monday Hero
- [Create Swift Components](https://learn.mondayhero.io/design-to-swift/creating-components.md): Create components like buttons, text fields, lists, grids, and much more...
- [System Components](https://learn.mondayhero.io/design-to-swift/creating-components/system-components.md)
- [Views](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/design-to-view-code.md): Monday Hero can automatically understand the views, and convert design to Swift/Kotlin code.
- [Texts](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/design-to-text-code.md): Monday Hero can automatically understand the texts, and convert design to Swift/Kotlin code.
- [Images](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/design-image-to-code.md): Monday Hero can automatically understand the images, and convert design to Swift/Kotlin code.
- [Button](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/convert-button-design-to-ios-android-code.md): Convert Button component to Android/iOS code.
- [TextField/EditText](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/convert-text-to-ios-android-code.md): Convert TextField/EditText component to Android/iOS code.
- [Text Area](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/convert-text-area-to-ios-android-code.md): Convert TextView/Text component to iOS/Android code.
- [Status Bar](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/convert-status-bar-design-to-ios-android-code.md): Status Bar design in Adobe XD/Sketch should be removed, projects should use a system-provided status bar.
- [Search Bar](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/convert-search-bar-design-to-ios-android-code.md): Convert Search Bar component to iOS/Android code.
- [List](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/list-design-to-ios-android-code.md): Convert the List design to iOS/Android code.
- [Grid](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/grid-design-to-ios-android-code.md): Convert the Grid design to iOS/Android code.
- [Swift Supported Components](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/swift-supported-components.md): In this section, we'll take a look at which iOS components are supported or not in Monday Hero.
- [Custom Components](https://learn.mondayhero.io/design-to-swift/creating-components/custom-components.md): Create Custom Components and Craft Your Own Library
- [Video Player Code Component](https://learn.mondayhero.io/design-to-swift/creating-components/video-player-code-component.md): Add Video Player to iOS Code
- [Colors](https://learn.mondayhero.io/design-to-swift/colors.md)
- [Text Styles](https://learn.mondayhero.io/design-to-swift/text-styles.md)
- [Assets](https://learn.mondayhero.io/design-to-swift/assets.md)
- [Shadows, Gradients, and Other Design Elements](https://learn.mondayhero.io/design-to-swift/shadows-gradients-and-other-design-elements.md): In this section, we'll explore how Monday Hero works with the Figma plug-in.
- [Firebase](https://learn.mondayhero.io/design-to-swift/firebase.md): Here you can find how to use Firebase with features of Monday Hero
- [How to get Video URL from Firebase](https://learn.mondayhero.io/design-to-swift/firebase/how-to-get-video-url-from-firebase.md): Use Firebase to add your Videos and use them in your app with Monday Hero
- [Export Code](https://learn.mondayhero.io/design-to-swift/export-design-to-swift-android-code-monday-hero.md): Export the generated UI code as iOS/Android code and run in Xcode.
- [Integrating Exported Files into an Existing Xcode Project](https://learn.mondayhero.io/design-to-swift/export-design-to-swift-android-code-monday-hero/add-exported-files-into-an-xcode-project.md): Integrating Exported Files into an Existing Xcode Project
- [Hero AI Assistant](https://learn.mondayhero.io/hero-ai-assistant/hero-ai-assistant.md): Use Hero AI Assistant to convert to another development language, fix bugs, add validations, include translations, and more.
- [Convert Design to React](https://learn.mondayhero.io/design-to-react/convert-design-to-react.md): Use Hero AI Assistant to convert the design to React.
- [Travel App](https://learn.mondayhero.io/step-by-step-tutorials/travel-app-tutorial-design-to-ios-code.md): Build and run the Travel App in both iOS & Android. The source code and designs are available in Sketch and Adobe XD, also free to use.
- [Frequently Asked Questions](https://learn.mondayhero.io/reachus/frequently-asked-questions.md)