Skip to content

A plugin for fastlane that frames your raw screenshots into the beautiful templates you made!

License

Notifications You must be signed in to change notification settings

spreaker/fastlane-framer-plugin

Repository files navigation

framer plugin

fastlane Plugin Badge

Getting Started

This project is a fastlane plugin. To get started with fastlane-plugin-framer, add it to your project by running:

fastlane add_plugin framer

About framer

Create images combining app screenshots to templates to make nice pictures to upload in App Store or Google Play.

Flow

It gives you the freedom to customize the looks of each image (your designers will love that!) while keep their generation fully automated.

Template images can be anything. The only important thing is that it needs to be the same size as the screenshot it will contains.

You can specify the position and the size of the screen in the template and (optionally) the position and size of the text.

Example

Check out the example Fastfile to see how to use this plugin.

There are 4 lanes: 1º for a simple flow (demo-1), 2º with more languages and screens (demo-2), 3ª for android screenshots with rotation images and more them one frame(demo-3) and last for ios screenshots (demo-4).

Try them by cloning the repo, running fastlane install_plugins and bundle exec fastlane and select lane.

Configuration

From great customizations come great configurations [files]

In order to work, you need to configure each template and the text to draw in the final images.

Running parameters

The framer action support 4 optional parameters (default values are used).

Option Description Default
source_folder path to the folder that contains raw screenshots and text.json file ./fastlane/framer/screens
template_folder path to the folder that contains the templates images and configuration ./fastlane/framer/templates
output_folder path to the folder that will contains the final images, framed. Used then by deliver ./fastlane/screenshots (default one for deliver)
output_suffix filenam suffix for the framed images -framed

Template Configuration

In the template folder you choose, there must be a config.json file (see example). In there you will found

  • a default configuration for all templates
  • a custom configuration for each template (if needed).

default is, as you guess, the default configuration for all templates (a fallback configuration, if you will).

After that, for each template image you have, you have to put a new map with the same filename as your template image.

There are keys for configuring screeshot and for the text.

"iPhone6s": {
  "image": {
    "offset": "+148+172",
    "width": 457
  },
  "text": {
    "offset_y": 1123,
    "height": 210,
    "size": 48
  }
}

Image

Key Type Description
offset String Pixel position in the format +[X value]+[Y value]
width Number space available, in pixel, for the screen
add_below Boolean add screen below the template or not
rotation Number degrees for rotate image
previous Object same parameters as image, used to display the previous image
next Object same parameters as image, used to display the previous image

Text

Key Type Description
offset_x Number X position of the text block
offset_y Number Y position of the text block
height Number height of the text block
size Number font size
font String path of custom font file to use
color String color for the text in hex format (ex. #545454)
padding Number horizontal internal padding of the text block

Screenshots Text

If you want some text in the final framed images, you need to create a text.json file and put it with the raw device screenshots. It makes sense to commit this file in your repository.

text.json is a simple map where key is the part of the screenshot filename (I suggest the same string you use with the snapshot() command on your UI tests. The value can be any strings.

Colors

You can customize the color of the text and the background color applyed below the template (if you have transparencies on the template, you can fill them with the background color).

colors.json is a simple map where key is part of the screenshot filename. The value is a map with 2 optional keys, text and background.

{
  "default": {
    "background": "#00FFFF",
    "text": "#FFFFFF"
  },
  "demo": {
    "background": "#FF00FF",
  }
}

Default values can be defined inside the default map.

Run tests for this plugin

To run both the tests, and code style validation, run

rake

To automatically fix many of the styling issues, use

rubocop -a

Issues and Feedback

For any other issues and feedback about this plugin, please submit it to this repository.

Troubleshooting

If you have trouble using plugins, check out the Plugins Troubleshooting doc in the main fastlane repo.

Using fastlane Plugins

For more information about how the fastlane plugin system works, check out the Plugins documentation.

About fastlane

fastlane is the easiest way to automate building and releasing your iOS and Android apps. To learn more, check out fastlane.tools.

About

A plugin for fastlane that frames your raw screenshots into the beautiful templates you made!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages