Use Framer X para construir protótipos interativos

Como designers, há sempre a questão de quais ferramentas de prototipagem você deve usar para o seu projeto. Há muito software lá fora para tarefas como wireframing (veja o nosso top Ferramentas de wireframing. e excelente construtores de site ), prototipagem e construção de interações complexas; No entanto, muito poucas ferramentas são capazes de lidar com todas elas. A Framer é uma ferramenta que tem todas essas funções e acelera muito o processo de criação de pequenas animações e interações.

A última iteração, Framer X. Agora, usa reagem e javascript em vez de usar o CoffeeSript para o desenvolvimento de micro-interações e animação. Isso ajuda a fornecer tempos de carga mais rápidos e melhor desempenho. Além disso, o uso de componentes reagir significa que os usuários têm mais escopo para adicionar e estender, incluindo incorporação de players 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 enquanto o Framer X é ótimo em criar protótipos interativos necessários ajuda para ver como são boas suas criações. Confira nossa Teste do usuário postar para algumas das melhores ferramentas para complementar o Framer e ajudar a construir protótipos do mundo real e garantir que você esteja usando o melhor hospedagem na web. serviço para você.

Como criar um aplicativo com Framer X

Para apreciar plenamente o poder do Framer X, vamos criar um projeto de vida real: um aplicativo de receita de cozinha simples com algum conteúdo e mídia (ativos que são apoiados em confiável armazenamento na núvem ). A primeira coisa a construir é a página inicial. Vamos manter as coisas simples com os seguintes elementos:

• Barra de pesquisa padrão para encontrar receitas
• Atividade recente para mostrar as receitas mais recentes visualizadas
• Cartões de receita mostrando coisas como as receitas mais populares
• Criando uma visão detalhada da receita com opções de vídeo e compartilhamento

Para começar, você precisa criar um novo quadro (um artboard) clicando no ícone + no Navbar esquerdo. Selecione qualquer estilo de Artboard de uma lista de modelos padrão iPhone / Android no bar direito. Agora você está pronto para ir.

01. Construa 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 nós normalmente, podemos realmente usar componentes reutilizáveis ​​rápidos no Framer X, estes são chamados de pacotes. Existem milhares de pacotes que podem ser encontrados na barra de navegação à esquerda sob a loja. Clique na loja, procure por kit android e kit de exemplo e, em seguida, instale-os.

Esses pacotes contêm elementos como cartões, botões, teclados, controles deslizantes, entradas e itens do menu de navegação. Depois de instalar esses pacotes, você pode usar os elementos do menu Components à esquerda.

Encontre os elementos que você deseja pesquisar no filtro - neste caso, uma barra de pesquisa, que é encontrada em Kit de exemplo. Basta arrastar e soltá-lo no quadro. Agora você pode modificar propriedades como texto de espaço reservado, tamanho de 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 Stack 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 como azul.

Agora vamos voltar para a seção Components e sob o 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.

Contanto que estejam na pilha, essas três cartas podem ser facilmente rearranjadas sem você ter que se preocupar com o espaçamento. Se você quiser aumentar o espaçamento entre os cartões, você pode aumentar a largura da pilha inteira. É simples assim. Você também pode personalizar estes cartões alterando o nome do título e do fundo de acordo com o seu gosto.

Agora que criamos uma pilha, vamos torná-lo rolável. Mova-o para fora do quadro / artboard. Clique no ícone + no ponto esquerdo e clique na opção de rolagem. Assim como criamos uma área com a pilha, crie uma área rolável no quadro / artboard que é o mesmo tamanho que a pilha.

Agora, altere a propriedade do rolagem na barra direita, alterando as setas de direção para torná-lo um rolo horizontal. Depois que nosso recipiente de rolagem é criado, precisamos de conteúdo para ele, que é servido pela pilha que criamos anteriormente. Portanto, basta conectar o recipiente 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 as placas de receita, você precisa seguir um método semelhante ao passo 2, mas em vez de criar um pergaminho horizontal de cartões, você criará um vertical similar 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, classificação, nome da receita e tempo necessário para prepará-lo.

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 o rolo 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, vamos tomar o caso do segundo cartão aqui: massas francesas. Para criar esta nova página, crie um novo quadro / artboard e introduza os elementos que precisamos mostrar mais detalhes sobre a receita de massas francesas. 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 para listar e compartilhar em mídias sociais.

Para adicionar vídeo, vá para a loja e instale o pacote YouTube, que permite adicionar sem esforço a vídeos ao seu protótipo. Agora vá para o painel de componentes e arraste e solte o elemento YouTube sob o componente do YouTube no quadro.

