Have you have ever needed to share your app screenshots with other team members, but skipped adding the frame just to save time? Taking a screenshot is as simple as a click, but designing & dealing with image editing tools is definitely not a developer’s forte. Well, adding a device frame is now a simple keyboard tap!While lurking in the iOSProgramming subreddit, I saw an answer to a question taking me to Fastlane’s page teaching how to take screenshotsusing automated UI Tests. And there, I stumbled upon the frameitcommand.Getting StartedThere are several ways you can follow mentioned in the docs. I prefer using homebrew. First you need to install homebrew, then install fastlane and finally install imagemagick using the commands shown below:

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update && brew install fastlane
$ brew install imagemagick

For iOS

Before and after framing a screenshot with a silver frame

Place your screenshots in a folder, open terminal to that folder and then run fastlane frameit. In seconds, a copy of all the images will be made along with frames!If you runfastlane frameit silver instead, the screenshots will be made in the silver iPhone device skin.As you will notice, it automatically checks the dimensions of your screenshots to choose which iPhone frame to add to the image.For Android

Screenshot before and after using frameit

In a folder for Android screenshot, just run the frameit command with the android modifier instead fastlane frameit android.Note: The Android part didn’t work for me readily because I got an error saying Tried looking for offset information for ‘portrait’, Nexus 5X in ‘/.fastlane/frameit/ latest/offsets.json’. When I opened the offsets.json file in that location, I noticed that the Nexus 5X was written as Nexus 5x, so I updated the file, saved it, and it fixed the error.

#android-app-development #fastlane #mac #programming #ios-app-development #ios