Framer and CoffeeScript 1 Flashcards
What does @ symbol mean in CoffeeScript?
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, CoffeeScript will automatically assign those values as properties of the object.
How to import (from Sketch into Framer) an asset with some transparent padding? (2 techniques)
- 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).
How to print the properties of myObject?
for… of (“key” and “value” are just conventional words that you can change)
Illustrate what are x and y for an object
Illustrate what is midX
Illustrate what is midY
Illustrate what are minX and minY
Illustrate what are maxX and maxY
Another keyword can be used for that
unless
What should be the value for the else condition to work?
==21
Which property allows you to set or capture the x, and y values of a layer?
layer.point
Which property allows you to set or capture the width and height values of a layer?
layer.size
Which property allows you to set or capture the x, y, width and height values of a layer?
layer.frame
Which property gets or sets all properties for a layer?
layer.props
Which shortcut to quickly display documentation in Framer?
cmd + d
How to deactivate click when scrolling on elements that are clickable otherwise?
(because we touch elements when scrolling)?
if not scroll.isMoving
How to prevent a draggable element which also contains a scroll from doing both interaction at the same time?
(Usually, we don’t scroll while dragging)
layer.draggable.directionLock = true
Are invisible/hidden Sketch layers imported into Framer?
Yes, as long as they’re inside a group. Their visibility is set to false inside Framer
How does Framer handle Sketch’s artboards?
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.
How to simulate a @2x rendering from a @1x Sketch import?
(Can cause a slight blur rendering)
Framer.Device.contentScale = 2
Inside a loop, each time an element is created, can we store it inside an array?
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
How to easily get/edit most of the CSS properties of layers ?
(-> which layer member is it and which naming convention for the properties?)
layer.style
Next to the standard CSS property names (string) you can also camelCase naming.
How to edit the border of layerA ? (2 ways)
- layerA.style[“border”] = “1px solid red”
- layerA.style.border = “1px solid red”
Give two ways to edit the border color of layerA
- layerA.style[“border-color”] =
- layerA.style.borderColor =
How to edit several style properties of layerA?
layerA.style =
“outline”: “1px solid red”,
“padding”: “10px”
How to print a specific style property ?
(like layerA’s outline or box-shadow)
- print layerA.style[“outline”]
- print layerA.style.outline
- print layerA.style[“box-shadow”]
- print layerA.style.boxShadow
When crafting animations, why is it often better to base a function on a layer.property expression (ex: sth = layerA.height) instead of on the actual value of this property ?
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.
What allows you to set or capture the absolute position of a layer on the screen, ignoring the inherited position from its parents ?
layer.screenFrame <object></object>
What type of data do we get if we print layer.subLayers?
An array
layer.subLayers <array></array>
What is the difference between the first technique and the 2 others?
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)
What is this:
layer.draggable.speedX <number></number>
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.
What is this:
page.snapToPage(page, animate, animationOptions)
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.
layerA = new BackgroundLayer
What is the specificity about BackgroundLayers concerning the fill ?
BackgroundLayers always fill the entire canvas no matter where they’re displayed
How to set the constraints of a draggable layer ?
Ex. 1:
layerA.draggable.constraints = { x: 0, y: 0, width: 200, height: 200 }
Ex. 2 (relative to another element):
layerA.draggable.constraints = layerB.frame
How to declare that a layer cannot be dragged over the constraints defined previously?
layerA.draggable.overdrag = false
Note that the layer can still get over the constraints with momentum.
How to specify in Sketch which image format should be generated ?
Simply add the file format to the layer name, and Framer will take care of the rest. The extension is automatically removed after importing.
Since 22th December of 2015, artboards are imported differently in Framer. Could you explain?
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.
Since 22th December of 2015, there’s a huge improvement about scale when importing in Framer. Could you explain ?
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.
Since 22th December of 2015, in Framer, every color is now…
an animatable property
You can define colors in Framer with […] values. What are these 4 kind of values ?
- CSS names
- HEX
- RGB & RGBA
- HSL & HSLA
Which color model is used by default in Framer ?
By default, Framer uses HUSL because it gives you smoother transitions, but you can easily change it with the following property:
Thanks to brand new Color Class, colors can now easily be stored in a…
…variable
You can also create new Color objects and pass in…
…strings, or objects:
Which color method blends two colors together ?
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.
If multiple elements have the same specific state names (like on/off/etc.), we can create a function to switch them all to the specific state we want. Let’s call this function switchState.
Create it for layerA / layerB / layerC
What is missing in the loop below?
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.
Give some parameters that animation/configuration objects can work with.
How to make a new layer by duplicating an existing one?
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 […].
If necessary, we can print them this way: print layerA.[…]
As for indexing, if we look at the sketch layer pane, where would be the index 0? At the top or bottom?
- 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
How to trigger the an animation created with the animation constructor (see attached picture)?
animationName.start()
Which method cycles through all the layer states of a given element?
What was the former (and now deprecated) method?
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)
What is the new function to align elements?
How to add a curve to a state method (in case the layer wasn’t assigned an animatioOptions object)
