Post Details
How To Prepare Design Files For Better Handoff?
Nazli Temurtas
25 Feb 2021
You can use this guide and check whether your design file is ready to share with a developer on Monday Hero.
In this article, you will find the steps to be sure that your Sketch 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.
In your design, all icons, background images, and logos that will be used in the mobile application must be exportable. So that they can be used easily, and help you to deal with an increased number of devices and resolutions.
Letās check them one by one.
Step 1: Check the icons š
Checking the icons is important because if you forget to make them exportable, they can look like a background or be missing. Also, a simulator can scale it in a way that you donāt want at all since it is not defined as an icon or an exportable image.
You can see some icon examples below.
After you click the Make Exportable, Sketch will create the default export preset that you need to use in your app. After that, when you export the design to Monday Hero, it will handle the different sizes of presets, grouping, naming, and file management for you.āš¤
But the Multiple Screen Sizes? Here is the Magical Touch of Monday Hero š§āāļø
Normally, you should create different sizes of presets for iOS & Android. You should put them to the related folder, one by one for every image and icon that you need. Again and again.. For example, in Android, you should create 5 different presets. And for iOS, you should create 3 different presets to support multiple screen sizes. Android Studio and Xcode automatically decide which size is for what device based on the prefixes/suffixes. This is necessary when the same app can run on a variety of devices.
But with Monday Hero, you donāt need to think about the steps that we mentioned above. Just click to Make Exportable and export to Monday Hero when all are done. It will handle all the steps that you should consider about the assets and their management. š¤
Step 2: Check the background š
If you have a background image that consists of more than one part, they should be grouped and then should be marked as exportable, as shown below.
Select blue 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.
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.
Thatās all, the background is ready to go! āš»
Step 3: Check the logo š
Donāt forget to make exportable other icons, 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.
Step 4: Use only the design š©āšØ
Mockup (Device curves, etc.) should not be in the Artboard design. Mockup rectangle or designs should be removed. Only keep the things that essential for the app.
Also, we are aware that designers do lots of tricks to have a perfect design. Like the rectangles that you see below. You may use vectors, lines, or some shapes. Before exporting the screens, please be sure that you removed these handy objects/layers.
And as the last one of this step, check your text boxes. If you leave the textBox larger than you need while designing, it may cause some errors related to constraints and unwanted results in the export.
Thatās all for checking the Sketch file. Letās see what may happen if you didnāt fulfill these steps.
1- No exportable dialog in the Adobe XD.
This happens when you try to export a screen/artboard that has no exportable images. Donāt worry, it is only a warning. If you donāt have exportable images in the artboard, you can click Continue and keep importing your designs.
Solution: If you have an artboard that you want to export some elements, click Cancel. Check the previous steps, and be sure that you click the āMake Exportableā button.
2- You may see transparency/transparent areas instead of the expected icon/logo/background. The reason is some images didnāt group and made exportable properly.
Solution: Check the previous steps and be sure that they are visible, grouped, and exportable.
Thatās all š¤ If you have any difficulty or questions, please feel free to reach us via Slack.
Enjoy your day!