# Overview Meet with Monday Hero, documentation and learn how to convert design to code. ## What is Monday Hero? Monday Hero converts designs into iOS and Android code for developers and designers. It doesn't mean that you won't code, it means that Monday Hero will understand and generate layout code, assets, fonts, colors.. for you. With Monday Hero, you don't need to code the UI design details again that are already well-prepared by a designer. You can **save time by removing repetitive manual work in the UI** and **focus on the functionality/creativity more**. Monday Hero supports Sketch App and Adobe XD designs now, you can export design via a plugin. Figma will be supported soon. In Monday Hero, you also improve the team's handoff process between designers and developers. ### What are the key benefits? #### Speed up your workflow ⚡️ Save time in the UI part that already well-prepared by a designer up to 30 percent in total project time. #### Bring your designs into life **🎨** It's so easy to have the correct color, font, and pixel for every item. It's so easy to bring your designs to life now. #### **Meet the demands on time ⏳** Have more time to focus on functionality, coding, and testing. **Get ready-to-run UI and project files 💻** Export the user-interface design as a fully-working code with assets. **Remove conflicts and misunderstandings 🗣** Improve designer-developer collaboration. ### What are the most important features of the design to code with Monday Hero? Our functions that developers & teams love: * Converting layers to native Android / iOS components, * **Exporting the source-code, assets, fonts, colors, and UI** for iOS/Android via plugins and working independently, * UI/Layout (**Storyboard/XML) support**, * Responsive UI/Layout to **support all screen sizes**, * Customization of the code output with **Code Preferences**, * Exporting the design as a new project / into an existing project / only selected screens, * Working in an **all-in-one place** with the team, * Dark/Light theme is available,\ … and many more. ### Documentation In the docs, you will find 3 sections. In the first section, you will find the introduction and the tips that will **prepare you to have the smoothest way to use Monday Hero** which includes: 1. [Workflow basics](/v1-mac-app/workflow-for-design-to-code) 2. [Installation](/v1-mac-app/getting-started/install-app-and-plugin) 3. [Login & Create Your First Project](/v1-mac-app/getting-started/login-create-project-in-monday-hero) 4. [ Roles & Manage Your Team](/v1-mac-app/getting-started/manage-team-developer-designer-role) 5. [ Prepare Design To Get Best Results](/v1-mac-app/getting-started/design-handoff-to-ios-android-developer) 6. [ Export Your Design File To Monday Hero](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero) topics. In the second section, you will **work with Monday Hero**. This section covers: 1. [Automatically Generated Components](/v1-mac-app/working-with-monday-hero/auto-component-code-generation) 2. [Convert To Components](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code) 3. [Configure Code Preferences](/v1-mac-app/working-with-monday-hero/code-preferences-ios-android) 4. [Export Code](/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero) In the last section, you will find tutorials that are handy to discover Monday Hero really fast. ### How to Use Monday Hero Briefly You can see how to use Monday Hero in the 2-minutes-video below. {% embed url="" %} When you watch the video, you'll see that Monday Hero automatically understands the images, texts, and views in the design. Therefore, **it expects you to define which layers will be converted to components/widgets** like buttons, text boxes, lists, or grids that you may need in almost every app. You can generate the component's code dynamically. After converting components, you can customize your code to maintain your/team's code standards(optional). Customizable code allows you to export the code as you prefer and helps you to **get the best fit for your already agreed/existing codebase**. At the last step, you can export the latest version of your project UI with one click as an Xcode project or Android Studio project, and it is ready for development**.** You can start with the [Workflow Basics](/v1-mac-app/workflow-for-design-to-code) to see the way we recommended for getting the smoothest experience. # Workflow Basics Workflow basics that most developers and designers use while converting the Sketch / Adobe XD design to iOS / Android native code with Monday Hero. ## Design to Code Workflow for Developers and Designers Most users & teams follow this workflow while they are working with Monday Hero. Note that this is not a mandatory workflow, but if you are searching for a smoother way to use Monday Hero, you are in the right place.\ \ This workflow includes 3 phases: 1. The first phase covers the **design**, and the user-interface needs to be prepared in either Sketch or Adobe XD. 2. The second phase is about how you **develop** your project. In this phase, you can edit the generated code by defining the interactions (like buttons, text views, and lists...) of the layers/views. 3. Then, you can export your project and pass on the last phase, the **Edit & Review**. In this phase, you will have your ready-to-run project UI. You can do your **edits** and continue to develop your project in your favorite IDE. It is always possible to have some changes in UI while working with designers/customers. When you got reviews and changes, it is possible to keep up with them easily by following the flow from [**Phase 1: Design**](/v1-mac-app/workflow-for-design-to-code#phase-1-design) till [**Phase 3: Edit & Review**](/v1-mac-app/workflow-for-design-to-code#phase-3-edit-and-review) again. You can generate and add changes to your existing project. ![A designated workflow in Monday Hero.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MHuRKzarvyHncQCVPDw%2F-MHucVwTTp2wEtGm2Bzx%2Fbetteralignment.png?alt=media\&token=73cdeba3-67cc-4fa3-bb32-f1c9b1390f52) ### Phase 1: Design As we mentioned above, the design file needs to be prepared in either Sketch or Adobe XD. After you finish your design, you should check whether your design file is ready to share with a developer. This is one of the key points to get the most accurate export from Monday Hero. In the design phase, you have two steps to follow after you complete your design: #### Step 1: Check The Design File In the design file, all icons, background images, and logos that will be used in the artboards must be exportable and grouped, so that they can be used easily. Also, mockup rectangles or designs should be removed from the design file. You can read more about [how to check the design file and avoid possible mistakes here.](/v1-mac-app/getting-started/design-handoff-to-ios-android-developer) ![A Common Mistake Example](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGhr4acZv4N9uwxBmm1%2F-MGhvrw4RAeExa7iiH03%2FGroup%202.png?alt=media\&token=8275a3d6-9773-474f-a788-e1d3b21a404f) #### Step 2: Import Designs into Monday Hero After reviewing the design file and making the final touches, you are ready to export via plugins. Select the artboard/s that you want to work on, and export it/them by using [Monday Hero Plugin](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero) in your current design tool. \ \ Learn more about [how to import a design file into Monday Hero.](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero) ![Export Designs to Monday Hero](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGhr4acZv4N9uwxBmm1%2F-MGhwY9LdCs4gPNnhhL6%2FExport.png?alt=media\&token=0312818d-7643-460e-91e8-516a052cbcce) ### Phase 2: Develop #### Step 1: Converting Layers / Views Into Components When you import a design, Monday Hero automatically understands images, texts, and views in the design. In this step, **it expects you to define the interactions of the layers/views**. You can select the layers and define them as buttons, text inputs, lists, or any other components that you want to use, in that particular scenario. You can create the components with a couple of clicks, and you will see the generated code immediately. Learn more about [how to convert layers to components here.](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code) ![Converting Layers into Components](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGhx_AmMMEqSoF_ptOj%2F-MGi4GxDYfhPoOmrYhMv%2FButon%20gif.gif?alt=media\&token=c316441d-498f-433d-963c-84fecefd922d) #### Optional Step: Customize The Code Before Export You can change the code preferences and maintain your/team's code standards. It allows you to export the code as you prefer and helps you to **get the best fit for your already agreed/existing codebase**. Read about [how to configure your code preferences here.](/v1-mac-app/working-with-monday-hero/code-preferences-ios-android) ![Code Preferences](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGhx_AmMMEqSoF_ptOj%2F-MGi2xSdCLmJrTTSKCak%2FCode%20preferances.png?alt=media\&token=0901c8a1-2d4b-4e14-898e-adaf2fc41d0e) #### Step 2: Export Code as Swift/ Kotlin & XML Code There are two ways to get ready-to-run code out of Monday Hero: exporting a single screen or whole project. You can export them as a new project, or you can export your changes into your existing project. * **Exporting Screen:** If you want to export just a single screen, it will give you all the required code and assets to add it to your existing project. It helps you to handle last-minute changes.
* **Exporting Project:** If you are working on a new app and didn't export before, this is the best to export the entire project. You will get a ready-to-run project code with all screens that you prepared. Depends on the project that Read and learn more about[ how to export code here.](/v1-mac-app/working-with-monday-hero/export-design-to-swift-android-code-monday-hero) ![Exporting Code](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MHudJpYDgvnYV_AjQx6%2F-MHufvB1Dv_2ajCPsxly%2FnewProject.png?alt=media\&token=464e2093-e9ec-47d0-b17e-d0e6cc7a18e2) ### Phase 3: Edit & Review This phase takes place out of Monday Hero. You already exported your project UI source-code and assets as an Xcode project or Android Studio project, and it is ready for development. You can build your project, work on the backend services and configurations as you wish. {% hint style="info" %} When you have some changes in UI, it is possible to keep up with them easily by following the flow from [**Phase 1: Design**](/v1-mac-app/workflow-for-design-to-code#phase-1-design) till [**Phase 3: Edit & Review**](/v1-mac-app/workflow-for-design-to-code#phase-3-edit-and-review) again. You can generate and add changes to your existing project. Then, you can work in your development environment. {% endhint %} #### What's Next? Let's get to work! You can [download](/v1-mac-app/getting-started/install-app-and-plugin) and[ create your first project on Monday Hero](/v1-mac-app/getting-started/login-create-project-in-monday-hero). # Installation Install Monday Hero and enjoy saving time, improve handoff quality, and meet deadlines. ## How to Install Monday Hero Setting up Monday Hero takes just a few clicks. Here are the 2 steps to complete it: 1 - Sign up and create an account via [our website](https://mondayhero.io/). You can manage your current plan, send invitations, and get invited to projects by using your account. {% embed url="" %} 2 - Download the`.zip` file, unpack the ZIP. That's it. You can log in with your account and password. {% embed url="" %} {% hint style="info" %} Monday Hero is compatible with macOS High Sierra (10.13.4) and Sketch 52/Adobe XD 13 or higher. {% endhint %} ### Sketch / Adobe XD Plugins {% hint style="info" %} Sketch plugin will be automatically installed when you install Monday Hero. {% endhint %} 3- Download and Install Adobe XD plugin (if needed). If you can’t see the plugin in Sketch/Adobe XD, **Plugins > Monday Hero**, you can manually download it from [here](https://mondayhero.io/download) and double-click to install in seconds. ![Just download and double-click to install Adobe XD Plugin.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIYTH04MK1AufQ0Fcdl%2F-MIYVKXfDK0Z0v-0OwbN%2FScreen%20Shot%202020-10-01%20at%2012.32.16.png?alt=media\&token=24bfb467-0053-4bfc-a3cc-ebd6f36221e8) As new versions become available, Monday Hero tells you with a pop-up, or you can check manually by clicking **Monday Hero > Check for Updates.**\ \ That's it. Let's [Login & Create Your First Project](/v1-mac-app/getting-started/login-create-project-in-monday-hero). # Login & Create a Project Log in to Monday Hero. Create an iOS / Android project. ## The first step of Design to Code A project on Monday Hero contains everything that you need for creating the UI of your app, from designs to layout code, assets, colors, and fonts. Monday Hero automatically converts the design that's uploaded into the mobile code. This page provides a summary of you how to log in and create your first project. ### Login to Monday Hero When you launch the app, you will see the login pop-up below. You can easily sign in to Monday Hero with your email and password that you created on the [sign-up page.](https://mondayhero.io/signup) ![Log in to Monday Hero.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGgvWZ3z06_Hn10zNMw%2F-MGgwOHAQOgdACtuYS3j%2FScreen%20Shot%202020-09-08%20at%2012.00.01.png?alt=media\&token=b379bc88-51f7-436c-9bcb-129393b2de44) {% hint style="info" %} If you have login issues, you can reset your password by clicking the **Forgot Password** button. Enter the email address you used to register with Monday Hero to Forgot Password page and you'll receive an email to reset your password. {% endhint %} ### Create an iOS/Android Project When you logged in successfully, you will see the projects page. On this page, you can create one and see your projects. To create your first project, click the '**+**' button, and **select a project type**. Available project types are iOS and Android (Beta). To complete creating your first project, **enter a project name**, and click the **Create** button like it's shown below. ![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFUjnFrwlOzHnbf1Ho-%2F-MFUp7la7hhZRhPa2yhy%2Fcreate-the-first-project.gif?alt=media\&token=bd7d4e44-5364-416a-a4ce-e69127e955d2) Click the project and you will see the **No Screens Added To Project** screen. You'll have an empty project: ![No Screens Added to Project Page.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFUjnFrwlOzHnbf1Ho-%2F-MFUrmZH-di_u3rDPsc_%2FScreen%20Shot%202020-08-24%20at%2012.48.44.png?alt=media\&token=ff661fa5-0365-4f82-ad3c-ee357fa4f33d) {% hint style="info" %} Android is now in Private Beta and you need beta access to create your projects. You can join our [Slack via this link](https://bit.ly/SlackMondayHero) and introduce yourself in **#android-beta-request** channel to get access to the private beta. {% endhint %} To continue, [**export your design** ](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero)from Sketch or [**invite your teammate/designer**](/v1-mac-app/getting-started/manage-team-developer-designer-role#invite-your-team-members-to-monday-hero) to your project. # Roles & Manage the Project Team Manage the developers, designers, and import work on Adobe XD/Sketch design to one place. ## Improve the teamwork and work collaboratively On Monday Hero, you can work and collaborate as a project team. You can share the design and work on the same codebase for the project. This page provides information about member types and managing the project team. ### Roles of Designers and Developers Every project can include an unlimited number of designers. The number of developers is limited and can be changed depending on your [plan](https://mondayhero.io/pricing). You can increase your plan and seat as much as you need. If the [available plans](https://mondayhero.io/pricing) don't match with your team, you can [contact us](mailto:support@mondayhero.io?cc=nazli@mondayhero.io\&subject=The%20current%20Monday%20Hero%20plans%20are%20not%20suitable%20for%20our%20team\&body=Company%20name%3A%0D%0ACompany%20size%3A%0D%0ANumber%20of%20designers%20we%20need%3A%0D%0ANumber%20of%20developers%20we%20need%3A). The owner of the project is the user that created the project. Only the owner of the project can manage member settings. An owner can be either [designer](/v1-mac-app/getting-started/manage-team-developer-designer-role#designer) or [developer](/v1-mac-app/getting-started/manage-team-developer-designer-role#developer). You can see the developer and designer rights below. #### 🖥 **Developer** * See and edit the generated code * Change code preferences * Download the layout code * Download assets, colors, and fonts code * Export code as an Xcode or Android Studio project. … and all of the below. #### 🎨 **Designer** * Create and delete components * Upload designs * See colors and fonts * Create and delete projects. ### Manage Your Team While creating an app, it's crucial to work as a team. You can follow the steps below to see the **Member Settings** menu and manage your team. 1 - List your projects. If you're not on the projects page, click on **All Projects > List All Projects.** You will see the projects that you created/are invited before. ![Listing all projects. ](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFeueu6Wldxgdu9Fa_t%2F-MFf-ZvA7A40GRAhzauu%2Flistallprojects.png?alt=media\&token=1e43e378-3cf4-4a03-876f-68ea383d261f) 2 - Move the mouse cursor over your project, you will see the **Settings** icon becomes visible. Click the **Settings icon** **> Member Settings** to see the members of the project. ![Open the Member Settings of a Project.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFeueu6Wldxgdu9Fa_t%2F-MFf1SFWu44il7Fz5ADm%2Fmembersettings.png?alt=media\&token=75c1fb6c-e527-4769-8f8f-b646f3bfbfe4) #### Invite Project Team Members In [**Member Settings,**](/v1-mac-app/getting-started/manage-team-developer-designer-role#manage-your-team) you can add members with their email addresses. Monday Hero automatically sends an email invitation to the new user to join the project. When they sign up and join, they will be able to see the project. ![Inviting a team member to a project.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFUjnFrwlOzHnbf1Ho-%2F-MFUsh1uy2s4JBN3nnHJ%2Finvite-friend.png?alt=media\&token=1251fba2-28a3-439c-9aa9-0aac9e62af69) {% hint style="info" %} When you create a project in the Monday Hero, you will be in the 'Developer' role at first. Thus, you can have whole functionality in the project. {% endhint %} {% hint style="info" %} In the free plan, a project can include 1 developer and an unlimited number of designers. If you need more developer seats, you can check our [pricing](https://mondayhero.io/pricing). {% endhint %} #### Remove Members In [**Member Settings,**](/v1-mac-app/getting-started/manage-team-developer-designer-role#manage-your-team) click **See More** icon shown as "**...**" that's next to the user you want to remove and click **Remove from project**. When you remove a member, the member won't be able to see the project anymore. ![Removing a member from project.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MFf7kYcEpI_bbfCYuAc%2F-MFfB6HroCMCSEfJ91KV%2Fremove%20from%20project.png?alt=media\&token=c532a0cb-1b1a-4b97-b106-d57af26b0195) You can re-invite the removed member/s to your project. #### What's Next? Let's get down to your project! If you don't have the exported design file yet, you can get in contact with the designer(if possible) or [export your own design file](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero). If you already have the design, let's [start to work with Monday Hero.](/v1-mac-app/working-with-monday-hero/auto-component-code-generation) # Prepare Design To Get Best Results You can use this guide and check whether your Adobe XD / Sketch design file is ready to handoff to the developer on Monday Hero. ## Best Ways to Handoff a Design to Developer You will find the steps to be sure that your Sketch/Adobe XD file is ready, and it covers some **tips and do’s to get the most accurate export**. In this way, you can share well-prepared assets and avoid possible mistakes. **As the most important point**, all icons, background images, and logos that will be used in the mobile application must be grouped with the related items if they include more than one item, and **made exportable** in both cases. When you forget to make them exportable or have grouping problems, they will be exported in an incorrect/unwanted way as you can see below. ![Exportable Image vs non-exportable Image](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIUH0ldhVPsKgGV3N3v%2F-MIUVFRDvgV6hiJveSD_%2Fresults.png?alt=media\&token=dc746403-4de6-435a-927c-b97a8039d954) Making images exportable for handover is critical for mobile app development, therefore exportable images can be used easily, and help you to deal with an increased number of devices and resolutions. Let’s make the final touches one by one. ### 🔍 Make the icons and images exportable Check and make the icons and images exportable. Be sure that they are **grouped with the items that they consisted of**. You can see some making exportable examples related to your design tool below. {% tabs %} {% tab title="Sketch" %} ![How to make an icon exportable in Sketch.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MI3KKZ_n4Xj6Ekfjggp%2F-MI3POtphiZox0Zg3YqH%2Fsketchicon01.png?alt=media\&token=a9cd999d-b0ad-4cfc-9bc5-c66497689252) ![The preview of another icon that made exportable.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MI3KKZ_n4Xj6Ekfjggp%2F-MI3PWZtLmB5jj7bCI42%2Fsketchicon02.png?alt=media\&token=02b8b23a-cd82-4a6d-91bf-4039bb5d93fe) {% endtab %} {% tab title="Adobe XD" %} ![How to make an icon exportable in Adobe XD.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MI3KKZ_n4Xj6Ekfjggp%2F-MI3R_OVMj5J7RQu5FMU%2FAdobe-Make%20Exportable.png?alt=media\&token=abb4c1b1-f80b-4923-a2f7-dc5edf39a627) ![The preview of another icon that made exportable.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MI3KKZ_n4Xj6Ekfjggp%2F-MI3SNnjWe-vQE5mlXq1%2FAdobe-Made%20Exportable.png?alt=media\&token=1473f07d-cc3f-46d3-9180-8b226d3cc4cd) {% endtab %} {% endtabs %} After you make them exportable, you can export the design to Monday Hero. It will handle the different sizes of presets, grouping, naming, and file management for you.‍ #### **Additional Info: Supporting Multiple Screen Sizes while Converting Design to Code** Normally, you should create different sizes of images for iOS & Android. Developers put them to the related folder, one by one for every image and icon that you need. For example, in Android, you should create images at 5 different pixel densities. And for iOS, you should create images at 3 different pixel densities to support multiple screen sizes. So, they can be used according to device sizes by getting the best fit. But with Monday Hero, you don’t need to think about the steps that we mentioned above. Just make them exportable and export design to Monday Hero when all are done. It will handle all the steps that you should consider about the assets and their management. ![The pixel densities that should be prepared normally for every item.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiDJUVjdh9FirvNeKu%2Fimage.png?alt=media\&token=907c0f1c-4e20-4cd3-aad1-d6939a9655f2) ### 🌇 Check the background and make exportable If you have a background image that consists of more than one item, **group, and mark as exportable**, as shown below. When you make the background exportable, you should see the image as a whole. This is a usual handover process for delivering developer to the background image. {% tabs %} {% tab title="Sketch" %} ![Grouping the background items](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiDfbyMq8cCKhZOWyr%2Fimage.png?alt=media\&token=7b153a01-6961-494d-83a6-0b8d33e16d95) Select the background items and **Group** them by selecting **Group Selection** in the right-click menu. Then, you should make the group exportable. You can find how to make them exportable below. It is like other elements, but be sure that you clicked the group first not a single element. ![How to make a group exportable in Sketch.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiDjqFbUadZ87PgYH0%2Fimage.png?alt=media\&token=24cb2e31-efc7-4515-a06a-66682645868a) ![The expected result from grouping and making the group exportable.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiDomKV0d1eTtWShXN%2Fimage.png?alt=media\&token=10a5ad28-bb74-4b58-b305-8f08116294b0) {% endtab %} {% tab title="Adobe XD" %} ![Grouping the background items](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJeDaG-K3SchgC7eCC%2Fgrupla.png?alt=media\&token=36707650-32c0-4548-9ab3-7ac5defd1c69) Select the background items and **Group** them by selecting **Group Selection** in the right-click menu. Then, you should make the group exportable. You can find how to make them exportable below. It is like other elements, but be sure that you clicked the group first not a single element. ![How to make a group exportable in Adobe XD.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJfCiWKJo2yqJzsDjE%2Fexport.png?alt=media\&token=573c1853-73ac-4a91-af93-579577da90dd) {% endtab %} {% endtabs %} **The background should include only one/grouped exportable image.** You can find another example below that developers mostly face and have trouble in the design.
![Example of using gradient in a rectangle to make the design look better.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJxt5gAeoVSGtiZF4h%2Fbackgg.png?alt=media\&token=1451b904-dec1-43ad-a285-68077f660378) In this example, the designer put a rectangle over the background and added a gradient to it to make it look better. Now, the background image has 2 layers and looks as imagined. **To make this background ready for development**, it should be grouped/merged/masked depends on your case, and mark exportable. Then, the background will be ready to use as an image. ### 🖌 **Group the paths and lines and make exportable** If your design includes more than one paths/lines you should **group and make them exportable** to have the complete look. Otherwise, they can look improperly because every path will be defined and placed as a single image. Let's see some examples. {% tabs %} {% tab title="Sketch" %} ![Example of a design with many pathes.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MJ1Ni2zBMQ0HB2nrG3I%2F-MJ1oGABhMABlkNDtyzL%2Fsketch-logo.png?alt=media\&token=e54e3392-f721-4ba4-990e-6c4b9937e4a1) ![Grouped and exportable paths in Sketch.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJnJgvje9uMZTURoMW%2Fexportable.png?alt=media\&token=eeb77130-f301-40ba-b85d-607970b15b58) {% endtab %} {% tab title="Adobe XD" %} ![Example of a design with many pathes.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MJ1ylw_T1rhBP1c9ND9%2F-MJ2Ktx457gYaBSTFYn-%2Fadobe-icon-export.png?alt=media\&token=365412fb-1d8a-42f3-8f01-5961af4e82a1) ![Grouped and exportable paths in Adobe XD.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJtqjyuzsp4wvKiZV3%2Fexportable.png?alt=media\&token=7017e757-77b2-4931-b253-0c5924bacf48) {% endtab %} {% endtabs %} You can group and mark them exportable so that the paths and lines can come together and get export in one image seamlessly. ### 👀 Check the logo and make exportable Don’t forget to **make** other icons **exportable**, such as the logo. You can leave other layers as they are. When you make exportable an item, be sure that you check the preview on the below right. {% tabs %} {% tab title="Sketch" %} ![Preview of an exportable icon.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiEDWa3LTNhyuxNbul%2Fimage.png?alt=media\&token=42d86900-4661-4a2c-9606-0fc137a86252) {% endtab %} {% tab title="Adobe XD" %} ![Preview of an exportable icon.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIIRg0BFa3HkZ3PByJT%2F-MIJuoe_tKI5p1_44VIo%2Fexporticon.png?alt=media\&token=b61e6242-5eb9-4e9d-8e7d-d0df7eb141f4) {% endtab %} {% endtabs %} ### 👩‍🎨 Use only the design Mockup (Device curves, etc.) should not be in the Artboard design. Only keep the things that essential for the app. ![Mockup rectangle/designs should be removed.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiEUiMVr_PeNTWLSHo%2Fimage.png?alt=media\&token=449a79c7-ef10-41c1-b09e-dbcb1bc6d3eb) ### 📐 Remove the guiding objects We are aware that designers do lots of tricks to have a perfect design. To align/measure the objects, it's possible to use the rectangles like below, or vectors, lines, or some shapes. Before exporting the screens, please be sure to remove these handy objects/layers. ![The lines or shapes that used for perfect design should be removed.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiEcxKCCdHwAiPxZc6%2Fimage.png?alt=media\&token=981917af-3e06-416f-bc90-a2705d963dd3) ### 📝 Check the texts And as the last one of this step, check your text area. If you leave the text area larger than you need while designing, it may cause some errors related to constraints and unwanted results in the export. ![The text area shouldn't be larger than you need.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiAmf8KjGxpi3QcclP%2F-MGiFCTVEhXUmGCkplU1%2Fimage.png?alt=media\&token=e2d19580-035b-475e-99a0-cc2ac64fa61b) That’s all for checking the design file. You are ready to continue with [Step 2: Export Design to Monday Hero](/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero). # Import Design File Into Monday Hero Import design file to convert the Adobe XD / Sketch design to iOS/Android code. ## Import the UI Design and Auto-Generate the Assets Sketch plugin will be automatically installed when you install Monday Hero. You should select the artboard/s that you want to work on in the design tool. Click **Plugins > Monday Hero > Export**. {% hint style="warning" %} If you can’t see/don't have the plugin in Sketch/Adobe XD, **Plugins > Monday Hero**, you can manually download it from [here](https://mondayhero.io/download) and [**double-click to install**](/v1-mac-app/getting-started/install-app-and-plugin) in seconds. {% endhint %} ### Sketch / Adobe XD Plugin to Import Design {% tabs %} {% tab title="Sketch" %} ![Exporting designs from Sketch via Monday Hero Plugin.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGi65jd_HPR07_RpMnM%2F-MGi6frEFLw5Fb9z7p88%2Fimage.png?alt=media\&token=efe7ee6c-1b68-46bb-bc41-86c19d2a04fd) {% endtab %} {% tab title="Adobe XD" %} ![Exporting designs from Adobe XD via Monday Hero Plugin.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIK7EgdXPf0b0MGzEDJ%2F-MIK8Fb8Md_cq8V1aNbJ%2FScreen%20Shot%202020-09-28%20at%2017.36.46.png?alt=media\&token=9633c03d-1655-402f-a7f6-0941e1558f0e) {% endtab %} {% endtabs %} After clicking the export button, the project selection pop-up will appear. Choose the project and click **Import**. ![Monday Hero Plugin — Project Selection Screen](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MIYOn7El3lH4m3aXDkY%2F-MIYT9LLcuwrDdeepmSK%2Fexport.png?alt=media\&token=d57ab050-d87a-423e-b622-268cb4980804) You will see the **Importing Design** pop-up window. While you are watching the animation, Artboards you've selected are getting analyzed and uploaded to your project. ![Uploading designs through Monday Hero Plugin.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiZHxI_4R9GoKjoB33%2F-MGi_iPPqtszFaGH-1Qe%2Fimage.png?alt=media\&token=d13b3799-d7d6-409a-a331-3d0828c7e49a) When the animation finishes, the screens are added into the project as can be seen below and the design file is exported. ![Monday Hero - Screens: Uploaded screens under Project Screens window.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGiZHxI_4R9GoKjoB33%2F-MGiaBWy_runHotKjZlC%2Fimage.png?alt=media\&token=84acb97e-42ac-4e1b-88a8-bb114c261704) You can continue to work on the screens [individually](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code) or [share them with your team](/v1-mac-app/getting-started/manage-team-developer-designer-role). # Automatically Generated Components Monday Hero can automatically understand some components and convert design to Swift/Kotlin code. ## Auto-Generated Specs from Sketch/Adobe XD to Developers Monday Hero automatically understands the images, texts, and views in the design. On this page, you can find the code that Monday Hero creates code for you. In design tools, everything consists of texts, images, or views. Monday Hero understands and generates this code automatically for you. The details are explained below: * [Labels](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-text-code) * [Images](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-image-to-code) * [Views](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-view-code) However, it's so common to have components/widgets like buttons, lists, or text areas that are essential in the code. You can find them on the [Convert to Components](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code) page. # Views Monday Hero can automatically understand the views, and convert design to Swift/Kotlin code. ## View Design to Code A view expresses a single item on the user interface. It could be a shape like a rectangle, a control item such as a button, an input text field, or an image. A view is a defined specific area on the screen which can be configured to respond to touch events, or it can be used for enriching the user experience. As can be seen below, the **Follow** button has designed with a blue rectangle and a text. Monday Hero automatically detected that the blue rectangle/background is a `View` and the text is a `Label`. Let's check how Monday Hero detected this`View`and generate its code. The blue rectangle on the image below is detected as `View`and called`containerView`, the code will be generated like below. ![A View example.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-ML7cEtJOdBKuhrN8EZ9%2F-ML7ehsymWm12pg0jph4%2Fgenerate-view-code-monday-hero.png?alt=media\&token=48d36c1a-e205-40a9-a265-73f4007028c8) On this page, `View`code will be explained, detailed info about texts and images can be found on the next pages. \ [Learn more about images here.](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-image-to-code)\ [Learn more about texts here.](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-text-code) ### Generated iOS/Android Code of the View The code will be generated like below and constraints are defined in the Storyboard file. {% tabs %} {% tab title="iOS" %} ```swift import UIKit class ProfilePageViewController: UIViewController { // MARK: - Properties @IBOutlet private weak var containerView: UIView! override func viewDidLoad() { super.viewDidLoad() setupViews() setupLayout() } } extension ProfilePageViewController { private func setupViews() { containerView.layer.cornerRadius = 6 containerView.layer.masksToBounds = true containerView.backgroundColor = UIColor.cerulean } private func setupLayout() { //Constraints are defined in Storyboard file. } } ``` {% endtab %} {% tab title="Android" %} ```markup ``` ```markup ``` {% endtab %} {% endtabs %} You can also read and see how these Views become a component together. [You can check how to create a button component here.](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-button-design-to-ios-android-code) # Texts Monday Hero can automatically understand the texts, and convert design to Swift/Kotlin code. ## Text Design to Code Texts are automatically detected and their code is generated by Monday Hero. With texts, you can describe an interface element or provide messages. Texts display static text with no editing features. A Simple label image is and its code is shown below. ![A label example.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGsXmoEr6fQRBjxagGX%2F-MGxGDlge5EgSoQidZwq%2FGroup%2010.png?alt=media\&token=bb845252-a895-4e91-bb02-6c0cca10b8dc) ### Generated iOS/Android Code of Texts {% tabs %} {% tab title="iOS" %} ## Label Texts are called as `Label` in the Swift language. Let's see the generated code and its attributes. ```swift //HomePageViewController.swift import UIKit class HomePageViewController: UIViewController { //Connection from an Interface Builder to a UI component @IBOutlet private weak var simpleExampleLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() setupViews() } } extension HomePageViewController { private func setupViews() { //Text properties simpleExampleLabel.text = NSLocalizedString("simple.example", comment: "") simpleExampleLabel.textColor = UIColor.black simpleExampleLabel.numberOfLines = 0 simpleExampleLabel.font = UIFont.textStyle10 simpleExampleLabel.textAlignment = .center } ``` {% endtab %} {% tab title="Android" %} ## TextView Texts are called as `TextView` in the Android Kotlin/Java XML. Let's see the already generated code and its attributes. ```markup ``` ```markup "SimpleText" "This is a textView example and textViews are better while it kept short and legible." ``` {% endtab %} {% endtabs %} # Images Monday Hero can automatically understand the images, and convert design to Swift/Kotlin code. ## Images in Design to Code Images can be used to improve the UX, capture users' attention, or differentiate the product. ImageViews are non-interactive by default. Images in the designs are automatically detected after exporting. They are saved as assets, and their code is generated by Monday Hero. Icons and logos are also classified as images. Let's have an example and understand it clearly. A simple image, an icon, a logo, and their generated codes can be seen below. ![Images, icon, and logo example.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-ML7eoJNXnSj7CuGYgY_%2F-ML7iI9Vu3pWRnFKaWvP%2Fimage-icon-logo-code-generation-monday-hero.png?alt=media\&token=c6c13e85-cffc-4177-b5e1-0fb733aa2d15) {% hint style="danger" %} All images, logos, and icons **should be marked exportable** before exporting the design to Monday Hero with plugins. Otherwise, the code and assets are not generated for them. [Click and read here to learn more and see examples.](/v1-mac-app/getting-started/design-handoff-to-ios-android-developer) {% endhint %} ### Generated iOS/Android Code of Images Images are called and defined in `ImageView` to display image resources in both Swift/XML/Kotlin language. Let's see the generated code and its attributes. {% tabs %} {% tab title="iOS" %} In iOS, Images are connected to builder and there is no additional code below since the constraints are already defined in the storyboard file automatically. ```swift //ListPageViewController.swift import UIKit class ListPageViewController: UIViewController { // MARK: - Properties //Connection from an Interface Builder to a UI component @IBOutlet private weak var photoImageView: UIImageView! @IBOutlet private weak var iconImageView: UIImageView! @IBOutlet private weak var logoImageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() setupViews() setupLayout() } } extension ListPageViewController { private func setupViews() { } private func setupLayout() { //Constraints are defined in Storyboard file. } } ``` {% endtab %} {% tab title="Android" %} In Android, the source, layout, constraints, etc. all generated automatically as can be seen below. ```markup ``` {% endtab %} {% endtabs %} # Convert to Components Import the Sketch/Adobe XD design and convert design to iOS/Android code in minutes. ## Convert Components and Generate Swift/Kotlin & XML Code Monday Hero automatically understands the images, texts, and views in the design. However, it's so common that components/widgets like buttons, lists, or text areas are essential in the code. It's so easy to convert the layers to the components/widgets. You will also have the styles within the code. Below, there is an example of an app that consists of lists, grids, buttons, and more. Monday Hero can create every single component in the app and the design will be used to show how to do it. If you want to see the tutorial about it, [here](/v1-mac-app/step-by-step-tutorials/travel-app-tutorial-design-to-ios-code) is the link. Follow the steps to explore every single component and start building your app! The first step is to see [how to create a component](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/how-to-convert-component-to-ios-android-code) briefly.
![](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MHGfp9_wQW4RPOAdqRl%2F-MHGmbRFy7VJYN-El9Yq%2FThumbnail%20Travel%20App.png?alt=media\&token=9aa465f9-1d1c-4deb-b22f-f1a9ea6de861) # How to Convert to Components 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 Components to Code, and Save Time on Manual Coding When you import a design, you will get all the style, images, and texts and now it's time to convert some images and texts into components like buttons or lists! Depending on your need, it's possible to shape the code and layers. Below there is a Gif that shows how to create a button. All component flows are similar to each other. * Click **Create Component** button. * Select the class of your component. Now it can be Button, TextView, SearchBar, StatusBar and Lists or grid. * **Click** **and** **drag** to select layers that you want to convert to a component. * **Name** your component, in the Gif, it's called followButton and click **Next.** * For every layer, select the fields that needed to defined like title, image, or background image. The options will be shown on the list. * Click **Add** and **Save** to complete the flow. ![A component creation example.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGieJC5eZitCD6GvJdb%2F-MGif7Y6holkg_MzeIqE%2Fcreate-button.gif?alt=media\&token=e961c25a-3a31-46f8-9387-7dad233c30bf) {% hint style="info" %} [**ImageView,**](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-image-to-code) [**View**](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-view-code)**,** and [**Label/TextView** ](/v1-mac-app/working-with-monday-hero/auto-component-code-generation/design-to-text-code)components are automatically detected and generated by Monday Hero. {% endhint %} ### Supported Components for Code Generation Creating a component is almost the same for other components. You can find supported components for iOS and Android below. * [Buttons](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-button-design-to-ios-android-code) * [TextFields](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-to-ios-android-code) * [Text Areas ](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-text-area-to-ios-android-code) * [Status Bar](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-status-bar-design-to-ios-android-code) * [Search Bar](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-search-bar-design-to-ios-android-code) * [Lists](/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) * [Grids](/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) # Convert to Button Convert Button component to Android/iOS code. ## Button Design to Swift/Kotlin Code Buttons are the most used components in apps and they have app-specific actions. Buttons can have a **title, background,** or **image** as property/class**.** They may include more than one property. A button can have both properties at the same time. For example, background and title, or title and image, etc. **Buttons have 3 properties in Monday Hero:** **Title:** The text displayed over the button. **Background Image:** The image used as the background of the button. Mostly it used when there is a text over the button. **Image:** Icons are good examples of image buttons. They designed for having app-specific actions. ![Button examples with different properties.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MLDr5zEL85YDAyXJycT%2F-MLGwlZew4QaKOkWNT1i%2Fbutton-design-to-code.png?alt=media\&token=a42f8e58-ddec-489d-91b8-38f9c62d8da2) {% hint style="info" %} If a button has only a **background color**, Monday Hero can automatically understand the background color of the button. It will be defined as a `View` with the color. {% endhint %} In this case, Monday Hero automatically understands the blue rectangle as View and gets background color from the rectangle. So, defining the "Follow" label as the **Title** of the button will be enough. How to create a button and add a property/class can be seen in the GIF below. ![Example of button creation that has a title in Monday Hero.](https://2355570332-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEfkN8oSQyQ4BaBzwxH%2F-MGieJC5eZitCD6GvJdb%2F-MGif7Y6holkg_MzeIqE%2Fcreate-button.gif?alt=media\&token=e961c25a-3a31-46f8-9387-7dad233c30bf) When the button is created, the generated code will be like below. ### Generated iOS/Android Code {% tabs %} {% tab title="iOS" %} The button code created is added to the page with the styles. Constraints are defined in the Storyboard file. ```swift //ProfilePageViewController.swift import UIKit class ProfilePageViewController: UIViewController { // MARK: - Properties //Connection from an Interface Builder to a UI component // The button with an image and text @IBOutlet private weak var followButton: UIButton! @IBOutlet private weak var buttonImageView: UIImageView! //Button with an only image @IBOutlet private weak var profileButton: UIButton! //Button with a text and background image @IBOutlet private weak var loginButton: UIButton! override func viewDidLoad() { super.viewDidLoad() setupViews() setupLayout() } } extension ProfilePageViewController { private func setupViews() { // The button with an image and text followButton.layer.cornerRadius = 6 followButton.layer.masksToBounds = true followButton.backgroundColor = UIColor.cerulean followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal) followButton.setTitleColor(UIColor.daisy, for: .normal) followButton.titleLabel?.font = UIFont.textStyle7 followButton.contentHorizontalAlignment = .leading followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9) //Button with an only image profileButton.setImage(UIImage(named: "profileIcon") , for: .normal) //Button with a text and background image loginButton.setTitle(NSLocalizedString("login", comment: ""),for: .normal) loginButton.setTitleColor(UIColor.white, for: .normal) loginButton.titleLabel?.font = UIFont.textStyle2 loginButton.contentHorizontalAlignment = .center loginButton.setBackgroundImage(UIImage(named: "loginBackground") , for: .normal) } private func setupLayout() { //Constraints are defined in Storyboard file. } } ``` {% endtab %} {% tab title="Android" %} The button code created and added to the page with the styles. ```markup