flowComponentAutoLink

The flowComponentAutoLink module for Framer.js helps you create links, headers and footers for Framer's FlowComponent without leaving Sketch. It consists of a Framer module and a Sketch plugin. The Framer module adds the autoLink() method to your FlowComponents. It will automatically set up links, headers and footers based on your layer names.

Download latest version here

How to set it up

1. Include the flowComponentAutoLink module to your Framer project
2. Open Sketch and select the two layers you want to link together (a button layer and page layer)
3. Create a link using the Sketch plugin and select a transition. Notice how the button layer will change its name
4. Import your changes to Framer
5. Call flowComponent.autoLink() after you've defined your FlowComponent and your start screen.

Supported layer names

• showNext_layerB
• showOverlayTop_layerB
• showOverlayRight_layerB
• showOverlayBottom_layerB
• showOverlayLeft_layerB
• showPrevious
• header
• footer

Replace layerB with the name of the layer you want to link to. The Sketch plugin will generate these names for you but you can write them yourself, too.

Example project

flowComponentAutoLink = require 'flowComponentAutoLink'
sketch = Framer.Importer.load("imported/project@1x")
flow = new FlowComponent
flow.showNext sketch.pageA
flow.autoLink()