Um botão que passa por cima da borda parece detalhe. No Design System, vira retrabalho.
Na Lacrei Saúde, onde atuo como voluntário em UX/UI, revisei a Search Bar do Design System Marsha e refiz o componente com Auto Layout. O erro que aparecia na tela tinha origem na estrutura.
Case · Lacrei Saúde
Design System Marsha · Search Bar · Auto Layout
Auto Layout
que segura
a borda
O desafio
A Search Bar é o campo de busca da Lacrei: é por ela que a pessoa procura profissionais de saúde por especialidade e localização. A tarefa era revisar a construção do componente no Figma e encontrar o que estava errado. Depois, corrigir sem apagar as telas originais e documentar cada ajuste para o time.
O que estava quebrado
- Botão por cima da borda. O campo não tinha padding e o botão tinha 48px, a mesma altura do campo. Ele cobria a borda em cima, à direita e embaixo, e a sombra reforçava a sensação de saltar para fora.
- Um “X” que apagava a linha. O botão de limpar tinha contorno próprio de 2px. No estado preenchido, ele interrompia a borda do campo em volta do ícone.
- Espaço fora do padrão. Entre o “X” e o botão verde havia 12px, quando o token certo era 8px. E as ações nem tinham um contêiner próprio.
- Posição absoluta no mobile. Texto e botões estavam soltos sobre um retângulo de fundo. O Auto Layout existia, mas não controlava nada, e o botão vazava 4px para fora da moldura.
- Raios que não conversavam. Botão com raio 8 encostado numa caixa com raio 8, sem padding entre eles. A curva de dentro não acompanhava a de fora.
AntesO botão passa por cima da borda
- 1Sem padding: o botão tem 48px, a mesma altura do campo, e cobre a borda em cima, à direita e embaixo.
- 2O “X” tem contorno próprio de 2px e também apaga a linha da borda.
- 312px entre o “X” e o botão. O certo é 8px.
- 4Sem contêiner para as ações: o “X” e o botão ficam soltos dentro do campo.
Como refiz com Auto Layout
Em vez de ajustar pixel por pixel, refiz a estrutura para que o próprio Auto Layout segure cada elemento no lugar:
- Campo com Auto Layout horizontal. Padding de 4px em cima, à direita e embaixo, e 16px à esquerda. O texto usa Fill container e o botão fica dentro da borda.
- Contêiner Actions. Um novo grupo em Auto Layout junta o “X” e o botão, com 8px de distância ligados ao token spacing-8.
- Botões de 40 × 40. Tirei a sombra dentro do campo e o contorno do “X”, e a borda volta a ser uma linha contínua.
- Raio calculado. O raio do botão é o raio da caixa menos o padding. Um campo com raio 8 e padding 4 pede um botão com raio 4.
DepoisTudo dentro do campo, borda contínua
- 1Auto Layout com padding de 4px em cima, à direita e embaixo (16px à esquerda). O botão fica dentro do campo e a borda continua inteira.
- 2Novo contêiner Actions (Auto Layout horizontal) agrupando o “X” e o botão.
- 38px entre o “X” e o botão (spacing-8).
- 4Botões reduzidos para 40 × 40.
- 5Raio do botão = raio da caixa − padding → 8 − 4 = 4.
O que isso muda para o time
- Componente que se adapta sozinho. Com Auto Layout de verdade, o campo acompanha mudanças de largura e de texto sem ninguém reposicionar botão na mão.
- Handoff mais fiel. Padding, gap e raio ligados a tokens viram valores que o front-end encontra no código, sem precisar medir a tela.
- Menos variantes quebradas. As variantes de foco e as de mobile também ganharam Auto Layout, então o mesmo ajuste vale para desktop e celular.
O que fica de aprendizado
- Quando um elemento vaza, o problema quase nunca é o elemento. É o contêiner em volta dele.
- Raio interno é o raio externo menos o padding. Uma conta simples que deixa as curvas harmônicas.
- Corrigir também é documentar. Mantive as telas originais, numerei os erros e deixei um ponto para validar com o time: o botão de 40px no mobile, abaixo dos 44px recomendados para toque.
No fim, a Search Bar ficou mais limpa, previsível e pronta para crescer junto com a Lacrei.