Pode parecer muito a considerar, mas a verdade é que o software facilita bastante para os designers criarem um protótipo responsivo do Figma.
Esta é uma ótima ferramenta para apresentar aos clientes como seu design será adaptado a diferentes telas. Isso ajuda nós, designers, a entender nossa estrutura geral e todos os elementos que precisamos considerar para que nosso design funcione em vários dispositivos.
Como usar o Figma para Web design responsivo
Neste tutorial, aprenderemos como fazer um web design responsivo Figma usando Restrições e Esquema automático.
Para orientá-lo no processo, estarei trabalhando ga-analytics#sendElementsClickEvent”>Upec Portfolio Figma Template da Envato Elements.
1. Os fundamentos do Web design responsivo
Antes mesmo de começarmos a pensar em design e layouts, é importante cobrirmos os fundamentos do web design responsivo. Aqui estão algumas coisas a considerar para criar um design responsivo Figma:
- Pense sobre experiência do usuário e interação para facilitar ao máximo a navegação dos usuários a partir de qualquer dispositivo.
- Considerar contente hierarquia para cada tipo de dispositivo, para que o usuário encontre o que procura em menos tempo.
- Tendo imagens flexíveis é fundamental para garantir que os usuários vejam exatamente o que queremos mostrar a eles. Pense em como a imagem será dimensionada quando a tela for ajustada.
- Sempre ajuste navegação ao espaço disponível na tela. Por exemplo, as versões móveis não precisam exibir todo o menu na tela. Em vez disso, use um menu de hambúrguer.
2. Como tornar os elementos de design responsivos
Começaremos com a versão para desktop do design de nossa página de destino. Este formato nos permite exibir todos os elementos que precisamos considerar para nossa navegação principal. Nesse caso, ajustei o modelo às minhas próprias necessidades de design.
Tente ajustar a largura do seu Frame e observe como tudo se move. No design responsivo, os elementos devem ser distribuídos de maneira coerente. É isso que queremos corrigir com este tutorial.
Etapa 1: adicionar restrições à sua barra de navegação
Vamos começar definindo Constraints para nossa barra de navegação. Queremos que todos os nossos elementos permaneçam na posição mesmo quando a tela encolhe ou expande.
Comece desagrupando todos os elementos da sua barra de navegação. Selecione seu logo e no menu lateral direito vá em Constraints. Certifique-se de que suas restrições estão definidas para Principal e Esquerda.
Agora vamos fazer o mesmo com o menu no meio. Queremos definir as restrições para Centro e Principal.
Por fim, faremos o mesmo com o botão Inscrever-se. Selecione-o e defina as restrições para Principal e Certo.
Agora teste! Ajuste a largura do quadro e você notará que tudo permanece no lugar.
Etapa 2: adicionar restrições ao seu plano de fundo
Se você tiver cores ou imagens de plano de fundo, também deseja configurar restrições para elas.
Neste caso, temos uma barra de fundo atrás do nosso menu. Queremos que ele se expanda como um contrato com todos os nossos elementos de menu. Selecione-o e defina as restrições para Esquerda e direita. Deve ser algo como isto:
Etapa 3: adicionar restrições e layout automático à sua seção Hero
Agora, queremos que a seção do herói se ajuste e que os elementos se encaixem, respeitando distâncias e escalas. Usaremos a seção do herói como um exemplo de como fazer isso.
Primeiro, vamos desagrupar nosso conteúdo principal para que possamos manipular os elementos individualmente. Agora, selecione o subtexto, título e botões. Então aperte Shift + A para ativar o recurso Auto Layout e manter o espaçamento entre eles enquanto a tela se ajusta.
Renomeei a camada para “conteúdo herói” e defini a propriedade de redimensionamento como Largura fixa.
Dessa forma, podemos configurar nossas restrições para Escala e Principal.
Estamos quase lá. Para tornar esta seção completa, precisamos configurar o título para ajustar. Então, vamos clicar duas vezes no cabeçalho para selecioná-lo. Agora, configure a propriedade de redimensionamento horizontal para Encha o recipiente.
Agora teste ajustando seu Frame para verificar se funciona.
Etapa 4: adicionar restrições à imagem
Este é o último passo para termos um design totalmente responsivo no Figma. Vamos configurar as imagens para ajustar com nosso formato de tela.
Primeiro, verifique se as imagens estão desagrupadas. Em seguida, selecione todos eles e configure Constraints para Escala e Principal.
Certifique-se de que suas imagens estejam configuradas para “Preencher” para que não estiquem quando você ajustar o tamanho da tela.
Teste-o para verificar se funciona. Mova os cantos do seu Frame para ver como funciona o seu protótipo responsivo Figma!
3. Ajuste para tablet e celular
Agora temos um protótipo responsivo Figma funcional para nossa versão desktop. Vamos passar para tablet e celular.
Comece duplicando nosso quadro pressionando Comando + D. Renomeie o quadro para “Tablet” e ajuste a largura para 820 px para que possamos ajustar nosso design para um iPad Air.
Você notará que alguns elementos estão sobrepostos na barra de navegação. Então vamos consertar isso.
Este é o ponto que nós, como designers, podemos otimizar nosso UX deixando apenas os elementos necessários na tela, especialmente ao navegar de um dispositivo menor como um tablet. Nesse caso, removeremos nosso menu e CTA e os substituiremos por um ícone de menu de hambúrguer.
Vá para Recursos na barra superior e procure uma biblioteca de ícones em Plugins. Estarei usando a Iconoir Icon Library.
Em seguida, procure por ícones de “menu” e arraste aquele que você gosta para o seu Frame.
Ajuste o ícone ao seu design, alinhe com o seu logotipo e configure Restrições para Certo e Principal.
Teste seu design e ajuste a largura do conteúdo e das imagens do herói, se necessário, para que sejam dimensionados para o tamanho da tela.
Agora, vamos duplicar nosso quadro de tablet para funcionar em nossa versão móvel. Imprensa Comando + D e renomeie o Frame para “Smartphone”. Configure a largura para 390 px para simular uma tela do iPhone 12.
A maioria das coisas se adaptará, mas talvez seja necessário ajustar alguns elementos para que o espaço entre eles corresponda a esse novo formato.
E é isso! Você está pronto para apresentar seu design responsivo Figma ao seu cliente.
Modelos de site da Figma no Envato Elements
A boa notícia para os designers hoje em dia é que não precisamos construir tudo do zero. Você pode dar um passo à frente trabalhando com ga-analytics#sendElementsClickEvent”> modelos de site para criar nosso design responsivo no Figma.
Dê uma olhada em nossa biblioteca com mais de 18 mil opções para você escolher!
Os modelos Premium Figma são criados com as melhores práticas de design UX/UI em mente. Economize algum tempo e concentre-se no seu conteúdo. Experimente um dos muitos modelos de ga-analytics#sendElementsClickEvent”>Figma disponíveis no Envato Elements!
Mais recursos e tutoriais do Figma
Agora você sabe como criar um design responsivo Figma para apresentar aos seus clientes. Confira alguns de nossos tutoriais e recursos do Figma para elevar suas habilidades ao próximo nível:
Você está pronto!
Pronto para trabalhar em seu próximo design responsivo no Figma? Espero que você tenha encontrado dicas e truques úteis para aplicar em todos os protótipos responsivos do Figma com os quais você trabalha. Encontre toda a inspiração e recursos criativos de que você precisa em ga-analytics#sendElementsClickEvent”>Envato Elements.
[ad_2]
