<NME> README.md
<BEF> # Framer Inventory for Sketch
- Video: http://timurnurutdinov.github.io/framerinventory/

## Works with Sketch 3.4.2 and Sketch 3.3.x
Will release v2.0 with Medium article soon ;)


>Framer Inventory performs actions on a current Sketch page and handles only code generation. You should export assets manually and then iterate with plugin. Actually, exporting assets is not a deal because Sketch already does it great;)

## 1. Simulate Keynote
![Alt text](/../images/readme/simulate.png?raw=true “Simulate Keynote plugin window”)

This Framer Inventory action mimics Keynote and its Magic Move transition. But you **don’t need to write a single line of code** to arrange layers in FramerJS because you’ve done it in Sketch. Think the way artboards are our slides in presentation.

#### How to use
- Create a sequence of artboards (aka slides in Keynote) in Sketch
- Mark necessary layers as “exportable” (helps to determine layers to include in export).
- Run **Simulate Keynote** action to create code for a linear prototype.
- Choose autoplay (change slides automatically or by click) and click Export.
- Wait until work is done (you’ll see a message)
- Paste into Framer Studio because code is already in your clipboard
- Export assets if it’s needed (exact amount is also mentioned in a message).

#### Works with shapes and groups on the current page
Some shapes such as Rectangle or Oval with sumple styling can be replicated with FramerJS code without an image:

![Alt text](/../images/readme/simulate-shapes.png?raw=true “Simulate Shapes”)

Other shapes and groups need assets to work properly in Framer Studio. Export them manually with the help of Sketch and **Select Exportables** (read below). Plugin helps to estimate the amount of required assets:

![Alt text](/../images/readme/simulate-groups.png?raw=true “Simulate Groups”)

>In order to generate states, artboards should have unique names. At very beginning Framer Inventory checks names and notifies you with a message. It also helps to find dublicates ;)



## 2. Replicate Selected
![Alt text](/../images/readme/replicate.png?raw=true “Replicate Selected plugin window”)
Generates code to place layers in proper place in Framer Studio (like a native Framer Studio import) but:
- Supports @1x Sketch files to generate @2x, @3x or any other code
- Generates code for states (if layer position from artboard A to artboard B has changed, Framer Inventory generates a new state)
- Do not export assets (as I said **Select Exportables** (read below) action will help us here)


#### How to use
- Select necessary layers (unlike Simulate Keynote it works in more accurate way)
- Run **Replicate Selected** action to generate code for FramerJS layers
- Choose position: relative to artboards (by default) or to a parent layer
- Export states: if it’s checked Framer Inventory will generate states as well
- Choose **modifier** name: all properties in generated code are scaled with this variable to support any pixel density screens.
- Press Export and wait until work is done (you’ll see a message)
- Paste into Framer Studio because code is already in your clipboard
- At the top of Framer Studio document add a variable named as **modifier**. (By default it should be “retina = 2” for iPhone 5/6 or “retina = 3” for iPhone 6 Plus)
- Export assets if it’s needed (exact amount is also mentioned in a message).

#### More about modifier
If you want to prototype for iPhone 6 Plus, add variable (named as modifier) at the top of the document
> retina = 3

Code for layers is generated in points but then scaled with this variable.
> exampleLayer = new Layer width: 414 * retina

You can change name of modifier or change it to 1 (if you don’t rely on points in Sketch)
Don’t forget to export properly scaled images, by the way!


## 3.1 Collapse Artboards
Collapse all layers to show artboards only in Layer Inspector. Helpful to check sequence.

## 3.2 Select Exportables
Select all exportable layers on this page.
>The only thing you need is to export images into FramerJS prototype location with Sketch default export.




# Future
You are welcome to suggest ideas or create bug reports. They will shape the future of a Framer Inventory. I'll add some tips & tricks soon.




<MSG> Updated Readme for 2.0

<DFF> @@ -1,81 +1,60 @@
-# Framer Inventory for Sketch
-- Video: http://timurnurutdinov.github.io/framerinventory/
+# Framer Inventory 2.0 for Sketch
+- Landing page with video: http://timurnurutdinov.github.io/framerinventory/
+<a href="https://github.com/timurnurutdinov/Framer-Inventory-for-Sketch/releases">Download for Sketch 3.5+</a>
 
-## Works with Sketch 3.4.2 and Sketch 3.3.x
-Will release v2.0 with Medium article soon ;)
+>Framer Inventory operates within the current Sketch page, handles FramerJS code generation & helps exporting assets manually from automatically generated page.
 
-
->Framer Inventory performs actions on a current Sketch page and handles only code generation. You should export assets manually and then iterate with plugin. Actually, exporting assets is not a deal because Sketch already does it great;)
+![Alt text](/../images-second-version/readme/window.png?raw=true “Framer Inventory plugin window”)
 
 ## 1. Simulate Keynote
-![Alt text](/../images/readme/simulate.png?raw=true “Simulate Keynote plugin window”)
-
-This Framer Inventory action mimics Keynote and its Magic Move transition. But you **don’t need to write a single line of code** to arrange layers in FramerJS because you’ve done it in Sketch. Think the way artboards are our slides in presentation.
+This action mimics Keynote and its Magic Move transition. Artboards are similar to slides in presentation but you can animate layers on them. Preview your ideas just few seconds later you’ve done them in Sketch!
 
 #### How to use
