Adobe XD plug-in

Adobe XD is a vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps. It is available on multiple platforms and the basic variant is free of charge.

Resco for XD is a plug-in for Adobe XD that allows you to export graphics from Adobe XD in a format that can be easily imported into Woodford.

Installation

In Adobe XD, available plug-ins are listed within the app. Click Add-ons, then click Plugins. Search for resco to locate our plug-in, then click Install.

Alternatively, you can download the plug-in from Resco website.

1. Unpack the archive.
2. Start Adobe XD.
3. Start the file resco-xd-plugin.xdx.
4. In Adobe XD, click Install on the Install Plugin window.

To verify that your Resco plug-in is successfully installed in Adobe XD, go to Add-ons > Plugins, then switch to the Installed Plugins tab. This is also where you can disable or uninstall the plug-in.

Sample files

The plug-in works best with sample files that should help you to get started.

• images.xd – contains all images and icons from mobile app projects
• theme.xd – aid for creating a color scheme (theme)
• appstore-icon.xd – generate main application icon for publishing to stores

You can download the files from Resco website.

Update images

The file images.xd contains all images and icons that are used in default Resco mobile project. Normally, you can view and modify them via Woodford: edit an app project and select Images from the Project menu. With the Adobe XD plug-in, you can edit the images in Adobe XD and export the results to Woodford. This can save you time, particularly when you need to replace images in bulk.

The file is divided into multiple artboards:

• One for each image folder of a Woodford project.
• One extra (the first) that contains the background component.

The background component is used for setting the borders of an icon. By default it's completely transparent. If you want to display the border of an icon, you can modify its color or transparency. This makes sense particularly during editing. However, remember that during the final export, background should be fully transparent again (transparency = 0%).

Icons are stored in folders - one folder per icon. The name of the folder determines how the icon is exported. Remember the rule for icon naming:

• Folder name must start with icon
• Next comes the directory where the icon is saved in Woodford
• Finally, add the actual file name.

For example, the name of the About icon on the Home screen is: icon / Home / About.

Each icon folder has two layers:

• main - put your artwork into this folder
• bkg - do not modify

To export the images for Adobe XD:

• Select Plugins > Resco for XD > Export Images to start the export wizard.
• Select the output folder.
• Choose categories that you want to colorize.
• Finish the wizard to create the file MobileCRM.zip with images in the required structure and files ready for uploading into Woodford.

For instructions how to import the images into Woodford, see Bulk changes of images. If a new icon has the same name as a default icon, the new icon will replace the original in the mobile project. Otherwise, it is created as a new item.

Update theme

The classic way of modifying Theme in Woodford is to select Theme from the Project menu while editing an app project. The prototype file theme.xd allows you to modify app colors in Adobe XD, preview the result, and export the theme to Woodford.

It includes two types of artboards:

• Preview Screens — they simulate default look of Resco Mobile App. Please don’t edit this artboard – they are just for preview.
• Color Palette — contain all options for colorizing Resco Mobile app. There you can edit color palette. Each color change will be reflected on Preview Screens.

After you are done editing, go to Plugins > Resco for XD > Export Theme. Follow the wizard to export the file "theme.wtheme". This file can be then imported to Woodford in Theme section.

Update the icon in app marketplaces

The file appstore-icon.xd can be used to generate icons of all shapes and sizes used for publishing your custom application in various app stores.

Place the final design of app icon as the main icon component in the Master artboard. Instantly, all versions of the icon in the entire artboard will be replaced. Important: Please disable responsive resizing.

Then go to Plugins > Resco for XD > Export App Icons and follow instructions to export the icons as AppImages.zip. In Woodford, select Mobile Apps from the Administration menu, then click the Import Images tab.