Traduzir um projeto no Figma para um código aceito pelo browser é como transformar os desenhos detalhados de um carro em um veículo real. Abaixo vemos uma versão simplificada de como isso funciona.

1. Projeto Figma/Sketch:

Primeiro o designer cria o projeto visual da interface com o usuário (UI) com uma ferramenta como Figma ou Sketch. Este projeto inclui todo o necessário, desde layout de elementos (como botões e imagens) até palete de cores, fontes de caracteres, espaçamentos, etc... É a definiçã de tudo sobre a identidade visual.

2. Inspeção e Medições:

Os desenvolvedores estudam o design para compreender sua estruturação. Observam como cada elemento é posicionado, seu tamanho e proporções, quais cores e fontes são usadas. Algo como fazer anotações que ajudem a esclarecer tudo sobre o projeto.

3. Estrutura HTML:

Com baseando no projeto os desenvolvedores escrevem o código HTML que é o esqueleto da página. São definidos limites e hierarquidas para as diferentes sessões e elementos. Como cabeçalhos, menus, áreas com conteúdo e rodapés. Esses containers são como o chassi de um automóvel.

4. Formatação com CSS:

Para reproduzir fielmente a aparência do design os programadores usam a linguagem CSS ('Cascading Style Sheets'). Com isso são definidas as posições dos elementos em relação ao espaço disponível e entre si. Cores, fontes de caracteres, animações, reações às ações do usuário, etc... Isso seria como pintar o carro, escolher acessórios e enfeites.

5. Imagens e Media:

Se o projeto incluir elementos de midia (imagens, videos e sons) esse conteúdo é inserido na estrutura formada pelo HTML + CSS.

6. Responsividade:

Atualmente os projetos devem estar adequados à telas de diferentes tamanhos (como desktops, tables e celulares). Os desenvolvedores usam técnicas de responsvidade para garantir a interface pareça bem em diferentes dispositivos. Isso equivaleria a projetar o carro tanto para pistas de corrida quanto para situações 'fora-de-estrada'

7. Interatividade com JS:

Quando o design inclui funcionalidades como botões, formulários ou animações usa-se Javascript para oferecer a interatividade. Na analogia do carro seria como instalar o motor e os acionadores mecãnicos que produzem os movimentos

8. Testest e Correções:

Então o conjunto é testato em diversos navegadores diferents para garantir que a aparẽncia e comportamentos sejam os mesmos e dentro do esperado. Seria como o controle de qualidade feito no carro após a linha de produção.

9. Hospedagem na Nuvem:

E, finalmente, o código da página é hospeado em um servidor (ou nuvem) na Internet. Na metáfora do carro seria o seu dono fazendo uso do veículo como desejar.