Fundamentos de código no Framer

Um simples domínio de sintaxe permite que designers entendam, pesquisem e discutam soluções em qualquer ambiente online. Sem isso eles estarão imóveis, esperando que alguém resolva seus problemas.

Este capítulo evolui rapidamente em quatro pilares do código: 1) items, 2) grupos e 3) variáveis.

Após esta leitura, espera-se que usuários do Framer comecem a entender como cada parte do código participa na formação do todo.

Isso permite que usuários consultem tanto a Documentação do Framer, como outros protótipos na internet.

Itens

Itens são as menores peças do código.

Boleano

Boleanos são alternadores: o mais básico dos elementos. Será sempre verdadeiro ou falso.

true
false

Números

Números podem ser tanto positivos quanto negativos. Um . é usado para decimais.

0
12
-0.01

Textos

Qualquer coisa escrita entre "" é um texto. "falso" é um texto, não um boleano. '"12"' também é texto, e não número.

"Cancelar"
"- Até amanhã!"

Comentários

Códigos após uma # são comentários. Comentários são ignorados no código, não importa o que ele contenha:

# true
# 0.2
# "20%"

Grupos

Grupos reúnem muitas peças de código em si.

Objetos

Tudo que não é um item é provavelmente um objeto. Objetos são escritos entre {}, e podem carregar propriedades.

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

No exemplo acima, level, message, status são propriedades do objeto.

Camadas

A camada é um objeto específico, carregando propriedades específicas.

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

Comportamentos específicos acontecem na tela quando alteramos as propriedades das camadas. Isso não ocorre com objetos comuns.

Listas

Listas são objetos com itens ordenados. Listas tem posições no lugar de propriedades, e são escritas entre [].

[12, true, "- Até amanhã!"]

O exemplo acima tem três posições: 0, 1 e 2.

Sub-grupos

Um objeto pode carregar outros objetos em si, incluindo camadas e listas:

{person: {name: "Luciano", age: 20}, likes: ["bolo", "chocolate"], friends: 100}

Uma lista também pode carregar outros objetos em si:

[{name: "Luciano", age: 20}, ["bolo", "chocolate"], 100]

Vários níveis de sub-grupos podem ser usados para organizar as informações.

Legibilidade para grupos

O Framer consegue presumir objetos quando propriedades são declaradas. Então {} não é necessário na presença de :.

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

Objetos podem quebrar linhas ao invés de usar ,:

label: "Cancelar"
size: 36
visible: false

Escreva sub-objetos usando recuos nas propriedades:

person:
    name: "Luciano"
    age: 20
likes: ["bolo", "chocolate"]
friends: 100

Acima temos um objeto com 3 propriedades, uma delas é um sub-objeto. Note que listas sempre precisarão de [].

Variáveis

Dando nomes

É possível dar nomes para qualquer item ou grupo usando =. Isso irá guará-los na memória.

status = true
cash = 50.15
nick = "Lú"
profile = name: "Luciano", age: 20
badge = new Layer image: 'victory.png'
favorites = ["bolo", "chocolate"]

Variáveis vs propriedades

Uma propriedade é uma variável que pertence à um objeto. No exemplo anterior, name é propriedade de profile, e badge não pertence a ninguém.

É possível mudar ou criar propriedades dentro de objetos por fora do {}, quando usamos . e =:

profile = name: "Luciano", age: 20
profile.age = 21
profile.nick = "Lú"

Variáveis vs posições

Nas listas, as posições não tem nomes como as propriedades de objetos tem. Sendo acessadas, criadas e alteradas com []:

wishlist[2] = "doce"

A primeira posição de uma lista é sempre [0].

Sub-variáveis

. e [] podem ser usadas em múltiplos níveis para lidar com propriedades e posições de sub-grupos.

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

Naming convention

Nomes de variáveis/propriedades não podem ter espaços, nem começar com números. Nomes compostos são escritos em camelCase:

firstName = "Luciano"
nickName = "Lú"

Próximo tópico

Organização do código

Ferramentas de organização do código que preparam terreno para protótipos mais avançados.