Prototipando um switcher Carousel no Figma

Vamos prototipar um carrossel de imagens controlado por botões de direção.

Um carrossel ou carrossel é um passeio de diversão que consiste em uma plataforma circular giratória normalmente abastecida com cavalos muito amados por crianças, mas para o entretenimento de toda a família. Muitos deles são movidos para cima e para baixo por engrenagens para simular o galope.

Por que usamos carrosséis no design se eles são passeios em parques?

Os controles deslizantes de imagem no design são chamados de carrosséis após a ação de movimento do passeio de diversão do carrossel real.

O simples ato de usar uma seção em seu design para mostrar vários conteúdos que vão desde textos, imagens, vídeos, GIFs, etc, a lista é infinita.

Geralmente, o movimento dos slides do carrossel é atualizado com diferentes pontos de ação de movimento, mas geralmente é controlado por dois métodos:

1. Botões de direção, que podem ser esquerdo e direito ou para cima e para baixo.

2. Auto switchers autocontrolados, que também podem ser controlados por botões de direção ou não.

Prototipando um switcher controlado por direção

Siga os passos abaixo:

Etapa 1: organize todos os elementos em um quadro horizontal (não um grupo).

Etapa 2: Recortar o conteúdo do quadro
Você pode fazer isso clicando em “Recortar conteúdo na barra de navegação direita, logo abaixo da seção de propriedades do quadro.

Etapa 3: reduza o tamanho do quadro da imagem para o tamanho do carrossel desejado.
Você pode fazer isso simplesmente usando a ferramenta “MOVE” pressionando o teclado “V” e arrastando-o até chegar ao tamanho desejado.

Etapa 4: Adicionar botões direcionais
Você pode baixar seus botões rapidamente usando qualquer um dos plugins Icon, eu uso o Iconify, coloco-os em círculos individuais, agrupe-os e adicione sombra a ambos os grupos de ícones de direção.
Você os coloca em ambas as extremidades do quadro, meio para dentro e para fora, no sentido de que não estão no quadro recortado e, em seguida, cria outro quadro/grupo; agrupando os botões de direção e o quadro recortado.

Etapa 5: Duplique o grupo criado na etapa 4
Duplique em múltiplos de sua escolha e alinhe-os verticalmente.

Etapa 5: Criar um conjunto de componentes
Você pode fazer isso selecionando todas as duplicatas feitas e clicando na seta ao lado do botão do componente no meio da tela e selecionando “ Criar conjunto de componentes”

Passo 6: Ajuste as imagens para caber no fluxo

Passo 7: Faça um protótipo de cada direção para ajustar o fluxo — Faça isso para todas as direções e pronto!

Etapa 8: Copie o primeiro quadro do conjunto de componentes e coloque-o no quadro de design.
Jogue seu protótipo e você está pronto para ir!

Não se sinta mal se não acertar da primeira vez, não se apresse e aprenda com cada ciclo de prática.