-- Create a sequence of artboards (aka slides in Keynote) in Sketch
-- Mark necessary layers as “exportable” (helps to determine layers to include in export).
-- Run **Simulate Keynote** action to create code for a linear prototype.
-- Choose autoplay (change slides automatically or by click) and click Export.
-- Wait until work is done (you’ll see a message)
-- Paste into Framer Studio because code is already in your clipboard
-- Export assets if it’s needed (exact amount is also mentioned in a message).
-
-#### Works with shapes and groups on the current page
-Some shapes such as Rectangle or Oval with sumple styling can be replicated with FramerJS code without an image:
-
-![Alt text](/../images/readme/simulate-shapes.png?raw=true “Simulate Shapes”)
+- Create a sequence of artboards in Sketch (aka slides in Keynote)
+- Mark necessary layers as “exportable” to include them into a prototype (Note: plugin respects hierarchy and can predict missed states)
+- Run **Simulate Keynote** action to get your FramerJS code
+- Paste from clipboard into Framer Studio 
+- Export assets from automatically generated [Framer Inventory] page (sometimes no assets are needed)
 
-Other shapes and groups need assets to work properly in Framer Studio. Export them manually with the help of Sketch and **Select Exportables** (read below). Plugin helps to estimate the amount of required assets:
+#### Features
+- Easy export: necessary assets are ready on [Framer Inventory] page to be exported into _/your-prototype-name/images_
+- Normalising: dynamic properties are put into FramerJS states, static - into layer description
+- Mobile prototyping: retina support & iPhone detection
+- Minimal export: generate clean states (delta between A & B)
+- Autoplay: preview your prototype without clicks
 
-![Alt text](/../images/readme/simulate-groups.png?raw=true “Simulate Groups”)
 
->In order to generate states, artboards should have unique names. At very beginning Framer Inventory checks names and notifies you with a message. It also helps to find dublicates ;)
 
 
+## 2. Generate States
+Generates code for **selected layers** and supports states. Similar to **Simulate Keynote** but let you write your own additional logic. Works great for high fidelity prototyping.
 
-## 2. Replicate Selected
-![Alt text](/../images/readme/replicate.png?raw=true “Replicate Selected plugin window”)
-Generates code to place layers in proper place in Framer Studio (like a native Framer Studio import) but:
-- Supports @1x Sketch files to generate @2x, @3x or any other code
-- Generates code for states (if layer position from artboard A to artboard B has changed, Framer Inventory generates a new state)
-- Do not export assets (as I said **Select Exportables** (read below) action will help us here)
-
-
-#### How to use
-- Select necessary layers (unlike Simulate Keynote it works in more accurate way)
-- Run **Replicate Selected** action to generate code for FramerJS layers
-- Choose position: relative to artboards (by default) or to a parent layer
-- Export states: if it’s checked Framer Inventory will generate states as well
-- Choose **modifier** name: all properties in generated code are scaled with this variable to support any pixel density screens.
-- Press Export and wait until work is done (you’ll see a message)
-- Paste into Framer Studio because code is already in your clipboard
-- At the top of Framer Studio document add a variable named as **modifier**. (By default it should be “retina = 2” for iPhone 5/6 or “retina = 3” for iPhone 6 Plus)
-- Export assets if it’s needed (exact amount is also mentioned in a message).
 
-#### More about modifier
-If you want to prototype for iPhone 6 Plus, add variable (named as modifier) at the top of the document
-> retina = 3
+## 3. Replicate Selected
+Generates code for **selected layers** without states. Works as a quick start for high fidelity prototyping without states (modulation, sliders & others)
 
-Code for layers is generated in points but then scaled with this variable.
-> exampleLayer = new Layer width: 414 * retina
 
-You can change name of modifier or change it to 1 (if you don’t rely on points in Sketch)
-Don’t forget to export properly scaled images, by the way!
 
 
-## 3.1 Collapse Artboards
-Collapse all layers to show artboards only in Layer Inspector. Helpful to check sequence.
+## 4. Settings
+![Alt text](/../images-second-version/readme/settings.png?raw=true “Settings window”)
 
-## 3.2 Select Exportables
-Select all exportable layers on this page.
->The only thing you need is to export images into FramerJS prototype location with Sketch default export.
+#### 4.1. Scale variable name
+Properties are scaled by this variable to support retina.
 
+#### 4.2. Mobile prototyping
+- Detects iPhone 5/6/6 Plus for previewing
+- Adds correct values for scale variable for iPhone 5/6/6
+- Adds correct export size options on [Framer Inventory] page
 
+#### 4.3. Minimal export for Simulate Keynote
+- Cleans states to generate minimal amount of code
 
+#### 4.4. Autoplay
+- Replaces onClick handler with an autoplay loop
 
-# Future
-You are welcome to suggest ideas or create bug reports. They will shape the future of a Framer Inventory. I'll add some tips & tricks soon.
 
 
 
+# Contact
+You are welcome to suggest ideas and report bugs (ideally with sketch files included). For better communication I suggest using Github issues but you can ping me on Twitter as well: @tilllur

Updated Readme for 2.0