1
resposta

[Dúvida] TAMANHO DO SITE X FIGMA

Como sei a largura do meu site? e como posso fazer a transposição do figma para o código?

1 resposta

Oi Matheus, tudo bem?

Para saber a largura do seu site, você pode seguir alguns passos simples:

  1. Definindo a Largura no Figma: No Figma, você pode definir a largura do seu design ao criar um novo quadro (frame). Normalmente, os tamanhos mais comuns são 1440px, 1280px, 1024px ou 768px, dependendo do dispositivo alvo (desktop, tablet, ou mobile).

  2. Verificando a Largura no Código: No seu código HTML/CSS, você pode definir a largura do site utilizando a propriedade width no CSS. Por exemplo:

    .container {
        width: 1440px; /* ou qualquer outra largura que você definiu no Figma */
        margin: 0 auto; /* Centraliza o container */
    }
    
  3. Transposição do Figma para o Código: Para transpor o design do Figma para o código, você pode seguir estas etapas:

    • Exportar Imagens e Ícones: No Figma, você pode exportar imagens e ícones clicando com o botão direito sobre o elemento e selecionando "Export".
    • Medidas e Espaçamentos: Utilize as ferramentas de medição do Figma para verificar as dimensões e espaçamentos entre os elementos. No Figma, você pode clicar em um elemento e ver suas propriedades na barra lateral direita.
    • CSS Flexbox ou Grid: Use CSS Flexbox ou Grid para replicar a estrutura do layout. Por exemplo, se você tem uma barra de navegação no topo, você pode usar Flexbox para alinhar os itens:
      .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
      }
      

Se quiser entender mais sobre Figma temos uma formação:

Espero ter ajudado.

Um abraço e bons estudos.