Deeper look into Framer Inventory for Sketch
Brand new version to create linear prototypes with FramerJS
I used to create animations with Apple Keynote — copy & paste from Sketch allowed to hack prototype in minutes. But it can be improved, isn’t it? Introducing Framer Inventory 2.0 for this!
Analyse the whole composition instead of separate screens
The main concept of Framer Inventory is inherited from Keynote: you create a composition in Sketch and plugin generates code to simulate Magic Move transition.
Framer Inventory operates on a current page and relies on names binding: sketch layers with the same name are presented as a single FramerJS layer with predefined states based on artboards sequence (generally it’s bottom to top — from A to D on image above).
If you mark one name several times, Framer Inventory cleans and minimises selection automatically. It also respects hierarchy between layers now!
How to mark layers
We should make Framer Inventory understand which layers we’d like to include in a prototype. It depends on action type:
- Simulate Keynote (observes exportable layers)
- Generate States (observes selected layers)
- Replicate Selected (observes selected layers)
With or without assets?
You can recreate some layers with pure FramerJS but others require assets. Download .sketch file to understand deeply animation possibilities:
Rectangles & ovals are handled without assets if they have:
- up to 1 fill with solid color
- up to 1 inner border with solid color
- up to 1 shadow with solid color
- no inner shadows
- no blurs
Special page to help export assets
Custom shape, group, text or image can’t be exported without assets. For them plugin creates a separate page called “Export for Framer Inventory” — go and select all layers with “CMD+A” to export into your project.
Settings
Mobile Prototyping
Framer Inventory detects iPhone model to use correct retina variable & options on Export page. Helps previewing prototypes for bigger iPhones on smaller iPhones.
Minimal Export
Plugin places static values into layer description, dynamic — into states. For Minimal Export plugin generates delta states.
Low fidelity now with FramerJS
“Fake it till you make it”, make observations and decrease the time spent on prototyping because Sketch composition is ready for testing with the help of Framer Inventory.
