Skip to content

Repository files navigation

Screenshot Framer

Create localized App Store screenshots by combining image layers, device frames, backgrounds, and translated text.

📌 Overview

Screenshot Framer is a macOS tool for preparing localized App Store screenshot images. It is designed around a simple layer-based workflow: images are placed on top of each other, positioned, resized, and exported as final screenshot assets.

The tool is useful when an app needs screenshots for multiple languages, devices, or image numbers. Instead of manually creating every screenshot variant in an image editor, Screenshot Framer lets you define reusable frame configurations and render combinations using variables such as image number and language.

A typical workflow may include:

  • A background image
  • A device frame image
  • One or more app screenshots
  • Localized text loaded from .strings files
  • Exported screenshots for each supported language and image number

The original purpose of Screenshot Framer is focused and practical: automate the creation of localized App Store images while still allowing visual control over layer position and sizing.

✨ Features

  • Layer-based screenshot composition
  • Localized text support through .strings files
  • Variable-based image paths for reusable screenshot layouts
  • Batch export for language and image combinations
  • Support for background images
  • Support for device frame images
  • Compatible with screenshot folder layouts commonly produced by fastlane snapshot
  • Command-line export support through Screenshot-Framer-CLI
  • macOS application workflow for adjusting layer position and size

🧩 How It Works

Screenshot Framer composes screenshots by stacking image layers, similar to how layers work in a traditional image editor. Each layer can point to an image path, and those paths may include variables.

The two documented variables are:

  • $image — a numeric value, commonly used for screenshot numbers such as 1 through 5
  • $language — a language folder name, such as en-US or de-DE

For example, a layer path such as:

$language/iPhone SE-$image.png

can resolve to:

en-US/iPhone SE-1.png

or:

de-DE/iPhone SE-1.png

This makes one frame configuration reusable across multiple languages and screenshots.

🌍 Localization

Localization is handled with a screenshots.strings file inside each localized image folder.

Example:

"1" = "It Starts With a Thought";
"2" = "Add Your Thoughts";
"3" = "Discover Connections";
"4" = "Visualize Your Idea";
"5" = "Productive on the Go";

The number is used together with the $image value so that different screenshots can display different localized text.

This approach keeps translations separate from the visual layout. A screenshot layout can remain the same while the displayed text changes per language.

🖼️ Screenshot Assets

Screenshot Framer supports several types of visual assets:

Backgrounds

Background images can be used when a screenshot should not be rendered on a plain white background.

Device Frames

Device frames can be used to place app screenshots inside a device mockup. The original README mentions Apple’s device images and Facebook’s device assets as possible sources for device frame images.

Localized Screenshot Images

Localized folders such as en-US or de-DE can contain screenshots generated by tools such as fastlane snapshot. Each localized folder should include a screenshots.strings file when localized text is needed.

⚙️ Configuration

Screenshot Framer uses frame configuration files to define how screenshot exports should be rendered.

A configuration can define:

  • Which image layers are used
  • Image paths for layers
  • Position and size of layers
  • Localized text values
  • Image number selection
  • Language selection
  • Export behavior

The macOS app can be used to open a frame configuration and adjust layer placement visually.

🖥️ Command-Line Usage

Screenshot Framer includes command-line support through Screenshot-Framer-CLI.

To render a specific frame configuration:

cd ~/Developer/MyProject/Screenshots
Screenshot-Framer-CLI -project "./iPhone SE.frame"

To render screenshots for all devices by passing a directory:

cd ~/Developer/MyProject/Screenshots
Screenshot-Framer-CLI -project .

The CLI can also be run from a local project directory when the executable is placed there:

cd ~/Developer/MyProject/Screenshots
./Screenshot-Framer-CLI -project .

🧰 Technology

Item Details
Platform Mac 10.13+
Language Swift 4
License MIT

✅ Practical Use Cases

Screenshot Framer is intended for teams and developers who need repeatable screenshot production for App Store submissions.

Common use cases include:

  • Creating localized App Store screenshots
  • Exporting screenshots for multiple languages
  • Reusing one layout across several screenshot numbers
  • Adding device frames around app screenshots
  • Combining generated screenshots with marketing text
  • Preparing screenshot sets from fastlane snapshot output
  • Reducing repetitive manual work in image editors

The main benefit is consistency. Once a layout is configured, the same visual structure can be reused across languages and screenshots.

🚧 Known Limitations

The original README notes that Screenshot Framer was created to automate screenshots for a specific need and may not fit every workflow.

Documented limitations include:

  • No layer rearranging through drag and drop in the table view
  • Export may use a large amount of memory, up to 4 GB
  • No aspect-ratio lock when scaling images
  • Output is set to a path such as Export/$language/iPhone SE-$image framed.png for better overview

These limitations are important to consider when deciding whether the workflow matches a project’s screenshot requirements.

🧪 Suggested Workflow

A typical Screenshot Framer workflow is:

  1. Prepare screenshots for each supported language.
  2. Add localized text in screenshots.strings.
  3. Add optional background images.
  4. Add optional device frame images.
  5. Open or create a frame configuration.
  6. Position and size layers in the app.
  7. Use variables such as $language and $image in layer paths.
  8. Export all needed screenshot combinations.
  9. Review exported images before App Store submission.

This workflow is especially useful when the same design needs to be repeated across multiple localizations.

❓ FAQ

What is Screenshot Framer used for?

Screenshot Framer is used to create localized App Store screenshots by combining images, device frames, backgrounds, and localized text into final exported images.

Does Screenshot Framer support localization?

Yes. Localization is handled with .strings files, including a documented screenshots.strings file inside localized folders such as en-US or de-DE.

Can Screenshot Framer export multiple screenshots at once?

Yes. The original README describes exporting all possible image and language combinations after configuration.

Can image paths use variables?

Yes. Screenshot Framer supports $image for numeric screenshot values and $language for localized folder names.

Is there a command-line interface?

Yes. The documented command-line tool is Screenshot-Framer-CLI, which can render a specific .frame file or a directory.

Is Screenshot Framer a general-purpose image editor?

Not exactly. It uses a layer-based approach, but its focus is automating localized App Store screenshot generation rather than replacing a full image editor.

📄 License

Screenshot Framer is licensed under the MIT License.

About

Mac app and command-line tool for composing and exporting localized App Store screenshots from layered images, device frames, backgrounds, and strings-based text localization.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages