View source for Adobe XD plug-in

{{Beta}}
{{Wikipedia|Adobe XD}}
{{Branding TOC}}

'''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 Prototype Tools''' 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 <code>resco</code> to locate our plug-in, then click '''Install'''.

Alternatively, you can download the plug-in from [https://www.resco.net/downloads/adobe_plugin_resco_xd.zip Resco website].
# Unpack the archive.
# Start Adobe XD.
# Start the file <code>resco-xd-plugin.xdx</code>.
# 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.
* <code>images.xd</code> – contains all [[images]] and icons from mobile [[app projects]]
* <code>theme.xd</code> – aid for creating a color scheme ([[theme]])
* <code>appstore-icon.xd</code> – generate main application icon for publishing to stores

You can download the files from [https://www.resco.net/downloads/adobe_plugin_sample_files.zip Resco website].

== Update images ==

The file <code>images.xd</code> 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 projects|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%).

[[File:Xd plugin background.png|600px]]

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 <code>icon</code>
* 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: <code>icon / Home / About</code>.

[[File:Xd plugin images.png|600px]]

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 XD > Export Images''' to start the export wizard.
* Select the output folder.
* Choose categories that you want to [[Images#Colorize|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 [[Images#Bulk_changes|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 <code>theme.xd</code> 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 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 <code>appstore-icon.xd</code> can be used to generate icons of all shapes and sizes used for publishing your [[Custom mobile apps|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.

[[File:Xd plugin appstore.png|600px]]

Then go to '''Plugins > Resco 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.

[[Category:Woodford]]