Na aula de hoje, vamos nos aventurar na criação de um componente clássico que todo designer deve dominar: o Tooltip. Este elemento é fundamental para fornecer descrições adicionais sobre elementos interativos, e aqui você aprenderá a personalizá-lo com vários tamanhos, orientações de rabinho e opções de estilo. Ao longo da aula, exploraremos como utilizar propriedades de Auto Layout no Figma, permitindo um design responsivo e funcional.

Vamos começar pela anatomia do Tooltip, criando suas variantes menores e maiores. A versão micro é perfeita para textos simples, enquanto a maior pode incluir ícones e até um botão de fechar. Exploraremos como posicionar o rabinho do Tooltip de cima para baixo ou de lado, proporcionando uma flexibilidade que se adapta a diferentes contextos de utilização. E não para por aí! Também discutiremos a importância das cores, incluindo opções de versões clara e escura, além de possibilidades de borda e preenchimento.

À medida que nos aprofundamos na construção deste componente, você verá como transformações e alinhamentos simples podem resultar em um Tooltip altamente funcional. Vamos explorar juntos as melhores práticas de design, compartilhar dicas para manter a estética consistente e, claro, aprenderemos a documentar nosso trabalho para futuras implementações em um design system. Prepare-se para aprimorar suas habilidades e criar um Tooltip que não apenas se destaca, mas também melhora a experiência do usuário!