Slots no Figma: o que são e como usar em 2025

O que são slots no Figma, afinal?

Slots no Figma são instâncias de componentes que funcionam como 'encaixes' dentro de outro componente. Em vez de fixar um ícone ou uma imagem diretamente na estrutura, você deixa aquele espaço aberto para receber qualquer outro componente no momento de uso. A lógica é simples: o componente pai define o esqueleto (tamanho, espaçamento, comportamento) e o slot define onde um componente filho pode ser inserido e trocado livremente.

Na prática, imagine um componente de botão com ícone à esquerda. Sem slots, você precisaria criar uma variante para cada ícone possível. Com slots, você cria o botão uma única vez, deixa o espaço do ícone como um slot e, ao usar o componente, simplesmente troca o ícone pela instância que quiser, seja uma seta, uma estrela ou um carrinho de compras.

Como os slots funcionam tecnicamente no Figma?

O mecanismo de slots no Figma é construído sobre a funcionalidade de 'Instance Swap' (troca de instância), disponível no painel de propriedades do componente. Quando você publica um componente com uma instância aninhada dentro dele, o Figma expõe automaticamente essa instância como uma propriedade trocável no painel direito. O designer que usa o componente vê uma lista suspensa com as opções disponíveis e escolhe qual instância encaixar naquele slot.

O fluxo de criação segue estas etapas:

• Crie o componente principal (ex.: um card de produto)
• Dentro dele, insira um componente filho como instância (ex.: um ícone genérico ou um placeholder de imagem)
• Selecione essa instância aninhada e, no painel de propriedades do componente principal, adicione uma propriedade do tipo 'Instance Swap'
• Defina um valor padrão e, opcionalmente, uma lista de opções preferidas
• Publique o componente na biblioteca

A partir daí, qualquer pessoa que usar esse componente verá no painel direito um campo de troca para aquele slot, sem precisar entrar na estrutura interna do componente.

Qual a diferença entre slots e variantes no Figma?

Variantes e slots resolvem problemas diferentes, e entender isso evita retrabalho. Variantes são estados fixos e predefinidos de um componente: botão primário, botão secundário, botão desabilitado. Você cria cada estado manualmente e o designer escolhe entre eles. Slots, por outro lado, são espaços abertos: o designer não escolhe entre opções fixas, ele substitui o conteúdo por qualquer componente compatível da biblioteca.

Um exemplo numérico ajuda a entender o ganho. Suponha que você tenha um componente de tag com 3 tamanhos, 4 cores e 20 ícones possíveis. Usando só variantes, você precisaria de 3 × 4 × 20 = 240 variantes. Usando slots para o ícone e variantes apenas para tamanho e cor, você cai para 3 × 4 = 12 variantes, com o ícone sendo trocado livremente via slot. A redução é de 95% no número de variantes a manter.

Quais são os casos de uso mais comuns para slots no Figma?

Os slots aparecem com mais frequência em componentes que precisam de flexibilidade de conteúdo sem perder consistência estrutural. Os casos mais práticos são:

• Botões com ícone: o ícone é um slot; o tamanho e o estilo do botão são variantes
• Cards: a imagem de capa, o avatar do autor e o ícone de categoria podem ser slots independentes
• Navegação e menus: cada item de menu pode ter um slot para o ícone correspondente
• Notificações e toasts: o ícone de status (sucesso, erro, alerta) é um slot trocável
• Tabelas e listas: células que precisam exibir diferentes tipos de conteúdo (texto, badge, avatar) se beneficiam de slots

Em todos esses casos, o slot preserva o espaçamento, o alinhamento e o comportamento de auto layout definidos no componente pai, independentemente do que for encaixado nele.

Como nomear e organizar slots para um design system escalável?

A nomenclatura de slots impacta diretamente a usabilidade da biblioteca para o restante do time. Boas práticas consolidadas por equipes de design system recomendam:

• Use nomes descritivos e funcionais, não visuais: prefira 'leading-icon' a 'icon-left', porque o nome funcional sobrevive a mudanças de layout
• Mantenha consistência entre componentes: se o slot de ícone se chama 'leading-icon' no botão, use o mesmo nome no campo de texto e na tag
• Defina sempre um valor padrão sensato para o slot, preferencialmente um componente de placeholder ou o ícone mais usado
• Documente no Figma, via anotações ou na descrição do componente, quais componentes são compatíveis com cada slot

Essa disciplina de nomenclatura facilita a vida de desenvolvedores que mapeiam os componentes do Figma para o código, especialmente em projetos que usam ferramentas de handoff como Zeroheight ou Supernova.

Slots no Figma têm limitações que preciso conhecer?

Sim, e ignorá-las gera frustração no dia a dia. As principais limitações atuais são:

• Slots aceitam apenas instâncias de componentes, não frames ou grupos soltos. O conteúdo que você quer encaixar precisa ser um componente publicado na biblioteca
• O Figma não valida se o componente encaixado no slot tem as dimensões certas. Um ícone de 32px num slot pensado para 16px vai quebrar o layout se o auto layout não estiver configurado corretamente
• Slots aninhados em múltiplos níveis podem criar complexidade difícil de depurar. O recomendado é limitar a profundidade de aninhamento a dois níveis
• A funcionalidade de 'preferred values' (valores preferidos) no Instance Swap ajuda a guiar o designer, mas não restringe as opções. Qualquer componente da biblioteca pode ser encaixado

Conhecer essas limitações antes de arquitetar o design system poupa horas de refatoração depois.