Página inicial

Sua primeira página

Ao entrar pela primeira vez em seu sistema, você verá uma tela com um quadrado para adicionar seu primeiro Artboard, que é onde os elementos gráficos da sua página serão desenhados.

Clique nesse quadrado e adicione seu primeiro Artboard.

Provavelmente seu Artboard estará muito grande na sua tela. Neste caso, é uma boa ideia reduzir o zoom e posicionar a câmera de maneira mais confortável, para isso, segure a Barra de Espaço para ativar a Drag Tool, use o botão de rolagem (scroll) do mouse para aumentar/reduzir o zoom, segure o botão de clique do mouse para arrastar e navegar.

Desenhando seu primeiro bloco

O bloco (Block) é o elemento gráfico básico. Para desenhar um bloco, selecione a Block Tool na barra superior (atalho: B).

Clique e arraste o mouse para desenhar blocos no seu Artboard.

Selecione novamente a Selection Tool na barra superior (atalho: V).

Clique para selecionar seu bloco, caso ele já não esteja selecionado, e verá que o Inspector, o painel lateral usado para inspecionar os elementos selecionados, agora mostra os parâmetros desse bloco.

Vamos mudar a cor de fundo. Para fazer isso, procure o parâmetro Fill e selecione outra cor de fundo.

Preencha o parâmetro Text com o que desejar. Vamos dar mais destaque ao seu texto aumentando o tamanho da fonte, colocando 32 no parâmetro Text Size.

Para salvar suas modificações, desselecione o bloco, você pode fazer isso selecionando seu artboard.

É sempre bom checar como seu Artboard está ficando. Clique no botão Preview embaixo do nome do seu Artboard para ver o estado atual dele.

Resultado:

Sua primeira aplicação

Agora vamos criar uma Application para ligar o que você está construindo a um endereço válido da web.

Para adicionar uma aplicação, dê um clique duplo no fundo cinza do Builder. Um menu irá abrir, nesse menu clique no retângulo escrito Application.

Selecione sua Application, utilizando o Inspector, vamos configurar 2 parâmetros: Domain e Entry Point.

No parâmetro Domain escreva app.

Para configurar Entry Point, habilite ele clicando no círculo. Ao fazer isso, um controle irá aparecer, selecione o valor data2-core-primitives@Artboard na primeira caixa Component, e na segunda selecione o nome do seu Artboard, que deve ser New Artboard como não modificamos o nome.

Para ver se deu certo, dê Play na sua Application utilizando o botão no topo.

Agora temos uma página inicial!