How to include profile pics in your app prototype with Native Studio’s photo picker plugin
Profile pics in a prototype? No problem! Native Studio’s Photo Picker plugin — together with the Shape mask effect — enables the users of your app to snap their own profile pics. (In an easy way. Trust me on that. Even Medium says it’s a 3-minute read!)
First, create a data slot for the image by clicking on “Create: Data Block…” → Data slot. That’s where you can save a piece of data when your app is running. In this case, a camera element stores its image into the data slot, and then another element will be allowed to access the slot so that it can display the image somewhere else.
You’ll see the Data Slot pop up on your Project Map. In this case, we named it ‘slot image’, made sure the toggle is set on ‘Image’ and checked that you’ll allow the data slot to save users’ changes on the device.
Drag a placeholder image on to the design canvas.
In the Element tab on the right, make sure that the “Dynamic update” setting is set on “Data slot”, and that the “Take content from data slot” refers to the correct data slot (in our case, ‘slot image’).
Then, scroll down a bit to the Live Image Effects menu to get that rounded effect. Select “Shape mask” and start working that corner radius!
Photo Picker element plugin
Open Neonto’s Plugin Store and install the Photo Picker plugin. Once installed, the plugin appears in the Elements list.
Drag the photo picker element to the design canvas. This one’s an “invisible” plugin, so you can put it anywhere you like and it won’t affect your app design.
Select the Photo picker element and type in the Data slot name (in this case ‘slot image’). This is the Data slot where the Photo picker stores the selected image.
And finally, select the placeholder image, go to the Interaction tab and check the “When user taps:” box. Select “In element…” and “Element ‘photopicker’ Take a photo”. The plugin allows the user to either choose a photo or take one with their camera. And that’s about it — now you’re all set.
What‘s all this about? Go to www.neonto.com, get the free trial version, do your own app prototypes. Now with profile pics.
