# Prepare Design To Get Best Results ## 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](https://learn.mondayhero.io/v1-mac-app/getting-started/import-sketch-adobe-xd-design-into-monday-hero).