How to automatically generate different profile photos when designing in Sketch
Let’s say you’re designing a mobile app using Sketch, and let’s imagine that you’re working on a screen with lots of profile photos (eg. a home page).
What’s the easiest way to automatically show different profile photos in your mockup, without needing to select each headshot individually?
This question stumped me for a few days. I sensed that I could do this using some combination of Sketch symbols and InVision’s Craft plugin, but I couldn’t figure it out and Google wasn’t turning up the answer.
Finally, I asked the fine folks at InVision customer support, and I’m sharing the answer here in case it’s helpful to someone else out there.
The Method
- Make sure you have InVision’s Craft plugin installed
- Insert a shape onto your Sketch canvas or artboard (eg. rectangle, circle, etc.) and use Craft Photo to fill in a photo
- Turn the shape into a symbol and insert the symbol onto your canvas or artboard
- ✨🎉🏆✨Duplicate the symbol using Craft Duplicate✨🏆🎉✨
That last step is the part that kept tripping me up. I‘d fill in a photo with Craft Photo, turn the shape into a symbol, and then attempt to insert the symbol every time I needed it. If you want a different photo to show each time, this won’t work.
Instead, you’ll need to use Craft Duplicate to duplicate the symbol. The profile photo section will update automatically each time you duplicate the symbol.
This method works for photos pulled from Unsplash, as well as photos from your system folder or a Dropbox folder.
Works for Text Data as well
In fact, this method works for all Craft Data data types, including text: when you insert any symbol that includes Craft Data and use Craft duplicate, you will see that the layer(s) filled with Craft Data display unique data in each duplicate.
So you no longer need to spend precious minutes coming up with realistic-sounding copy for sample names, headlines, email addresses, cities, entire articles, and much more.
Hope this is useful and illuminating for someone else, and sincere thanks to Lindsey Kotkin at InVision for coming through with the answer!
