Cada bloco abaixo é um recurso do Figma funcionando de verdade. Mexa no painel da esquerda e veja o resultado na direita. O primeiro bloco já gera o post pronto para baixar.
Isto é um componente com propriedades: o desenho é fixo, você troca só os dados. É exatamente como se monta o post no Figma para fazer um por carro.
Sem foto, aparece uma silhueta de exemplo.
Os mesmos controles do painel Effects do Figma: sombra, desfoque da camada, desfoque do fundo (vidro), além de preenchimento, transparência e cantos.
A caixa se ajusta sozinha ao conteúdo. Escreva um texto maior no primeiro item e veja tudo se reorganizar, sem arrastar nada.
Use sempre múltiplos de 8 no gap e no padding: é o grid de 8 pt.
Um botão só, com propriedades. No Figma você escolhe a combinação no painel e o botão muda. Alterou o componente mestre, todos os botões do arquivo mudam juntos.
Todas as variantes do componente (é assim que ficam lado a lado no Figma):
As cores e cantos são variáveis. Trocando o modo, a mesma tela vira outra marca ou tema escuro, sem redesenhar. As cores das marcas aqui são de exemplo, para ajustar com as oficiais.
Telas ligadas por cliques, com as transições do Figma. Escolha a animação e clique nos botões dentro do celular. Smart animate é a mais usada: o bloco escuro "viaja" de uma tela para outra.
Fluxo de exemplo: pré-análise EGV em 3 telas. É assim que se aprova um fluxo com o cliente antes de programar.
Você continua usando o carro. Análise em minutos.
Um consultor vai chamar no WhatsApp.