How I made a Device Frame for Adobe XD Prototype
Recently I was working on some prototype for one of my projects which I had to present in front of the audience so I decided to make something fancy. As always I used my favorite Adobe XD, but unfortunately, XD doesn’t have an option to make a device skin frame around the prototype. Of course, this is not what I need on a daily basis but it’s good to have if you need to present the app for the client or stakeholders.
I was looking for a solution to make this prototype along with a skin accessible with a link so I can send it to a client. I decided to design it in React and upload it on GitHub. If you are not familiar with React you can clone my GitHub repository and just replace a prototype link. You are welcome :)
So, firstly what I did, I found a fancy UI template for iPhoneX and cut the inside part in Photoshop to make it translucent. Then I shared a prototype to Adobe Cloud to get an Embed code.
I am not going to explain how to create a React project, there are plenty of tutorials on how to do this. I will just explain my main components so you can easily recreate it. So my main App.js component contains my device image with translucent background. note, image proportions should exactly match your prototype ifame, so I made the size of the image exactly the same as iframe size + 25px for each side not to overlapped the prototype content, but you can play with CSS if you want, it should work as well, for me making it in Photoshop is faster. I used “position: absolute;” “position: relative;” CSS properties to center it, and set up “z-index: 1;” for the top element. Also very important to use property “pointer-events: none;” for the top element, otherwise your prototype will not be clickable.
You can see an animated background on my sample. I did it with a particlesjs, Check this tutorial, it’s pretty easy to do.
If you want to make it live and accessible by link, I recommend using https://www.netlify.com/. Here is 10 minutes tutorial I watched to figure out how to do this, but honestly I spent more than 1 hour to make it work lol.
That’s what I’ve got https://skin-project.netlify.com/
Git hub link: https://github.com/goldrix/data-catalog-mobile
Thanks for reading my post, hope I’ve made someone’s life a little bit easier.
