Framer and Coffee Script 1

CoffeeScript has a few nice features related to the this keyword.

• First, CoffeeScript uses the @ symbol as shorthand for “this.”. For example, @foo is equivalent to this.foo.

• Second, if you use the @ symbol in the parameters of a function, Coffee Script will automatically assign those values as properties of the object.

• Export it manually in the images folder with the transparency (using “slices” for example)

• Use a mask in Sketch that is bigger than the element to mask (so that it will generate the padding around the element). Then, the Framer import function will consider this layer as a whole (need to be a group in Sketch).

for… of (“key” and “value” are just conventional words that you can change)

unless

==21

cmd + d

if not scroll.isMoving

layer.draggable.directionLock = true

Yes, as long as they’re inside a group. Their visibility is set to false inside Framer

Based on the most left artboard.

The x and y properties of the most left artboard on your canvas will be set to 0, 0. All other artboards are positioned relative to this one.

Framer.Device.contentScale = 2

Yes. We can add these lines:
Before/outside the loop, we declare the array

myArray = []

(…)

We add to the array
myArray.push(nameOfInstance)

or see below capture for more options

layer.style
Next to the standard CSS property names (string) you can also camelCase naming.

• layerA.style[“border”] = “1px solid red”

• layerA.style.border = “1px solid red”

• layerA.style[“border-color”] =

• layerA.style.borderColor =

layerA.style =

"outline": "1px solid red",
"padding": "10px"

• print layerA.style["outline"]

• print layerA.style.outline

• print layerA.style["box-shadow"]

• print layerA.style.boxShadow

Because if we update the layer (in Sketch or by overwriting later in the code), the actual value will be outdated. Relative values are often better.

layer.screenFrame

In the first case, items created inside the loop just get assigned a name and some properties but aren't stored inside a variable, so we cannot play with them separately afterwards and do something like print(item1)

An array

layer.subLayers

Modify the horizontal dragging speed. The value is in pixels per mouse moved pixels. The default value is 1. When set lower then 1 dragging will be slower than mouse movement and vice versa. You can set the value to 0 to disable horizontal dragging.

Snap to a specific page. Takes three arguments:

• a page.content layer

• animate (true or false)

• animation options

By default, animate is set to true and the animationCurve use a spring curve.

BackgroundLayers always fill the entire canvas no matter where they're displayed

Ex. 1:

layerA.draggable.constraints = { x: 0, y: 0, width: 200, height: 200 }

Ex. 2 (relative to another element):

layerA.draggable.constraints = layerB.frame

layerA.draggable.overdrag = false

Note that the layer can still get over the constraints with momentum.

layerA.draggable.bounce = false

layerA.draggable.momentum = false

With draggable.momentumOptions (a configuration object).

Ex:

layerA.draggable.momentumOptions = {friction: 2, tolerance: 1}

With draggable.bounceOptions (a configuration object).

Ex:

layerA.draggable.bounceOptions = {friction: 40, tension: 200, velocity: 1}

layerA.on Events.DragMove, ->

print layerA.draggable.velocity

layerA.on Events.Move, ->

print layerA.draggable.velocity

Events.DragAnimationDidStart

Could be used for example when we pull to refresh : when we stop dragging, the animation starts.

Events.DragAnimationDidEnd

Could be used for example when we pull to refresh : when the loader animation stops, the elements get their initial position.

array

Yes.

Ex:

layer.stateCycle( ["state1", "state5", "state44"] )

It will flatten its subLayers.

Large design files can contain a lot of nested layers. If you're leaving these static, you could flatten them before importing. This improves the loading times of your prototypes, especially when shared online. Flattened layers can't be selected in Framer, they're merged with their superLayer. Appending an asterisk (*) to a layer group or artboard will flatten its subLayers.

PNG

JPG & PDF

With PDF support, you're able to use vector graphics that can be infinitely scaled, by adjusting the width and height properties

Simply add the file format to the layer name, and Framer will take care of the rest. The extension is automatically removed after importing.

Previously, Framer stacked all artboards on top of eachother, and all but the first one was hidden. Now, the x and y positions of your artboards are respected, and they're all visible by default. The most left artboard on your canvas in Sketch is set to 0,0. All others are positioned relative to this.

If you're used to designing at @1x resolution — you don't have to scale your designs before importing. Within the import sheet, you can specify at which scale to import. Design for high-density displays without having to work in native resolutions. Framer makes sure your assets are always crisp.

• CSS names

• HEX

• RGB & RGBA

• HSL & HSLA

Yes. Framer will take care of the conversion between these two types of values.

… the colorModel

RGB, HSL and HUSL

By default, Framer uses HUSL because it gives you smoother transitions, but you can easily change it with the following property:

…variable

Alpha (value between 0 and 1)

…strings, or objects:

color.lighten(amount)

amount = a number, from 0 to 100. Set to 10 by default.

color.darken(amount)

amount = a number, from 0 to 100. Set to 10 by default.

color.saturate(amount)

amount = a number, from 0 to 100. Set to 10 by default.

color.desaturate(amount)

amount = a number, from 0 to 100. Set to 10 by default.

color.grayscale()

Color.mix(colorA, colorB, fraction, limit, model)

Blend two colors together, optionally based on user input. The fraction defines the distribution between the two colors, and is set to 0.5 by default.

The limit defines if the color can transition beyond its range. This is applicable when transitioning between colors, using Utils.modulate.

Color.random()

Color.isColor(value)

value = an object or string, representing a color

Color.isColorObject(value)

value = an object, representing a color

Color.isColorString(value)

value = a string, representing a color

…intensive for the GPU. Combined with other transitions like rotation, animating shadows or perspective, you might experience some lag.

We're missing the "i" to iterate with:

for layer, i in layers

If the loop works with the "i", this "i" should be present in the "for" declaration.

When we add the "i" it’s because we’re going to use the index to iterate/work with.

Animation/configuration objects manage animations that target a layer and properties

An animation/configuration object will tween between a start and end value, with a curve.

PDF format.

Just append the layer group's name with the .pdf extension

PDF vector assets are good to play with in Framer because we can resize them infinitely without quality loss. But we cannot tweak other properties like fill-color, stroke, etc.

For this we would need to resort to SVG

(Ex: http://share.framerjs.com/m0iqu4eyir66/)

Fat Arrow functions (=>) gain the scope of the environment they’re defined in

• layer.properties outputs \<object>

• layer.style outputs \<object>

• layer.children outputs \<array>

Taken from Koen Bok's Github:

• @_properties = {}

• @_style = {}

• @_children = []

Two! Indeed, you can now switch between this one and the "default" state.

layer.copy()

This will copy a layer and all its children. The layers will have all the same properties as their copied counterparts (same position and looks). The event listeners will not be copied.

• When importing from Sketch to Framer, sub-Layer-groups will be stored as children in an array.

• If necessary, we can print them this way: print layerA.children

• Index 0 would be at the bottom

animationName.start()

layer.stateCycle(states, options)

The former method was layer.states.next()

Cycle through all the layer states. Once we reach the end of the cycle we start at the beginning again. You can provide an array of state names for the ordering, if you don’t it will order based on when a state was added.

You can also add an animation options parameter to change the animation for a cycle.

Arguments:

• states* — An array of state names. (Optional)

• options* — An object with all the animation options like curve, time and more. (Optional)

cmd + escape

Note that, when outside it and when the cursor is just in front of it, it will unfold the fold.