Framer Cheat Sheet: Layer Styling

This is an easy-to-use cheat sheet for beginners. Learn how to style layers in Framer using images, colours, text styling and more.

Published in

Designing Humans

12 min readMar 1, 2017

I wrote this series of Framer cheat sheets for people who, like me are not so great at writing code (but pretty pretty darn good at copy & pasting). We will look at the very basics, simple properties and commonly used patterns.

In this Framer JS Cheat sheet, we will look at the following:

How to style a layer
Positioning
Size, shape and rotation
Borders
Colours and transparency
Images
Typography
Shadows
Random
Create a style sheet

1. How to style a layer

First you have to create a layer,

layer = new Layer

then start adding properties to it,

layer = new Layer
    backgroundColor : "#000"

There are two different ways to style a layer. You can give it properties when you first define it. Or you can reference those properties later.

layer = new Layer
    backgroundColor : "#000"#is the same aslayer = new Layer
layer.backgroundColor = "#000"

NOTE: There are also some properties you can’t define when you first create the layer. e.g.

layer.center()

Now that you know how to style a layer, let’s look at more properties. In the words of Groove Armada, “We Super styling”.

2. Positioning

Changing the x and y allows us to move the layer around the screen. When you align a layer to the center (or left, right, top, bottom, etc), the layer aligns to the screen or it’s parent layer.

Basic positioning

Using the x and y axis, you can move your layer around the screen.

# example 1
layer = new Layer
   x: 0
   y: 0# example 2
layer = new Layer
   x: 20
   y: 20# example 3
layer = new Layer
   x: 97
   y: 30

Aligning your layer

Using the align property, you can align your layer to any part of your screen.

#example 4
layer = new Layer
   y: Align.center
   x: Align.center#example 5
#The numbers in brackets allow you to move it off center
layer = new Layer
   y: Align.center(20)
   x: Align.center(-20)#example 6
layer = new Layer
   y: Align.top
   x: Align.center

Snippets:

x: Align.left
x: Align.center
x: Align.righty: Align.top
y: Align.center
y: Align.bottomx: Align.center(100)
y: Align.center(50)

Centering your layer using a function

You can center your layer along the x or y axis (or both) using the center function. When working with centerX() or centerY(), you can offset the position slightly by putting numbers in the brackets.

#example 7
layer = new Layer
layer.center()#example 8
layer = new Layer
layer.centerX()#example 9
layer = new Layer
layer.centerY()#example 10
layer = new Layer
layer.centerX(-20)
layer.centerY(20)

Snippets:

layer.center()
layer.centerX()
layer.centerY()layer.centerX(50)
layer.centerY(-150)

3. Size, shape and rotation

We can change the size and shape of a layer using a variety of properties. We can make squares, rectangles, rounded edged rectangles and circles, etc, all at any size.

Standard Shaping

Using the height and width properties, you can change the size of your layer.

#example 1
layer = new Layer
   width: 50
   height: 50#example 2
layer = new Layer
   width: 200
   height: 50

Using the screen size to shape a layer

Using the screen size to shape a layer is easier than working out the exact height and width of the screen. It also allows the layer to reshape according to platform. You can base the layer shape on another layer, just replace the “Screen” in the below examples with another layer’s name.

#example 3
layer = new Layer
   width: Screen.width
   height: Screen.height#example 4
layer = new Layer
   width: Screen.width - 40
   height: Screen.height - 40#example 5
layer = new Layer
   width: Screen.width / 2
   height: Screen.height / 2

Resize event

Even if you make a layer the same width and height as the screen, it won’t resize when you change the screen size.

To fix this, we create a listener to pick up if the screen size is changing, then change the layer size accordingly.

layer = new Layer
 backgroundColor: "AABAD8"
 width: Screen.width
 height: Screen.height
 
Events.wrap(window).addEventListener "resize", (event) ->
 layer.width = Screen.width
 layer.height = Screen.height

PRO TIP: window.onresize = -> does the same thing and is significantly easier to type out. (Thank you Manas Vaze!)

layer = new Layerwindow.onresize = -> 
   layer.y = Align.center
   layer.width = Screen.width

Border Radius

Border radius can help change your layer into a more interesting shape other than just a square or a rectangle. Because real layers — have curves.

#example 6
layer = new Layer
   borderRadius: 5#example 7
layer = new Layer
   size: 50
   borderRadius: 50#example 8
layer = new Layer
   borderRadius: "10px 0px 10px 0px"

Pro Tip: if you make the border radius “50%” it will always be a circle:

#example 7
layer = new Layer
   borderRadius: "50%"
   size: 50

Scale

Scale changes your layer’s size. It also effects all it’s child layers (will do another cheat sheet on parent and child layers later).

#example 9
layer = new Layer
   size: 50
   scale: 0.5#example 10  
layer = new Layer
   size: 50
   scale: 1#example 11 
layer = new Layer
   size: 50
   scale: 2

The Size property

The size property allows you to either create a square or to copy another layer’s height and width in one go.

#example 12  
layer = new Layer
   size: 50
#example 13
layer1 = new Layer
   width: 70
   height: 50layer2 = new Layer
   size: layer1
   x: 100

Rotation

You can rotate your layer using the following property.

#example 14
layer = new Layer
   rotation: 0#example 15
layer = new Layer
   rotation: 45

4. Borders

Used correctly, borders can add a bit of elegance to a design. Used badly, they can look really khitch, but you might as well give it a try.

#example 1
layer = new Layer
   borderRadius: "10px 0px 10px 0px"#example 2
layer = new Layer
   borderWidth: 3
   borderColor: "#00aeff"#example 3
layer = new Layer
   borderWidth: 3
layer.style.borderStyle = "dashed"

More border styles

layer.style.borderStyle = "solid"
layer.style.borderStyle = "outset"
layer.style.borderStyle = "dotted"
layer.style.borderStyle = "dashed"
layer.style.borderStyle = "double"
layer.style.borderStyle = "groove"
layer.style.borderStyle = "ridge"
layer.style.borderStyle = "inset"

5. Colours & transparency

Framer JS allows for many different colour models and colouring features. We can create anything from gradients, blending modes, transparency, colouring effects and more.

Background Colours

backgroundColor: "red"
backgroundColor: "#F20608"

Colour models

While not always necessary, you can use multiple colour models. Make sure when animating from one colour to the next that the models are the same.

#HEX
backgroundColor: "#000"   
backgroundColor: "#00aeff"#RGB 
backgroundColor: "rgb(0,0,0)"#RGBA (the A allows for transparency)
backgroundColor: "rgba(0,0,0,0.5)"#HSL
backgroundColor: "hsl(201, 95, 57)"#HSLA
backgroundColor: "hsla(201, 95, 57, 0.8)"

Transparency & visibility

There are a couple of ways you can make a layer transparent or opaque. Depending on what property you use — you can affect the child layers and whether the layer is active or not.

THE BACKGROUND COLOUR — TRANSPARENT PROPERTY
If you want to make you background transparent but still active — use the backgroundColor property. It is particularly useful if you are adding hotspots to flat images.

Imagine your layer is Susan Storm (Invisible Woman )—you can’t see her, but she is there.
When using transparent, the child layers are still visible. So a better analogy would be, Susan Storm is invisible — but her clothes aren’t.

backgroundColor: ""  
backgroundColor: "transparent"
backgroundColor: null

THE BACKGROUND COLOUR — OPACITY PROPERTY
If you use an opacity as part of a colour (e.g. the RGBA model), then only that layer is effected. So essentially, Susan Storm is 50% visible and her clothes are 100% visible.

backgroundColor: "rgba(0,0,0,0.5)

THE OPACITY PROPERTY
By using the opacity property, all the child layers will be affected too. So Susan Storm would be 50% invisible and so would her clothes.

opacity: 0.5

THE VISIBLE PROPERTY
The visible property is a boolean (true or false statement) that allows your layer to be actionable or inactive as well as visible and invisible. For example, The Hulk is either there or not there. He can’t do anything if you can’t see him.

visible: false  #Can't see layer
visible: true   #Can see layer

Gradients

Feel like jumping on the gradient bandwagon? Using a webkit, you can!
If you need some gradient inspiration, check out UI Gradients.

NOTE:
You can’t animate from one gradient to another the way you would with a normal colour.

#example 1
layer = new Layer
layer.style.background = "-webkit-linear-gradient(top left, #FFAA5C 0%, #FFEEAD 100%)"#example 2
layer = new Layer
layer.style.background = "-webkit-linear-gradient(bottom right, #FFAA5C 0%, #FFEEAD 100%)"#example 3
layer = new Layer
layer.style.background = "radial-gradient( #FFAA5C 0%, #FFEEAD 60%)"

Colour effects

There are other colouring effects that apply to both background colour and images.

brightness: 200  #range is dependent on the colour
contrast: 50     #range is dependent on the colour
saturate: 1000   #range is dependent on the colour
sepia: 100       #range is 0-100
grayscale: 100   #range is 0-100
hueRotate: 40    #range is 0-359
invert: 100      #range is 0-100

Blending modes

Like photoshop, sketch and other design tools, you can apply blending modes to your layers.

#example 2
layer.style.mixBlendMode = "multiply"#example 3
layer.style.mixBlendMode = "overlay"#example 4
layer.style.mixBlendMode = "screen"

Random Colour

Random Colour is a total win for lazy people because it it randomly generates colours, without you having to think too hard about it. This is especially useful when you are testing an idea and need to generate random colours quickly. In the below example you can see the colour change on reload (cmd + r). You can add an opacity to the colour by changing the value in the brackets.

backgroundColor: Utils.randomColor()backgroundColor: Utils.randomColor(0.2)

6. Images

Adding an image to a layer is easy. The image will resize itself to the layer, so make sure your layer’s sizing is correct. Save your images in your “images” folder in your framer file or use a url.

#Using your own image
images: "images/my photo.jpg"#Using an image online
images: "https://mysite.com/photo.gif"

