Para criar um ativo rolável na ferramenta de design Figma, siga estas etapas:
Etapa 1:Preparação - Abra o Figma e crie um novo projeto ou abra um projeto existente.
- Selecione o quadro ou contêiner onde deseja criar o ativo rolável.
Etapa 2:definir o quadro rolável - Clique na ferramenta "Moldura" na barra de ferramentas esquerda. Assemelha-se a um quadrado com quatro setas apontando para fora.
- Desenhe o quadro onde deseja que o conteúdo da rolagem apareça. Certifique-se de que tenha altura suficiente para acomodar o conteúdo rolável.
Etapa 3:adicionar conteúdo rolável - Dentro do quadro, adicione os elementos ou objetos que deseja que sejam roláveis. Isso pode incluir texto, imagens, formas ou qualquer outro elemento de design.
- Coloque os elementos um abaixo do outro para criar o efeito de rolagem.
Etapa 4:ativar a rolagem - Selecione o quadro que contém o conteúdo rolável.
- No painel direito, em “Propriedades”, clique na seção “Restrições”.
- Em “Layout Vertical”, altere a opção “Overflow” para “Scrollable” ou “Overflow Y”.
- Isso permite a rolagem dentro do quadro.
Etapa 5:ajustar o estouro - Dependendo da quantidade de conteúdo que você possui, pode ser necessário ajustar as configurações de estouro. Na opção “Overflow”, você pode escolher “Overflow”, que mostra todo o conteúdo e adiciona barras de rolagem conforme necessário, ou “Clip Content”, que corta qualquer conteúdo que não caiba no quadro.
Etapa 6:verificar e testar - Redimensione o quadro ou a janela do navegador para simular diferentes tamanhos de tela e garantir que a rolagem funcione conforme o esperado.
- Ajuste o posicionamento e o tamanho dos elementos para garantir que eles se encaixem bem e não obstruam as barras de rolagem ou outros componentes interativos.
Etapa 7:visualização e protótipo - Use o modo "Apresentar" (atalho:"P") ou conecte seu design a um protótipo para testar a funcionalidade de rolagem. Isso permite que você veja como a rolagem funcionará em um ambiente mais realista.
Etapa 8:salvar e compartilhar - Quando estiver satisfeito com o ativo rolável, salve seu arquivo Figma.
- Você também pode compartilhar o design com outras pessoas, exportá-lo para desenvolvimento posterior ou usá-lo como parte de um sistema de design maior.
Lembre-se de que o Figma permite design e prototipagem responsivos, para que você possa ajustar o layout e o comportamento do seu ativo rolável para se adequar a diferentes tamanhos e interações de dispositivos.
