Pular para o conteúdo

Relação Design e Código

Design e código não são etapas isoladas. São decisões diferentes sobre a mesma experiência. E precisam se sustentar juntas ao longo do tempo.

Design não termina no Figma

O layout é apenas parte da decisão. Quando algo é desenhado sem considerar estados, variações, acessibilidade e comportamento, essas decisões não desaparecem. São empurradas para a implementação, normalmente sob pressão.

Design que não considera código não termina. Ele é interrompido.

Responsabilidade compartilhada

Design e código não são responsabilidades separadas. São perspectivas diferentes sobre a mesma experiência.

Quando uma decisão não é discutida entre as duas áreas, alguém vai pagar esse custo depois. Normalmente o usuário.

Código também é experiência

Código não é neutro. Escolhas técnicas impactam diretamente:

  • performance
  • legibilidade
  • previsibilidade
  • manutenção
  • consistência entre telas

Código difícil de manter gera exceções. Exceções viram inconsistência. Inconsistência afeta diretamente a experiência.

Onde o ruído acontece

  • componentes sem estados definidos
  • tokens visuais que não existem no código
  • layouts impossíveis de escalar
  • ajustes feitos apenas no CSS
  • decisões que não voltam para o design

Nada disso é falha de uma área só. É falta de visão sistêmica.

Pensar como Design Technologist

Pensar como Design Technologist não é virar desenvolvedor. É entender o suficiente pra decidir melhor.

  • desenhar componentes reutilizáveis
  • pensar em tokens, não em valores soltos
  • considerar limites técnicos reais
  • facilitar implementação e manutenção
  • preservar a experiência ao longo do tempo

Nem toda decisão é perfeita. Algumas são possíveis. Bons produtos são feitos de escolhas conscientes.

Design Systems como ponte

Um Design System não é um arquivo bonito. É uma linguagem compartilhada entre design e código.

  • reduz ambiguidade
  • acelera decisões
  • melhora consistência
  • diminui retrabalho

Só funciona quando é pensado para uso real, não para apresentação.

Este guia não ensina telas.

Ensina decisões que continuam fazendo sentido depois que o código existe.