Random Image

Random Image brings us another win for lazy people. Using random image, you can quickly import random images from UnSplash. This is particularly useful if you need to generate random pictures if you are testing an idea.

image: Utils.randomImage()

Image effects

Same as colour effects, these properties will alter your image.

brightness: 200  #range is dependent on the colour
contrast: 50     #range is dependent on the colour
saturate: 1000   #range is dependent on the colour
sepia: 100       #range is 0-100
grayscale: 100   #range is 0-100
hueRotate: 40    #range is 0-359
invert: 100      #range is 0-100

7. Typography

Creating a text layer is easy — styling it on the other hand can be tricky. By default, the text will always be white.

layer = new Layer
    html: "hello world "

Importing a font from Google

Google has made a wonderful library of fonts for us to use. All you have to go is import one.

#Source Sans Pro
Utils.insertCSS('@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);')#Roboto Mono
Utils.insertCSS('@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);')...layer = new Layer
   html: "hello"layer.style = 
    fontFamily: "'Source Sans Pro', sans-serif"

NOTE:
Unfortunately, Chrome sometimes doesn’t handle custom fonts particularly well when you mirror it from framer. If your fonts break — rather use safari or another browser.

Styling a font

Because you are styling the font and not the layer, you need to define it as a style.

layer = new Layer
   html: "hello world"#example 1
layer.style =
   letterSpacing: “6px"
   fontWeight: "600"#example 2
layer.style =
   textShadow: “0px 2px 4px rgba(1,1,1,0.2)"#example 3
layer.style =
   color : “#559FD6”
   textTransform: "uppercase"#example 4
layer.style =
   fontSize: “28px”
   fontFamily: “’Lora’, serif"

More snippets:

layer.style =
    color : "#0073A8"
    fontSize: "12px"
    fontFamily: "'Source Sans Pro', sans-serif"
    fontWeight: "600"
    lineHeight: "42px"
    letterSpacing: "2px"
    textTransform: "uppercase"
    textShadow: "3px 2px 4px rgba(1,1,1,0.2)"
    textAlign: "center"
    textIndent: "40px"
    fontStyle: "italic"   #"oblique" "normal"

Inline text styling

HTML text formatting can be very useful — especially with long bodies of copy. Unlike properties, you style within the copy itself. Visit W3Schools html formatting.

layer = new Layer
    html: "Hello <b>Jane</b>, how <i> are </i> you?"
<b>...</b>         bold text
<del>...</del>     deleted / stroke through text
<i>...</i>         italic
<mark>...</mark>   highlight text<br>  this creates a line break
&nbsp;  this creates a tab

8. Shadows

Shadows can add a little bit of depth to a layer. Try out the below properties. And remember ; Don’t drop friends — drop shadows.

#example 1
layer = new Layer
   shadowBlur: 10
   shadowY: 10
   shadowColor: "rgba(170,180, 210, 0.2)”#example 2
layer = new Layer
   shadowY: 12
   shadowX: -12#example 3
layer = new Layer
   shadowY: 12
   shadowX: -12
   shadowBlur: 12#example 4
layer = new Layer
   shadowY: 12
   shadowX: -12
   shadowBlur: 12
   shadowSpread: 12

9. Random

blur: 20
value: 20      #used to assign a value to a layer
name: "steve"  #gives the layer a name. Useful in a loop

10. Create a style sheet

Creating a stylesheet will save you a whole lot of pain and heartache. You will be able to change styles throughout your prototypes as opposed to going to each and individual layer. This is especially relevant with colours, fonts and spacing.

Fonts in stylesheets

You start by creating your styles at the top of the document, then referencing them when you need to.

#StylesheetH1 = 
   fontFamily: "'Roboto Mono', sans-serif"
   color: "#999"
   fontSize: "35px"
   fontWeight: "100"
   textAlign: "center"....Heading = new Layer
   html: "hello"
Heading.style = H1
PageHead = new Layer
   html: "welcome"
PageHead.style = H1
PageHead.style.color = "#555"   #this overrides the style

Colours in stylesheets

When naming colours, it is best to use the colour function as opposed to the colour itself. e.g. instead of saying “blue” say “ButtonColour”.

#Colour stylesheetButtonColor = "#00aeff"
CardColor = "#ddd"
HeadingColor = "#555"....card1 = new Layer
   backgroundColor: CardColor

Sizing in stylesheets

Creating your padding in your stylesheet can save you a whole lot of time. And you can readjust your whole layout in one go.

#Sizing stylesheetpadding = 20
BoxWidth = 300...layer = new Layer
   width: BoxWidth - (padding * 2)
   x: padding
   y: paddingsublayer = new Layer
   parent: layer
   x: padding
   y: padding
   width: layer.width - (padding * 2)

Try this example of how a style sheet could help your design.

Closing thoughts

Most styling properties are taken from css, e.g. font-size in css becomes fontSize in coffeeScript. So if you can’t find the property you are looking for, check w3 school.

Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update :)