3 Dicas para Devs melhorarem a implementação com HTML e CSS das interfaces criadas em ferramentas como o Figma

3 Dicas para Devs melhorarem a implementação com HTML e CSS das interfaces criadas em ferramentas como o Figma

Em algum momento na sua trajetória de desenvolvedor web você irá se deparar com interfaces gráficas lindas na ferramenta Figma que você deverá implementar na aplicação que está desenvolvendo. Porém, algumas vezes pode se tornar confuso o processo de transformar todas as informações do layout em código. Por isso, escrevi esse pequeno artigo para te dar algumas dicas que eu utilizo no meu dia a dia que me ajudam no momento de implementação.

Mas primeiro, o que é o Figma?

O Figma é uma ferramenta de design de interface popular entre UX e UI Designers. A ferramenta pode ser acessada e utilizada através de seu navegador e permite o compartilhamento do projeto entre a equipe — tornando-se uma ferramenta colaborativa que possibilita a troca de informações simultaneamente.

1) Escolhendo as Tags HTML

Ao encarar o layout de uma página, muitas vezes você pode se sentir perdido no momento de decisão de qual Tag HTML você deveria utilizar para representar os elementos do layout na estrutura HTML. E a resposta é: depende.

Não existe uma regra obrigatória sobre qual Tag deve ser utilizada em determinada situação, você pode criar uma página inteira utilizando apenas DIV. Porém, existe um padrão adotado pela comunidade que segue o conceito de HTML Semântico. Esse tem por objetivo descrever o significado do conteúdo presente no documento HTML para que tanto programadores que forem dar manutenção no código quanto motores de busca processem essa informação mais rápido e facilmente, utilizando Tags que façam sentido para aquele conteúdo.

Então, utilizando de exemplo a seguinte Landing Page disponibilizada pelo Figma Land, vou explicar algumas Tags semânticas e quando utilizá-las:

Figma Startup Landing page dark

<header> O Header é utilizado para representar o cabeçalho da nossa aplicação, podendo conter dentro de si títulos, logos ou até listas de navegação — links para outras páginas do site. Perceba que na Landing Page acima o <header> pode ser a barra bem ao topo da página, que possui o botão de login e os links de navegação.

<main> A Tag main refere-se ao conteúdo principal, consequentemente o de maior relevância dentro da nossa página. Pode conter títulos, textos, imagens etc. Na Landing Page acima, a tag <main> poderia envolver todo o contéudo desde o texto “Work at the speed of thought” até os botões.

<h1> Essa Tag normalmente é utilizada apenas uma vez por página, ela representa o título principal da nossa página, esse elemento normalmente é aquele que chama atenção na página. No exemplo, o texto “Work at the speed of thought” poderia ser o <h1> da nossa página. Um motor de busca pode colocar nossa página nos primeiros resultados quando o usuário realizar uma busca muito similar ao conteúdo de nosso <h1>.

<h2> Relacionada normalmente a subtítulos, como títulos de seções da nossa página (exemplo: as seções que criei nesse post para dividir as dicas), opções do menu entre outros. Essa tag, diferente da anterior, normalmente é repetida. No nosso exemplo, as opções de navegação do <header> como home e contact, poderiam ser <h2>

📌 Note que as tags de título de <h1> até <h6>, respeitam uma hierarquia, sendo 1 título principal de nossa página e decrescendo para subtítulos — sempre respeitando os irmãos, ou seja, se <h2> foi utilizada como titulo de seção, caso outras seções forem criadas que estão de irmã para a primeira, seus títulos devem ser <h2> também 😉

<div> Div não é considerada uma Tag semântica, ou seja, ela não traz um significado implícito para seu conteúdo como as Tags mencionadas acima. Mesmo assim, ela é amplamente utilizada, por exemplo como container — uma “caixa” que contém um grupo de elementos. Utilizando nossa página de exemplo, seria interessante colocar uma <div> dentro de <main> para agrupar os dois botões principais (“Try for free”, “Learn more”), pois é perceptível que ambos estão alinhados e possuem distância simétrica, algo que se torna mais fácil manipular se aplicarmos um flexbox no seu pai, a <div>.

Para saber mais sobre HTML semântico recomendo a seguinte leitura:

https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065#tag-main

2) Definindo o tamanho dos elementos eficientemente

Outra dúvida que eu já enfrentei é: como saber o tamanho que devo dar a cada elemento? Copiar exatamente a altura e largura que o editor do Figma me fornece para cada um é a melhor forma de implementar?

Medida padrão

Recomendo você adotar uma medida padrão, por exemplo, digamos que a maioria dos textos de sua página possuem um tamanho de 20px, essa vai ser nossa medida padrão, vamos defini-la no elemento root do nosso CSS:

Agora, trabalharemos com tamanhos relativos a medida padrão, nos referenciando a essa unidade como ‘rem’ (medida relativa ao tamanho de fonte do elemento root), dessa forma, toda vez que ela for alterada, todos elementos se alteraram proporcionalmente, não havendo necessidade de mudar o tamanho de cada um (o que aconteceria se você utilizasse ‘px’ como unidade de medida).

Comparando elementos

Voltando para o Figma, agora você apenas realiza uma comparação entre o tamanho do elemento em questão e ao que possui a medida padrão que você adotou. Vamos para exemplo práticos:

Texto que possui a medida padrão Elemento que queremos descobrir a relação de tamanho

Repare nos dados circulados de altura e largura desse elemento e vamos para a matemática:

52 px equivalem a 2,6 vezes 20px (52/20), então colocaremos no css, sua altura como: height: 2.6rem;

148 px equivalem a 7,4 vezes, então, width: 7.4rem;

Agora se você deseja aumentar o tamanho dos elemento a medida que o tamanho de tela cresça (diferença entre mobile e desktop), você precisará alterar apenas a medida padrão, e todos elementos se adequarão proporcionalmente. Segue:

3) Criando variáveis para a paleta de cores

Por último, mas não menos importante, para evitar que você fique repetindo no seu CSS os mesmo hexadecimais diversas vezes, como uma cor de texto que se aplica a vários elementos, é interessante você criar variáveis no CSS representando cada uma das cores da paleta escolhida pelos Designers.

Outra vantagem de utilizar variáveis no CSS é que caso você for mudar o tema do seu site, ou até alterar a paleta de cores principais, você não precisa catar elemento por elemento e mudar suas cores, basta alterar o valor de suas variáveis 😉

Vamos declará-las dentro do elemento root também, assim todos elementos tem acesso.

Agora quando precisar utilizá-las, referencie desse modo:

Viu como fica bem mais prático?

Obrigada por ter chego até aqui e espero que minhas dicas te ajudem 😁

Se tiver qualquer sugestão ou crítica fique a vontade para comentar