Import images with our Adobe XD plugin
Respresso has a powerful Adobe XD plugin that can handle much more than images. (E.g. localizations, colors and app icons). On this page, we will only discuss how it handles images.
For more details - like installation instructions and other categories - please view the common docs.
How Respresso finds images in your design
First of all, images will be imported only if you kept the image category enabled in the plugin configuration screen.
Secondly, the plugin will search only the targeted elements you configured. (By default it searches in all artboards, otherwise the selection.)
Find out more about these integration options here.
Image keys
The plugin uses the image element's name as the image's key.
You can find them in the Layers panel (Ctrl + Y).
(Any element or group can be an image if you marked it for export.)
You can edit element's name by double-clicking their name in the Layers panel.
Advices:
- Name your images before importing them, as keys are never updated from designer tools.
- Use source code compatible (English letters, numbers, dot, underscore, hyphen etc.), structured naming.
Like
screen_name.component_name.image_name(e.g:welcome.header.logoorcommon.menu.handle).
Images
The plugin treats any element marked for export as image to import them as images. If you have an exported element multiple times that has the same checksum (same content id) it will be imported only once. (In this case the key is randomly selected form the provided element names.)
You can set up exports for any element by selecting it and adding an export on the right side panel:
How Respresso merges your image with existing images
Respresso uses a common resource merging process for all the resource categories. Here you can find how it treats images during that process.
Adobe XD provides proper ids for each element, so Respresso can use them to update previously imported images. To use this feature, don't delete and create a new image element, just change the existing one so Respresso can link it to the already imported image.
For content matching (identification), Respresso uses the SHA-256 checksum (hash) of the image.