Ajuste a largura da miniatura para que ela se adapte à largura do quadro. No painel de propriedades certas, você pode inserir o URL do vídeo que deseja jogar no protótipo. Se você quiser, também há uma maneira de vídeos automáticos através da caixa de seleção no painel Propriedades.

Abaixo deste vídeo, você pode adicionar o título, classificação e vários ícones. Para adicionar ícones para o nosso exemplo, fiz uso do componente da loja do gerador de ícones. É um processo fácil: simplesmente arrastar e soltar o ícone da base no quadro e, em seguida, altere a propriedade chamada ícone no painel do lado direito para "coração" e "compartilhamento". Isso alterará os ícones da base para os ícones Salvar e compartilhar, respectivamente. Suas cores também podem ser facilmente alteradas usando o painel direito.

Para tornar as coisas fáceis para os visitantes, você poderia adicionar uma seção chamada ingredientes, que listaria todos os ingredientes necessários para a nossa receita - neste caso, massas francesas.

05. Introduzir interações

Agora vamos tornar nosso design mais envolvente adicionando interações para um botão. Idealmente, quando você clica no ícone de compartilhamento, você deve ser solicitado a uma tela para compartilhar a receita entre vários canais de mídia social. Vamos construir isso usando um novo quadro.

Certifique-se de que a largura e a altura deste quadro é a mesma largura e altura que os outros dois quadros criamos. A ideia é para esta nova tela de compartilhamento deslizar e substituir a tela atual quando o ícone de compartilhamento é clicado.

Para ajudar a tornar a tela distinta, vamos adicionar alguma cor e preenchê-la com ícones de mídia social, como Facebook, Instagram, WhatsApp e e-mail. Esta tela de compartilhamento também deve ter um ícone X adicionado a ele, que quando clicado a traria de volta ao estado original.

Certifique-se de que todos os ícones são organizados dentro de uma pilha. Assim que o ícone X estiver incluído, a próxima etapa é vincular este quadro para que ele apareça quando você clica no ícone de compartilhamento.

Para fazer isso, selecione o quadro que contém o ícone de compartilhamento. No painel direito, há uma propriedade chamada link. Depois de clicar nisso, 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, quando você seleciona o ícone de compartilhamento, você observará novas propriedades no painel direito no link, que são alvo, transição e direção. Cada uma dessas propriedades permitem alterar os elementos, como tipo de transições e a direção na qual a tela deve aparecer, etc.

Você pode testar se o protótipo estiver funcionando ou não clicando no ícone Play encontrado 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 retorna à tela anterior.

Isso pode ser alcançado usando uma propriedade de link similar e adicionando o destino como a tela de vídeo. Se você quiser dar uma mensagem para adicionar um pouco de variação, você pode fazer a direção deixada em vez de top e, em seguida, usar o comando play para testar se a interação estiver funcionando ou não.

06. Adicionar um botão Salvar

Agora vamos adicionar uma interação sobreposição ao ícone Salvar. Aqui, nosso objetivo é que, sempre que um visitante clique no ícone em forma de coração, deve haver uma janela pop-up aparecer que pergunta se você deseja salvar a receita para uma lista personalizada.

Vamos começar criando um novo quadro chamado listas salvas. Assim como você fez com o anterior, verifique se este quadro tem a mesma largura, mas desta vez você precisa reduzir sua altura porque aparecerá como uma sobreposição quando clicado. Para o estilo do quadro de listas salvas, adicione um cabeçalho, uma entrada de texto para inserir o nome da lista e um botão que é uma CTA para salvá-lo.

Para vincular, selecione o ícone em forma de coração no quadro de vídeo e adicione um link para o quadro de listas salvas. Agora, em vez da propriedade de transição sendo um empurrão, faça uma sobreposição. Ajuste-o para 80% e teste-o usando o botão Play. Modifique até que você esteja satisfeito com a sobreposição. Link o ícone X no ícone das listas salvas Voltar para a página de vídeo.

Isso é como usar o Framer X para criar facilmente os protótipos interativos acionáveis. Há também ferramentas avançadas que você pode usar, além de adicionar trechos de codificação de reagir aos elementos dos quadros. Além disso, a melhor parte do Framer X é que qualquer um pode dominá-lo, experimentando alguns protótipos.

Este artigo foi originalmente publicado na edição 325 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Compre a edição 325. ou se inscrever para net.

Junte-se a nós em Abril 2020 com nossa programação do JavaScript Superstars em GenerateJS - a conferência ajudando você a construir melhor Javascript. Reserve agora em. GenerateConf.com.

Consulte Mais informação:

• Como se destacar e ser contratado como designer UX
• As dicas de 20 ux que você precisa saber
• 22 melhores ferramentas de design de interface do usuário