Design Tools at Instagram
I’ve always been a sucker for a good design tool
Let’s face it, as designers, we waste a LOT of time on menial tasks. For us at Instagram, filling out a PSD or Sketch file requires a lot of manual labor. You know the process: make a rectangle in Photoshop, go to the web (in our case, instagram.com), find an image you want to use, drag it into Photoshop, resize and move it into place. Making a grid? Repeat that 15 times and try not to cry.
We’ve built a few tools here to smooth out our workflow:
- We use IFTTT to pull photos posted by cool accounts (puppies, lots of puppies) into our shared Dropbox folder. This gives us a repository of evergreen content that we can quickly access.
- For Photoshop and Sketch, we have scripts to select one or more layers and replace them with random photos from our Dropbox folder with a single keyboard shortcut (Ctrl+Command+R). Want a 3-up grid of photos? Draw three rectangles of whatever size you want, select the layers and press Ctrl+Command+R. It’s incredibly fast. You can peep it here: https://github.com/iansilber/ig-design-tools and here: https://github.com/iansilber/sketch-image-replace
- We have a similar script for profile photos. For this, we keep a repository of our team’s profile photos in a folder and use them to fill in content.
- Here’s the best one: we have a script that let’s us query for a specific hashtag, user or location and fill in our layers with the results. It now takes seconds to build out a mock of a user profile with real data as opposed to 15–20 minutes.
Speed isn’t the only factor that’s important for these tools. The fact that we’re using real data means our designs immediately feel authentic. We can now test a mock with a large variety of datasets in a matter of minutes without changing our process much. This allows our team to focus on the pixels and product without worrying about the grunt work.
If you find yourself doing the same thing over and over I’d encourage you to think about how you can automate that task. Any repetitive work that can be eliminated means more time spent on the creative aspect of design.