Contente
- Como criar um aplicativo com Framer X
- 01. Crie uma barra de pesquisa
- 02. Crie uma pilha de conteúdo
- 03. Crie uma pilha vertical
- 04. Crie uma nova página
- 05. Apresente as interações
- 06. Adicionar um botão Salvar
Como designers, sempre há a questão de quais ferramentas de prototipagem você deve usar em seu projeto. Existem muitos softwares para tarefas como wireframing (veja nossas principais ferramentas de wireframing e excelentes construtores de sites), prototipagem e construção de interações complexas; no entanto, poucas ferramentas são capazes de lidar com tudo isso. Framer é uma ferramenta que possui todas essas funções e acelera bastante o processo de criação de pequenas animações e interações.
A última iteração, Framer X, agora usa React e JavaScript em vez de usar CoffeeScript para desenvolver micro-interações e animação. Isso ajuda a fornecer tempos de carregamento mais rápidos e melhor desempenho. Além disso, o uso de componentes React significa que os usuários têm mais escopo para adicionar e estender, incluindo a incorporação de reprodutores de mídia, dados em tempo real e gráficos dentro de protótipos.
O teste é uma parte central do processo de construção do protótipo e, embora o Framer X seja ótimo na criação de protótipos interativos, ele precisa de ajuda para ver o quão boas são suas criações. Confira nossa postagem de teste de usuário para algumas das melhores ferramentas para complementar o Framer e ajudar a construir protótipos do mundo real, e certifique-se de que está usando o melhor serviço de hospedagem na web para você.
Como criar um aplicativo com Framer X
Para apreciar totalmente o poder do Framer X, vamos criar um projeto da vida real: um aplicativo de receita de culinária simples com algum conteúdo e mídia (ativos que são salvos em um armazenamento confiável em nuvem). A primeira coisa a construir é a página inicial. Devemos manter as coisas simples com os seguintes elementos:
- Barra de pesquisa padrão para encontrar receitas
- Atividade recente para mostrar as últimas receitas visualizadas
- Cartões de receita mostrando coisas como as receitas mais populares
- Criação de uma visão detalhada da receita com opções de vídeo e compartilhamento
Para começar, você precisa criar um novo quadro (uma prancheta) clicando no ícone + na barra de navegação esquerda. Selecione qualquer estilo de prancheta em uma lista de modelos padrão de iPhone / Android na barra direita. Agora você está pronto para ir.
01. Crie uma barra de pesquisa
Vamos começar construindo a barra de pesquisa. Em vez de criar um retângulo e adicionar um ícone de pesquisa como normalmente faríamos, podemos realmente usar componentes reutilizáveis rápidos no Framer X, eles são chamados de pacotes. Existem milhares de pacotes que podem ser encontrados na barra de navegação esquerda em Loja. Clique em Store, pesquise por Android Kit e Example Kit e instale-os.
Esses pacotes contêm elementos como cartões, botões, teclados, controles deslizantes, entradas e itens de menu de navegação. Depois de instalar esses pacotes, você pode usar os elementos do menu Componentes à esquerda.
Encontre os elementos desejados pesquisando no filtro - neste caso, uma barra de pesquisa, que pode ser encontrada em Kit de exemplo. Basta arrastar e soltar na moldura. Agora você pode modificar propriedades como texto de espaço reservado, tamanho da fonte e cor usando a barra direita.
02. Crie uma pilha de conteúdo
Para este bloco de atividade recente, primeiro adicione o texto ‘Atividade recente’, que é bastante simples. Agora podemos usar um novo recurso do Framer X chamado Stacks. Isso pode ser feito clicando no ícone + e selecionando Pilha S no menu. Depois de selecionar a pilha, arraste e solte uma área de 600 x 300 no quadro de trabalho para criar uma pilha. Esta pilha será mostrada em azul.
Agora vamos voltar para a seção Componentes e no kit Android, procure o elemento Card-5 e arraste-o para a pilha que acabamos de criar. Duplique essas cartas duas vezes e certifique-se de que todas as três cartas estão na pilha.
Enquanto estiverem na pilha, essas três cartas podem ser facilmente reorganizadas sem que você precise se preocupar com o espaçamento. Se quiser aumentar o espaçamento entre as cartas, você pode aumentar a largura de toda a pilha. É simples assim. Você também pode personalizar esses cartões alterando o nome do título e do plano de fundo de acordo com sua preferência.
Agora que criamos uma pilha, vamos torná-la rolável. Mova-o para fora da moldura / prancheta. Clique no ícone + no painel de navegação esquerdo e clique na opção Rolar. Assim como criamos uma área com a pilha, crie uma área rolável no quadro / prancheta que tenha o mesmo tamanho da pilha.
Agora mude a propriedade da rolagem na barra direita mudando as setas de direção para torná-la uma rolagem horizontal. Depois que nosso contêiner de rolagem é criado, precisamos de conteúdo para ele, que é servido pela pilha que criamos anteriormente. Portanto, basta conectar o contêiner de rolagem à pilha usando o prompt de seta no contêiner de rolagem. Funciona arrastando o ponteiro do mouse para a pilha.
03. Crie uma pilha vertical
Para os cartões de receita, você precisa seguir um método semelhante ao da etapa 2, mas em vez de criar uma rolagem horizontal de cartas, você criará uma vertical semelhante que é essencialmente uma lista das receitas mais populares com miniaturas. Para este exercício, cada cartão para uma receita tem quatro elementos - uma miniatura da imagem, avaliação, nome da receita e tempo necessário para prepará-la.
Não se preocupe com os detalhes de cada cartão. Eles podem ser personalizados com base em seu gosto de design.Siga o mesmo método de usar um cartão dos componentes, duplicando-os e adicionando todos eles a uma pilha com rolagem vertical.
04. Crie uma nova página
Agora vamos criar uma nova página para entrar nos detalhes de uma receita específica. Por exemplo, vejamos o caso da segunda carta aqui: Massa Francesa. Para criar esta nova página, crie uma nova moldura / prancheta e introduza os elementos que precisamos para mostrar mais detalhes sobre a receita da Massa Francesa. Esta nova página pode ser dividida em um vídeo, um título, a classificação, o tempo necessário para fazê-lo e alguns botões de ação, como salvar na lista e compartilhar nas redes sociais.
Para adicionar vídeo, vá até a loja e instale o pacote do YouTube, que permite adicionar vídeos ao seu protótipo sem esforço. Agora vá para o painel Componentes e arraste e solte o elemento YouTube do componente YouTube no quadro.
Ajuste a largura da miniatura para que se encaixe na largura do quadro. No painel de Propriedades direito, você pode inserir a URL do vídeo que deseja reproduzir no protótipo. Se desejar, também existe uma maneira de reproduzir vídeos automaticamente por meio da caixa de seleção no painel Propriedades.
Abaixo deste vídeo, você pode adicionar o título, a avaliação e vários ícones. Para adicionar ícones para o nosso exemplo, usei o componente da loja do Icon Generator. É um processo fácil: basta arrastar e soltar o ícone de base no quadro e, em seguida, alterar a propriedade chamada Ícone no painel do lado direito para ‘coração’ e ‘compartilhar’. Isso mudará os ícones básicos para os ícones de salvar e compartilhar, respectivamente. Suas cores também podem ser facilmente alteradas usando o painel direito.
Para facilitar as coisas para os visitantes, você poderia adicionar uma seção chamada Ingredientes, que listaria todos os ingredientes necessários para a nossa receita - neste caso, Massa Francesa.
05. Apresente as interações
Agora vamos tornar nosso design mais envolvente adicionando interações para um botão. O ideal é que, ao clicar no ícone de compartilhamento, seja exibida uma tela para compartilhar a receita em vários canais de mídia social. Vamos construir isso usando um novo quadro.
Certifique-se de que a largura e a altura desta moldura sejam a mesma largura e altura das outras duas molduras que criamos. A ideia é que essa nova tela de compartilhamento deslize para cima e substitua a tela atual quando o ícone de compartilhamento for clicado.
Para ajudar a tornar a tela distinta, vamos adicionar um pouco de cor a ela e preenchê-la com ícones de mídia social como Facebook, Instagram, WhatsApp e e-mail. Essa tela de compartilhamento também deve ter um ícone X adicionado a ela, que, quando clicado, a traria de volta ao estado original.
Certifique-se de que todos os ícones estejam organizados em uma pilha. Assim que o ícone X for incluído, a próxima etapa é vincular esse quadro para que ele apareça quando você clicar no ícone de compartilhamento.
Para fazer isso, selecione o quadro que contém o ícone de compartilhamento. No painel do lado direito, há uma propriedade chamada Link. Depois de clicar nele, a interface do aplicativo fornecerá uma seta que você pode arrastar para o novo quadro de compartilhamento que criamos. Isso criará um link em segundo plano.
Agora, ao selecionar o ícone de compartilhamento, você observará novas propriedades no painel direito sob Link, que são Destino, Transição e Direção. Cada uma dessas propriedades permite que você altere os elementos, como tipo de transições e a direção em que a tela deve aparecer, etc.
Você pode testar se o protótipo está funcionando ou não clicando no ícone de reprodução localizado no canto superior direito da interface. Da mesma forma, você precisa vincular a tela de compartilhamento à tela de vídeo para que, quando o usuário clicar no ícone X, ele retorne à tela anterior.
Isso pode ser obtido usando uma propriedade de link semelhante e adicionando o destino como a tela do vídeo. Se quiser adicionar um pouco de variação, você pode fazer a direção para a esquerda em vez de para cima e, em seguida, usar o comando play para testar se a interação está funcionando ou não.
06. Adicionar um botão Salvar
Agora vamos adicionar uma interação de sobreposição ao ícone de salvamento. Aqui, nosso objetivo é que sempre que um visitante clicar no ícone em forma de coração, uma janela pop-up aparecerá perguntando se você deseja salvar a receita em uma lista personalizada.
Vamos começar criando um novo quadro chamado listas salvas. Assim como fez com o anterior, certifique-se de que este quadro tenha a mesma largura, mas desta vez você precisa reduzir sua altura porque aparecerá como uma sobreposição quando clicado. Para o estilo do quadro das listas salvas, adicione um cabeçalho, uma entrada de texto para inserir o nome da lista e um botão que é um CTA para salvá-la.
Para vincular, selecione o ícone em forma de coração no quadro do vídeo e adicione um link ao quadro da lista salva. Agora, em vez da propriedade de transição ser um push, transforme-a em uma sobreposição. Ajuste-o para 80% e teste-o usando o botão play. Modifique até ficar satisfeito com a sobreposição. Vincule o ícone X no ícone de listas salvas de volta à página de vídeo.
Veja como usar o Framer X para criar facilmente protótipos interativos acionáveis. Existem também ferramentas avançadas que você pode usar, bem como adicionar trechos de codificação do React aos elementos dos quadros. Além disso, a melhor parte do Framer X é que qualquer um pode dominá-lo testando-o em alguns protótipos.
Este artigo foi publicado originalmente na edição 325 da net, a revista mais vendida do mundo para web designers e desenvolvedores. Compre o número 325 ou se inscrever para a rede.
Junte-se a nós em abril de 2020 com nossa programação de superestrelas do JavaScript na GenerateJS - a conferência que ajudará você a construir um JavaScript melhor. Reserve agora em generateconf.com
