Adobe XD is a new development software program which allows for mockups and prototyping for app development, website development, and tablets. The software is a breakthrough in design development as it removes the need for coding and allows for the designer to focus on the creative aspects of the project. However, as Adobe XD is still in the Beta stages, there are a few milestones and learning curves to get around. One such hurtle is in the importing and integration of 3D content. Here is how to effectively use 3D in Adobe XD.
Use the Kits
The easiest way to get started with the UX of the XD program is to open the user kit which corresponds to the platform that the app will be featured on. As Adobe has created the standard buttons and icons which are associated with each platform, it is a matter of copying and pasting the content into your artboard. Currently IOS, Google, and Microsoft Windows are supported.
Importing 3D images
If you have 3D Models which have been rendered in JPG or PNG format, the only thing that you need to do is go to the import feature. If it is a background just lock the object to keep the image from moving. As this is a visual and not a coding application, you can use higher definition renderings. However, keep in mind that the more dpi your image has and the larger the file, the slower the preview/prototype mode will function.
When importing 3D renders into your scene, XD will support all the current formats which are supported on the web (PNG, JPG, GIF, etc.). By default Adobe XD will import the image in its original size and with the original DPI associated with it. As this is a new product, scaling of the image does not require the holding of the shift key. Just grab a corner and scale accordingly.
What about animations?
Gif images are supported in Adobe XD, animation at this point is not. Because of this, you may wish to include a slideshow instead of an animation. If you received your render from CGTrader or another such 3D model and rendering website, ask the original artist for a few images (or for a 360 image file) of your character or scene. Then you will need to follow these steps
- On the XD artboard load the first image
- Add your buttons on the bottom of the image
- Copy the content of the artboard to the number of slides you have
- Link the button to the corresponding image/artboard ensuring that all buttons are linked appropriately
While this is a bit time extensive, it does give your prototype a bit of animation and interactivity over the static feel and simple click navigation. Another and quicker way to add some 3D animation work would be to have a sliding side bar with a 3D character, to have a 3D render on your header, to use a 3D background which changes the camera angle, etc. The trick to animation in XD is to create it in frame format and to not get excessive with the boards. Remember, this is just presenting the UX to the client, so the functionality is somewhat limited.
Perhaps the best way to integrate 3D elements into your Adobe XD project is through Photoshop and 3D models. Combining the two elements together can allow you to get a rather detailed layered image which you can then save as one of the supported static formats for the program. If working with 3D models directly, such as in 3Ds max or Maya, set your scene and render out at the highest DPI, adjust the image in photoshop adding effects where needed and then export your PNG image for Adobe XD.
Animations in the future?
When exploring the forums and the discussions on the Beta version of XD, there is a huge demand for video and animation capabilities for the program. Additionally, as the XD platform is a conduit of sorts to the App building services of Adobe, it would make sense that this program will quickly allow for social, media, and animation data to be represented in preview mode. However, at this time it is not. Those who have clients that want to see the animations may choose to use Muse for their mock ups.
While Adobe XD is still in the first stages of introduction, there is much which design developers will find lacking. Yet, for a design, mockup, and prototype program, it does allow for more focus on the layout and less on the code. Clients can see how pages will respond to one another without the “when this is done and you click this button” excuse. Is it perfect, no, but compared with what is available it is moving in the right direction. It will be interesting to see how adobe incorporates new features for the 3D artist, animator, gaming developer, and growing visual demand.