[Dúvida] Figma - Mundo real

Oi, Wanderley! Tudo bem?

No processo de design e desenvolvimento de projetos responsivos, é realmente essencial que o projeto no Figma, ou qualquer outra ferramenta de design, já contemple as diferentes resoluções de tela.

No mundo real, o ideal é que o designer crie layouts para diferentes pontos de quebra (breakpoints), que são os tamanhos de tela onde o layout muda para se adaptar melhor ao dispositivo. Geralmente, esses breakpoints são baseados em tamanhos de dispositivos comuns, como:

• Telas pequenas (smartphones): até 600px
• Telas médias (tablets): 600px a 1200px
• Telas grandes (desktops): acima de 1200px

Por exemplo, no Figma, podemos criar diferentes frames para cada um desses tamanhos e ajustar o design de acordo, o que inclui definir como os elementos se reorganizam, quais tamanhos de fontes usar, como os espaçamentos mudam, etc. Aqui está um exemplo prático de como isso pode ser feito:

1. Criação de Frames no Figma:

   • Criar um frame para cada breakpoint: um para mobile, um para tablet e um para desktop.
   • Ajustar o layout em cada frame para garantir que ele fique bom em todas as resoluções.

2. Definição de Breakpoints no CSS:

   • No código CSS, podemos usar media queries para aplicar estilos diferentes com base no tamanho da tela, por exemplo:

/* Estilos para telas grandes (desktops) */
@media (min-width: 1200px) {
  .container {
    padding: 20px;
  }
}

/* Estilos para telas médias (tablets) */
@media (min-width: 600px) and (max-width: 1199px) {
  .container {
    padding: 15px;
  }
}

/* Estilos para telas pequenas (smartphones) */
@media (max-width: 599px) {
  .container {
    padding: 10px;
  }
}

Espero ter ajudado!

Um forte abraço e bons estudos!