Olá amigo.
Isso pega muita gente no começo.
Vamos destrinchar com calma.
O Figma não mostra “margin” automaticamente como o CSS mostra.
Esses 100px e 10px não vieram de um campo escrito “margin”, e sim de medidas visuais entre elementos.
De onde a prof tirou esses valores então?
Ela provavelmente fez uma dessas coisas (ou as duas):
- Mediu a distância entre elementos
No Figma, quando você: - seleciona um elemento
- segura ALT (ou Option no Mac)
- passa o mouse até outro elemento
o Figma mostra a distância em pixels entre eles.
Esses valores são espaçamento, que no CSS geralmente vira:
margin , padding ou gap (se for flex/grid)
Então: - os 100px podem ser a distância entre um container e outro
- os 10px podem ser o espaço entre um texto e um botão, por exemplo
Ela “interpretou” o layout (não copiou)
Isso é importante:
muitas vezes o professor não está copiando exatamente o Figma, mas traduzindo o layout para CSS.
Exemplo: - “Visualmente parece um espaçamento pequeno - vou usar 10px”
- “Esse espaço maior aqui - 100px”
Ou seja: decisão técnica, não um valor explícito no Figma.
Por que isso confunde tanto no começo?
Porque parece que tem um valor escondido que eu não estou vendo
Mas na real o Figma mostra distâncias.
O CSS precisa de propriedades.
Alguém precisa fazer essa ponte (e esse alguém é você)
Dica prática pra não se perder
Quando estiver no Figma, pergunte sempre:
Esse espaço é dentro do elemento? padding
Esse espaço é fora do elemento? margin
É distância entre vários itens alinhados? gap
E use sempre:
ALT + mouse para medir
Minha dica principal é não se prender às medidas exatas do Figma, mas focar mais nas cores, tipografia e hierarquia visual.
As medidas no CSS podem variar bastante dependendo do tamanho da tela (mobile, tablet, desktop) e da técnica usada no layout, como Grid ou Flexbox.
Além disso, o CSS trabalha com diferentes tipos de unidades, como px, que é um valor fixo, e em/rem, que são relativas ao tamanho da fonte, tornando o layout mais flexível e responsivo.
Por isso, o Figma serve mais como referência visual, enquanto as medidas no código são adaptadas para garantir melhor responsividade e manutenção.
Avisa alguma duvida.
Bons estudos.
