bryant1410 / find-for-framer

Target layers in Framer.js using CSS-like selectors

Find for Framer

Inspired by CSS selectors, this module makes it easier to find and target layers based on the .name property.

Basic examples

# the florin sign (option+f)
ƒ('card1') # returns the first layer matching the name "card1".
ƒƒ('card') # returns an array with all layers named "card" (case-sensitive)
ƒƒ('card > image') # all layers named "image" and direct descendants of layers named "card"
ƒƒ('card image') # all layers named "image" and descendants of layers named "card"
ƒƒ('card, image') # all layers named "card" and all layers named "image"
ƒƒ('card*') # all layers with names starting with "card". eg. card1,card2,card3 etc.
page.currentPage.ƒƒ('card') #  all layers named "card" and descendants of the current page

Try the example project: http://share.framerjs.com/fcwnnqn7npi7/

Tutorial: https://blog.prototypr.io/prototype-user-flows-in-framer-studio-dc87f5211a47#.el1t0sv8k

Installation

1. Download findModule.coffee to your project's /modules directory
2. Add {ƒ,ƒƒ} = require 'findModule' to the top of your code
3. Make sure you're running the latest version of Framer.js. File -> Update Framer...

More info: Framer Docs - Modules

Reference

ƒƒ(selector) # returns array of layers matching the selector
ƒ(selector) # same as above, but returns first matching layer

layer.ƒƒ(selector) # only search descendants of layer
layer.ƒ(selector) # same as above, but returns first matching layer

Selector	Result
A	Any layer named A
A B	Any layer named B that is a descendant of a layer named A (that is: a child, or a child of a child, etc.)
A > B	Any layer named B that is a child (i.e. direct child) of a layer named A
A, B	Any layer named A or any layer named B
*	Any layer (wildcard character)

More examples

ƒƒ() # find all layers in your project
ƒƒ('card > *') # find all layers that are direct descendants of layers named "card"
ƒƒ('card *') # find all layers that are descendants of layers named "card"
ƒƒ('*image*') # find all layers containing "image"
ƒƒ('*card*,*image*') # find all layers containing either "card" or "image"
ƒƒ('card1 > container *') # find all descendant layers of the "container" inside "card1"

# Add a "slide in" animation to all layers ending with "_slideIn"
for layer in ƒƒ('*_slideIn')
    originalValue = layer.maxX
    layer.maxX = 0
    layer.animate
        properties:
            maxX: originalValue
            
# Find layers not stored in variables
for i in [0..5]
    new Layer
        name: item+i
        y: 100*i
        
ƒ('item2').x = 200

Contact

Twitter: @andreaswah

Thanks to

Jordan, Marc, David and Koen for early feedback!