Relação Design e Código

Em andamento

Design não termina no Figma

O layout é apenas uma parte da decisão.

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

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


Código também é experiência

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

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

Um código difícil de manter gera exceções. Exceções viram inconsistência. Inconsistência afeta diretamente a experiência do usuário.


Onde o ruído acontece

Alguns sinais comuns de desalinhamento entre design e código:

  • componentes sem estados definidos
  • tokens visuais que não existem no código
  • layouts impossíveis de escalar
  • ajustes feitos “só 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 para decidir melhor. Isso envolve:

  • 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

Design Systems como ponte

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

Quando bem feito, ele:

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

Mas só funciona se for pensado para uso real, não apresentação.

A proposta deste guia

Neste projeto, cada conteúdo tenta responder:

Por que essa decisão existe?
Como ela impacta a experiência?
Como ela se sustenta no código?

O foco não é ferramenta. É raciocínio aplicado.