XDSKIN - code and development of simple web app for easier adobe xd prototype sharing
Sharing prototypes, UI design concepts and documentation with clients, coders and stakeholders is an important part of my job, but it misses a simple straightforward way to do this. So I developed an ultra simple HTML/JS webpage that could host embedded interactive Adobe XD prototypes, masked under the mobile device frame.
I have added following to my webpage, features that Adobe XD prototypes lack:
- Device frame for prototypes with the status bar option (and color)
- Setting custom background color behind prototypes
- Possibility to add links for support documentation (ex. PDF)
- Possibility to add video with voice over walkthrough
- QRcode link to the prototype so it can be easily viewed with the phone
- Fullscreen experience
- Short and easy to remember unique URL
Next step is to make this simple page a dynamic platform that anyone can use and to release a small Adobe XD plugin that would generate and update an XDskin instance directly from XD.
XDskin
Adobe XD origin
XDskin video walktrough
