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 declare that a layer cannot go over his constraints even with momentum ?
layerA.draggable.bounce = false
How to deactivate the default drag momentum ?
layerA.draggable.momentum = false
How to configure the momentum options of a draggable layer ?
With draggable.momentumOptions (a configuration object).
Ex:
layerA.draggable.momentumOptions = {friction: 2, tolerance: 1}
How to configure the bounce options of a draggable layer ?
With draggable.bounceOptions (a configuration object).
Ex:
layerA.draggable.bounceOptions = {friction: 40, tension: 200, velocity: 1}
How to print the velocity of a layer while we are dragging it ? (doesn’t take into account the momentum after layer has been dropped)
layerA.on Events.DragMove, ->
print layerA.draggable.velocity
How to print the velocity of a draggable layer while it’s moving ? (taking into account velocity when it’s beeing dragged but also after with momentum)
layerA.on Events.Move, ->
print layerA.draggable.velocity
Which event relates to the moment when the drag action of a layer is stopped (user stops touching the layer) and the layer is going to move thanks to momentum and bounce animations?
Events.DragAnimationDidStart
Could be used for example when we pull to refresh : when we stop dragging, the animation starts.
Which event relates to the moment when a dragged layer has stopped to move with momentum and bounce animations?
Events.DragAnimationDidEnd
Could be used for example when we pull to refresh : when the loader animation stops, the elements get their initial position.
When we create a collection of states for a layer, we kind of create an…
array
When using layer.stateCycle() can we loop inside a specific range, ignoring some states ?
Yes.
Ex:
layer.stateCycle( [“state1”, “state5”, “state44”] )
What does appending an asterisk (*) to a layer group or artboard in Sketch result into when importing in Framer ?
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.
By defalut which format of image is created when importing in Framer ?
PNG
Since 22th December of 2015, what are the two other formats of image we can generate from Sketch ?
JPG & PDF
What is the advantage of having PDF assets in Framer ?
With PDF support, you’re able to use vector graphics that can be infinitely scaled, by adjusting the width and height properties
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
Can we animate #28AFFA to rgb(210,80,10)?
Yes. Framer will take care of the conversion between these two types of values.
From color A to color B, Framer will create a smooth transition with other intermediate colors. This color transition depends on…
… the colorModel
There are 3 colorModel to choose from in Framer. Which are they ?
RGB, HSL and HUSL
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
What does « A » mean in HSBA, RGBA ?
Alpha (value between 0 and 1)
You can also create new Color objects and pass in…
…strings, or objects:
Which color method adds white and return a lightened color?
color.lighten(amount)
amount = a number, from 0 to 100. Set to 10 by default.
Which color method adds black and return a darkened color?
color.darken(amount)
amount = a number, from 0 to 100. Set to 10 by default.
Which color method increases the saturation of a color?
color.saturate(amount)
amount = a number, from 0 to 100. Set to 10 by default.
Which color method decreases the saturation of a color?
color.desaturate(amount)
amount = a number, from 0 to 100. Set to 10 by default.
Which color method returns a fully desaturated color ?
color.grayscale()
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.
Which color method returns a Color instance with a random color value set ?
Color.random()
Which color method checks if the value is a valid color object or color string and returns true or false ?
Color.isColor(value)
value = an object or string, representing a color
Which color method checks if the value is a valid color object and returns true or false ?
Color.isColorObject(value)
value = an object, representing a color
Which color method checks if the value is a color string and returns true or false ?
Color.isColorString(value)
value = a string, representing a color
Because it needs to redraw constantly, animating color can be…
…intensive for the GPU. Combined with other transitions like rotation, animating shadows or perspective, you might experience some lag.
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.
Animation/configuration objects manage animations that target a […] and […]
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 […]
An animation/configuration object will tween between a start and end value, with a curve.
Give some parameters that animation/configuration objects can work with.
Which format can be used to import vector assets from Sketch and how to specify it in Sketch?
PDF format.
Just append the layer group’s name with the .pdf extension
PDF vector assets are good to play with in Framer because […]. But we cannot […].
What other format enables more fiddling?
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/)
What is the specificity of fat arrows functions (=>)?
Fat Arrow functions (=>) gain the scope of the environment they’re defined in
- What does layer.properties output?
- What does layer.style output?
- What does layer.children output?
- layer.properties outputs <object>
- layer.style outputs <object>
- layer.children outputs <array>
Taken from Koen Bok’s Github:
- @_properties = {}
- @_style = {}
- @_children = []
When starting a prototype, if I add a state to a layer, how many states does it have now?
Two! Indeed, you can now switch between this one and the “default” state.
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?
What is the shortcut to exit the fold when inside it ?
cmd + escape
Note that, when outside it and when the cursor is just in front of it, it will unfold the fold.
How to add a curve to a state method (in case the layer wasn’t assigned an animatioOptions object)
