1
resposta

[Projeto] Checkpoint UI Design - Nível 01

Gostaria de compartilhar o resultado do desáfio do nível 01.

O primeiro passo foi definir uma IDV básica (logo, paleta de cores e tipografia) como não precisava de algo muito trabalhado, optei por utilizar o nano banana para criação da logo e paleta de cores. A paleta de cores sugerida foi o laranja, verde, amarelo e preto, no projeto utilizei principalmente o laranja e o verde.

Depois de definir a IDV, meu segundo passo foi criar um design system simples, oque eu crei foi: Para as cores (escala de 100 a 1000), tipografia (family font / size / weight / line height) espaçamento ( escala de 4 a 64) border radius ( escala de 0 a 24 e 999 para pill) **tamanho do ícones **(escala de 4 do 16 ao 48)

Depois disso parti para a criação dos componentes da interface utilizando os valores das minhas variáveis. E finalizei meu layout construindo ele com meus componentes criados. E para finalizar o projeto adicionei as interações no protótipo;

**Dúvida, **quando eu criei meus componentes na hora de jogar para a interface eu achei alguns tamanhos pequenos e fiz o ajuste manual, no layout mesmo, sem alterar o componente pai, esse é o melhor caminho?

https://www.figma.com/proto/BzdSYw9BXkHgEBqYFqIqAN/Untitled?node-id=17-1154&viewport=238%2C14%2C0.86&t=sxva76k8YsexPWby-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8%3A738&page-id=8%3A737

https://www.figma.com/design/BzdSYw9BXkHgEBqYFqIqAN/Untitled?node-id=5-35&p=f

1 resposta

Ei! Tudo bem, Gabriel?

Parabéns pelo empenho em estruturar seu projeto!

Sobre a sua dúvida, esse pode ser um dos caminhos. Mas, alterar o tamanho manualmente pode quebrar a conexão com a "fonte da verdade", que é o seu componente principal. Se o seu sistema crescer, você perderá a consistência visual, pois terá elementos iguais com tamanhos diferentes, o que dificultará futuras manutenções e o trabalho de desenvolvedores.

Uma boa prática é:

  1. Edite o componente pai: vá até o componente mestre e faça o ajuste de tamanho necessário lá. Assim, todas as instâncias que utilizam esse componente serão atualizadas automaticamente.

  2. Use Variáveis e Propriedades: se o componente precisa ter tamanhos diferentes para situações diferentes, o ideal é criar variantes (propriedades de size ou spacing) dentro do componente pai. Dessa forma, você mantém o controle centralizado, mas ganha flexibilidade no layout.

Se os tamanhos pareceram pequenos no layout, reveja sua escala de tamanhos ou aplique uma variante maior no componente pai. Isso manterá seu design profissional e escalável!

Continue com esse fluxo de trabalho, está no caminho certo e adorei o seu projeto!

Espero ter ajudado e qualquer dúvida, compartilhe no fórum. Bons estudos e até mais!

Material Complementar
Esse conteúdo pode estar em inglês, para traduzi-lo utilize o tradutor automático do navegador ou clique com o botão direito do mouse sobre a página e selecione a opção Traduzir para o português.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado