Figma enfrenta o dilema das props infinitas nos componentes
Aprofundamento CEVIU
Aprofundamento
O 'colapso de configuração' não é um bug do Figma, é o sintoma de um sistema de design que cresceu sem uma arquitetura clara. Antes das slots, designers usavam variantes em cascata, camadas ocultas e trocas manuais de instância para simular flexibilidade. O resultado era um componente com 87 variantes, 12 estados booleanos e 3 níveis de aninhamento, onde mudar um ícone exigia desvincular a instância, e perder atualizações futuras. As slots nativas, lançadas em beta em 5 de março de 2026, viram isso de ponta-cabeça: em vez de configurar *o que pode mudar*, você define *onde pode ser inserido*. É como substituir um painel de controles com 42 botões por uma moldura vazia onde qualquer conteúdo cabe, desde um texto curto até um grupo de cartões com filtros próprios.
Essa mudança não é só técnica: ela exige repensar o papel do designer no ciclo de desenvolvimento. Slots não são apenas um recurso novo, mas um contrato implícito com engenharia, elas espelham diretamente children do React ou <slot> do Vue. Isso reduz o hiato entre o que é desenhado e o que é implementado, porque o mesmo padrão de composição passa do canvas para o código sem tradução perdida.
Por que isso importa
Componentes com centenas de props geram mais trabalho do que resolvem: designers perdem tempo navegando em listas intermináveis, desenvolvedores ignoram metade das opções por falta de documentação clara, e sistemas de design envelhecem antes de serem usados. As slots cortam esse ruído. Um cartão com área de conteúdo dinâmica, um modal com cabeçalho personalizável e um formulário com campos variáveis deixam de exigir 15 variantes cada, e passam a precisar de uma única definição com duas ou três slots bem nomeadas. Isso não só acelera a criação de interfaces, mas reforça a acessibilidade: ao eliminar camadas ocultas e trocas manuais, mantém-se a estrutura semântica intacta, facilitando leitores de tela e testes automatizados.
Linha do tempo
Figma lança Propriedades de Componente na Config 2022, introduzindo Boolean, Texto, Instance Swap e Variant
Atualização em beta permite expor propriedades de instâncias aninhadas e definir instâncias preferenciais para troca
Anúncio das slots nativas na Schema 2025, descritas como a atualização mais importante para componentes desde as variantes
Lançamento em beta aberto das slots nativas
Publicação da análise sobre o 'colapso de configuração' e o papel das slots na nova arquitetura de componentes
Perguntas frequentes
Slots substituem totalmente as props do Figma?
Não. Props continuam essenciais para controlar estado (como 'ativo', 'desabilitado'), aparência (cor, tamanho) e comportamento (exibir ou ocultar seções). Slots lidam com conteúdo estrutural, o que entra *dentro* do componente, não como ele se comporta. São complementares: uma prop 'estado' define se o botão está carregando, enquanto uma slot define o que aparece no corpo do botão.
Como migrar componentes antigos para usar slots?
O Figma oferece guias oficiais para migração, mas a prática envolve três etapas: identificar áreas onde variantes ou camadas ocultas simulavam flexibilidade; transformar essas áreas em slots nomeados (ex: 'conteúdo-principal', 'rodapé-acionável'); e substituir trocas manuais de instância por slots aninháveis. Não é automático, exige revisão intencional de cada componente.
Slots melhoram a colaboração entre designers e devs?
Sim, de forma concreta. Ao alinhar a estrutura do componente com padrões de frameworks como React e Vue, as slots reduzem ambiguidades na entrega. Um dev já sabe que tudo dentro de <Slot name='actions'> será renderizado como children, sem precisar decifrar nomes de camadas ou interpretar booleanos escondidos em propriedades.
Fontes
- nathanacurtis.substack.comfonte original
- Categoria
- CEVIU Design
- Publicado
- 06 de março de 2026
- Editoria
- CEVIU Design
