Prototyping in Framer: Code Foundations

A simple syntax enable designers to understand, research and discuss solutions wherever they appear online. Without this they are pretty much waiting for someone to work their needs.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

This chapter quickly evolves across three code subjects: 1) items, 2) groups and 3) variables.

After this reading, a Framer user is expected to start reasoning on how each part of code is performing to form the whole.

It's a first step toward encouraging designers to read both Framer's Documentation and other resources across the web.

Items

Items are single pieces of code.

Boolean

Boolean is a switch: the most basic element of code. Its either true or false, always.

true
false

Numbers

Numbers can be either positive or negative. A . is used to write decimals.

0
12
-0.01

Texts

Anything written between "" is a text. "false" is text, not boolean. "12" is also text, not number.

"Cancel"
"- See you tomorrow."

Comments

Anything after a # is a Comment. Comments are ignored by code. So anything goes inside comments:

# true
# 0.2
# "20%"

Groups

Groups aggregate many pieces of code.

Objects

Everything that is not an Item is possibly an object. Objects are written between {}, and can carry properties.

{level: 13, message: "Hazard!", status: false}

In this example, level, message and status are properties of an object.

Layers

Layer is a specific object with specific properties, created by using the new Layer prefix.

new Layer {label: "Cancel", size: 36, visible: false}

Specific interactions happens on screen when you change specific layer properties. This does not happen with common objects.

Arrays

Array is an object carrying a list. Arrays have positions instead of properties, and are written between [].

[12, true, "- See you tomorrow."]

The example above has three positions: 0, 1, and 2.

Group inception

An object can carry other objects inside, including layers and arrays.

{person: {name: "Lucian", age: 20}, likes: ["cake", "chocolate"], friends: 100}

An array can also carry other objects inside:

[{name: "Lucian", age: 20}, ["cake", "chocolate"], 100]

Framer can use indefinite inception levels to organize prototype information.

Group legibility

Framer presumes an object when a property is declared. So {} is not necessary when : appears in code.

label: "Cancel", size: 36, visible: false

Object properties can appear with line breaks instead of ,:

label: "Cancel"
size: 36
visible: false

Write object inceptions with indented properties:

person:
    name: "Lucian"
    age: 20
likes: ["cake", "chocolate"]
friends: 100

The above is an object with three properties. The first is an inception object. Note that arrays will always need [].

Variables

Giving names

Give names to any item or group by using =. This will store them in the memory.

status = true
cash = 50.15
nick = "Lucca"
profile = name: "Lucian", age: 20
badge = new Layer image: 'victory.png'
favorites = ["cake", "chocolate"]

Variables vs properties

A property is a variable that belongs to an object. In the example above, name is property of profile, but variable badge belongs to anyone.

However, it is possible to change and create object properties from outside the {} by using . and =:

profile = name: "Lucian", age: 20
profile.age = 21
profile.nick = "Lucca"

Properties vs. positions

Array positions don’t have names as other object’s properties do. Positions can be accessed, created and changed with []:

wishlist[2] = "candy"

The first position of an array is always [0].

Variable inception

. and [] can be used multiple times when accessing properties and positions of objects inside other objects.

profile.documents.id
profile.friends[10]
profile.friends[10].profile.name

Naming convention

Variable/property names cannot contain spaces, nor start with numbers. Compound names should be written in camelCase:

firstName = "Lucian"
nickName = "Lucca"

Next

Code organization

Basic tools to organize code and prepare terrain for more advanced Framer prototypes.