CSS: o estilo que transforma estrutura em design

O que é CSS

CSS significa Cascading Style Sheets, Folhas de Estilo em Cascata. É a tecnologia que controla como as coisas parecem na tela. Cores, tipografia, espaçamentos, sombras, cantos arredondados, gradientes, posicionamento, tudo isso é CSS.

O CSS funciona com propriedades e valores. Você seleciona um elemento e diz como ele deve parecer:

.botao-primario {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
}

Parece familiar? Deveria. Isso é essencialmente o mesmo que você faz no painel de propriedades do Figma: define a cor de fundo, a cor do texto, o padding, o arredondamento de borda. A diferença é que no Figma você clica. No CSS, você escreve. Mas os conceitos são os mesmos.

Selectors: dizendo ao CSS o que estilizar

Para aplicar um estilo, o CSS precisa saber a qual elemento esse estilo se aplica. Ele faz isso com seletores. Os mais comuns:

• h1 : seleciona todos os títulos de nível 1 na página
• .botao-primario : seleciona elementos com a classe "botao-primario" (o nome no CSS precisa ser idêntico ao do HTML, letra por letra; por isso, por convenção, nomes de classe não usam acentos)
• #header : seleciona o elemento com o ID "header" (único na página)

Para o designer, o que importa saber: quando o dev diz que "mudou o CSS do componente", ele está falando de um seletor específico. E quando algo no produto não parece como você projetou, provavelmente é um problema de propriedade CSS, algo que você pode investigar no DevTools.

O Box Model: como o navegador vê cada elemento

Todo elemento HTML é uma caixa retangular. E essa caixa tem quatro camadas, de dentro para fora:

• Content : o conteúdo em si (texto, imagem)
• Padding : o espaço interno entre o conteúdo e a borda. No Figma, é o padding do Auto Layout.
• Border : a borda ao redor do elemento. Pode ser visível ou não.
• Margin : o espaço externo entre esse elemento e os vizinhos, que empurra quem está em volta para longe. (O espaçamento entre itens de um Auto Layout não é margin: ele vira a propriedade gap do Flexbox, como você vê logo abaixo.)

Quando você define padding: 16px no Figma, está controlando a mesma propriedade que o dev vai usar no CSS. Quando define gap: 12px entre itens de um Auto Layout, o dev vai traduzir isso para gap: 12px no CSS. Os nomes são literalmente os mesmos.

Auto Layout do Figma = Flexbox (e Grid) do CSS

Esse é um dos pontos mais importantes para designers. O Auto Layout do Figma foi inspirado diretamente no CSS Flexbox: nos fluxos horizontal e vertical, as propriedades se correspondem quase uma a uma:

• Direção (horizontal/vertical) → flex-direction: row ou column
• Gap entre itens → gap
• Padding → padding
• Alinhamento → align-items e justify-content
• "Preencher container" (Fill) → flex: 1
• "Ajustar ao conteúdo" (Hug) → tamanho automático (padrão do Flexbox)

Quando você entende essa correspondência, fica muito mais fácil conversar com o dev sobre layout. Em vez de dizer "os itens deveriam estar centralizados", você pode dizer "o align-items deveria ser center". O dev vai saber exatamente o que mudar.

Existe também o CSS Grid, ideal para layouts de duas dimensões, quando você precisa alinhar elementos tanto na horizontal quanto na vertical, como um grid de cards ou uma tabela de preços. O Flexbox é unidimensional (uma direção por vez), o Grid é bidimensional. E isso também existe no Figma: desde 2025, o Auto Layout tem um terceiro fluxo, o Grid, que corresponde ao CSS Grid. Quando você monta um layout nesse fluxo, o Dev Mode já mostra o código como CSS Grid, com colunas e linhas.

CSS Variables: um preview dos design tokens

Imagine que o botão primário do seu produto usa a cor #3b82f6. Essa cor aparece nos botões, nos links, nos ícones ativos, nos cabeçalhos de seção. Agora imagine que a marca decide mudar essa cor. Se o dev usou o valor HEX solto em cada lugar, vai ter que encontrar e substituir dezenas de ocorrências.

As CSS Variables (ou Custom Properties) resolvem isso. Em vez de usar o valor direto, o dev define uma variável:

:root {
  --color-accent: #3b82f6;
}

.botao-primario {
  background-color: var(--color-accent);
}

Se a cor muda, muda em um lugar só, na definição da variável, e reflete em todo o produto automaticamente. Isso soa familiar? Deveria. No Figma, são as Variables. No código, são as CSS Variables. E quando o time usa os mesmos nomes nos dois lugares, o Figma e o código falam a mesma língua.

CSS Variables são a versão "código" dos Design Tokens. No Módulo 4, vamos aprofundar esse conceito →