It's super simple: Screenshot Framer simply puts pictures on top of each other (think Photoshop Layers), allows you to move them around and saves the resulting image to disk. You can specify the path of every image layer and use a
.strings file to localize the displayed texts. Once you're done configuring, you can export all possible image & language combinations at once.
This folder allows you to specify background images for your screenshots, if you don't want to go all-white.
(en-US, de-DE, ...) are generated using fastlane snapshot or you may also copy them into this folder. Important is that you have a strings file in this folder called
"1" = "It Starts With a Thought"; "2" = "Add Your Thoughts"; "3" = "Discover Connections"; "4" = "Visualize Your Idea"; "5" = "Productive on the Go"; | This Number is later replaced with variable "image"
This file contain the configuration for the image export.
Open the file
iPhone SE and change the number in the image textfield or language popup. You may also change the position and size of each layer or create new layers.
The main difference to your favorite image editor is that you can specify variables and use them for the image path.
$imagecan contain only numbers (typically 1-5)
$languagecontains every sub-folder name in your project folder (in this case
Sample Project) excluding
backgrounds, device_frames and Export
In the screenshot below the file is:
$language/iPhone SE-$image.png. This is automatically translated to
en-US/iPhone SE-1.png and this file is then rendered. For German this would for example be translated to
Screenshot Frameron your computer by copying it to
/usr/local/binand run following command
cd ~/Developer/MyProject/Screenshots Screenshot-Framer-CLI -project "./iPhone SE.frame"
cd ~/Developer/MyProject/Screenshots Screenshot-Framer-CLI -project .
Screenshot Framerto your repository and run it from there
cd ~/Developer/MyProject/Screenshots ./Screenshot-Framer-CLI -project .
Please keep in mind that this tool was made to automate screenshots for a very specific need, so it might not fit yours. If you find bugs please create an issue first. Pull Requests are very welcome, but we also reserve the right to not merge them, if they don't take the tool into a direction we need. Therefore it's best to first open an issue and discuss your plans, before jumping right in and implementing it.
Export/$language/iPhone SE-$image framed.png