Adobe XD plug-in: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 3: Line 3:
{{Branding TOC}}
{{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  
'''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 plug-in for Adobe XD''' allows you to export graphics from Adobe XD in a format that can be easily imported into [[Woodford]].
'''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 ==
== Installation ==
Use the Plugin Manager feature of Adobe XD to install the Resco plug-in. Search for <code>resco</code> to locate our plug-in. See [https://helpx.adobe.com/xd/help/plugins.html Adobe XD help] for more information.
Use the Plugin Manager feature of Adobe XD to install the Resco plug-in. Search for <code>resco</code> to locate our plug-in. See [https://helpx.adobe.com/xd/help/plugins.html Adobe XD help] for more information about plug-ins.
 
Alternatively, if you receive the file <code>resco-xd-plugin.xdx</code> from another source, you can double-click the file to install it.


== Sample files ==
== Sample files ==


The plug-in comes with sample files:
The plug-in comes with sample files that should help you to get started.
* TBD
* 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
 
== 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 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%).
 
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>.
 
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 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 XD > Export Theme'''. Follow the wizard to export the file "theme.wtheme". This file can be then imported to Woodford in Theme section.
 
== App marketplace icon ==
 
The file appstore-icon.xd 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.
 
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.


== Use case 1..x ==
[[Category:Woodford]]

Navigation menu