Tornar seu conteúdo rolável no Figma envolve navegar na guia lateral. Infelizmente, ele não aparece automaticamente na interface principal do usuário. O conteúdo rolável é útil quando você deseja apresentar muitas informações dentro de um quadro do seu design. Alguns exemplos incluem landing pages, interfaces de aplicativos ou janelas pop-up.
Este artigo explicará como tornar seus designs Figma roláveis.
Ajustar um texto rolável em uma forma
Vamos começar criando um texto rolável em um formato simples. Este é o exemplo mais comum de texto rolável e você pode adicionar outras propriedades como cor, fontes e contornos posteriormente.
Veja como isso é feito:
- Crie uma forma básica. Para este exemplo, recomendamos fazer um retângulo vertical. Você pode fazer isso selecionando a ferramenta retângulo na barra lateral esquerda ou usando o comando “R”. Segure para a esquerda, clique em um ponto da tela e desenhe a forma.
- Na barra lateral direita, na guia design, marque ao lado da opção “conteúdo do clipe”.
- Selecione a ferramenta de texto para criar uma caixa de texto e colocá-la dentro do quadro rolável. Digite ou copie e cole qualquer conteúdo que você esteja usando.
- Selecione o quadro e vá para a aba de protótipo no lado direito da sua interface. Em seguida, selecione a opção “overflow scrolling” e o estilo de sua preferência. Aqui escolheremos “rolagem vertical”.
Depois de clicar na opção de rolagem excedente na guia de protótipo, existem vários estilos. Escolhemos o vertical porque estamos usando um retângulo vertical como exemplo. Isso permite que você leia o texto de cima para baixo. Alguns dos outros estilos incluem:
- Rolagem horizontal – Os usuários podem fazer o texto rolar da esquerda para a direita em alguns exemplos. Esta opção é preferível se você estiver criando designs em formato paisagístico.
- Sem rolagem – Se você deseja bloquear seu conteúdo, escolha a opção sem rolagem.
- Ambas as direções – Crie um design com muito conteúdo e role vertical e horizontalmente.
Você deve usar recursos de rolagem em seu design para minimizar o esforço (cliques) que seu leitor usa ao interagir com o conteúdo. Eles podem deslizar ou usar a roda do mouse em vez de clicar ou tocar em toneladas de texto.
Como projetar seus componentes roláveis
Dependendo do seu produto, você precisará projetar a estrutura do conteúdo e o próprio conteúdo. O processo envolve adicionar cores, fontes e potencialmente outros componentes ao design geral. Alterar esses elementos é fácil, mas selecionar a estética certa requer uma consideração cuidadosa.
Como alterar a fonte do seu design rolável
A primeira coisa que você precisa fazer é alterar a fonte do design rolável. Figma oferece uma ampla variedade de estilos para você escolher. Este é o método mais simples:
- Selecione o conteúdo do quadro rolável que você deseja alterar.
- Navegue até o menu suspenso localizado no canto superior esquerdo e selecione-o.
- Percorra as fontes até encontrar aquela que deseja usar.
Se a marca para a qual você está projetando tiver uma tipografia específica, você provavelmente escolherá a mesma para que seja consistente com a imagem da marca. Se você tiver mais espaço de manobra, experimente diferentes exemplos antes de escolher o certo.
Algumas considerações incluem:
- Intenção do design – A escolha de uma tipografia deve corresponder à intenção do seu design. Se você deseja transmitir muitas informações com clareza, opte por fontes menos decorativas, mas elegantes.
- Outros componentes – Sua fonte é um elemento visual como qualquer outro em seu design. Deve corresponder à estrutura e outros componentes incluídos.
- Estética geral e marca – A sensação geral da marca também deve influenciar a fonte escolhida. Por exemplo, um serviço de entrega de flores não apresentará a mesma fonte de uma landing page SAAS.
Embora a escolha da fonte correta possa exigir alguma experimentação, alguns exemplos concretos de fontes são as opções mais confiáveis:
como enviar videos longos no iphone
- Roboto – Se você quiser jogar pelo seguro, use Roboto. É considerada uma fonte versátil e neutra com muitas aplicações. Por ser tão fácil de entender, muitos escolhem o Roboto para obter instruções e páginas de destino.
- Poppins – Para um apelo amigável, mas moderno e limpo, escolha Poppins. Essa fonte é mais arredondada e torna o texto atraente e de fácil leitura.
- Raleway – Ao projetar para uma marca de luxo sofisticada, você pode considerar a Raleway. Geralmente é fino, mas tem diferentes variações de peso e uma aparência geral elegante.
- Lato – Amigável, confiável e sério são as palavras certas para descrever esta fonte. Os designers podem usar o Lato para títulos e textos de parágrafos onde a legibilidade e a clareza são as principais preocupações.
Você também deve considerar o tamanho da fonte e o estilo de texto escolhidos. Geralmente, negrito é usado para títulos ou segmentos de ênfase, enquanto itálico é usado para citações.
Alterando a cor do formato da moldura
Além de alterar a fonte, você também vai querer alterar a cor do formato da moldura. Mais uma vez, a tonalidade exata dependerá da marca para a qual você está projetando ou da sua estética. Felizmente, a interface do Figma facilita a seleção de uma cor.
Veja como você pode alterar as cores da moldura:
- Selecione o quadro que deseja editar.
- A camada aparecerá na barra lateral direita. Navegue até a seção “preencher”.
- Selecione “+” para adicionar um preenchimento.
- Uma janela de seleção de cores será aberta. Selecione a cor de preenchimento e o gradiente. Você também pode digitar um código hexadecimal se souber o matiz exato.
Tal como acontece com outros elementos de design, pode ser necessário experimentar diferentes cores e sua aparência com a fonte escolhida.
Perguntas frequentes
Existe um comando de texto rolável no Figma?
Infelizmente, não existe um comando para tornar um texto rolável no Figma. No entanto, você pode concluir o processo com apenas alguns cliques usando o método mencionado acima.
Como decido qual opção de overflow desejo?
como ver se seus motoristas estão atualizados
Isso depende do tipo de texto que você está usando, do design geral e de sua função. O estilo vertical geralmente é bom para folhear textos grandes.
Qual interface de dispositivo geralmente precisará de um design de texto rolável?
Um bom exemplo seriam modelos de design para um aplicativo. Os usuários podem criar um telefone como quadro geral, enquanto o texto rolável pode ser a interface do aplicativo.
Figma é a melhor escolha para fazer designs roláveis?
Figma é uma das melhores ferramentas para criar uma ampla variedade de formulários, incluindo designs roláveis. Melhor ainda, o Figma é gratuito. No entanto, você pode ter certas preferências pessoais. Experimente experimentar algumas plataformas, como Adobe Illustrator, até encontrar a ferramenta mais adequada para você.
Torne seus designs roláveis e fáceis de usar
Criar qualquer texto dentro de um quadro no Figma é fácil. Basta selecionar o quadro e ir para a opção de conteúdo do clipe. Depois de concluído, você pode escolher as opções de rolagem excedente. Da mesma forma, você não deve negligenciar outros elementos cruciais do design, como a cor e a forma da moldura e a fonte do texto. Tornar seu design rolável é uma excelente escolha para landing pages, interfaces de aplicativos e janelas pop-up. Torna os textos mais fáceis de folhear em vez de clicar, aumentando a experiência do usuário.
Você achou fácil tornar seu conteúdo rolável no Figma? Que tal selecionar a fonte certa? Deixe-nos saber na seção de comentários abaixo.
