framer plugin

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.

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.