Entrar Ainda não tem acesso?
1
resposta

Mockup para Front-end

por Christian
| 23.7k xp | 5 posts
Editor de vídeo

Comecei meus estudos de programação a pouco tempo e agora quis começar com um amigo a montar uma página da web. Para isso, eu fui pesquisar ferramentas para fazer mockup antes de passar a ideia pro código, estou aprendendo a usar o figma, porém me surgiu uma dúvida:

Normalmente, até onde eu avancei no curso de HTML+CSS, se usa porcentagem para definir posicionamento de elementos. Quando vamos fazer o mockup, se usa grid para posicionar os elementos de forma lógica, porém fiquei me perguntando, como vou posso passar essa informação para o código CSS para manter o que foi feito no mockUp?

1 resposta
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Christian, como vai? Espero que bem.

Sinto muito pela demora em obter um retorno

Excelente pergunta!

Felizmente, o Figma tem um recurso de exportação que permite exportar o design em CSS. Para fazer isso, selecione o elemento que deseja exportar e, em seguida, clique com o botão direito do mouse e selecione "Copy as CSS". Isso copiará o código CSS correspondente ao elemento selecionado para a área de transferência. Outra alternativa é ver manualmente as propriedades do elemento que deseja pelo próprio Figma, basta selecionar o elemento e clicar em Inspect no canto superior direito.

Ao converter seu mockup em código CSS, é importante lembrar que os valores de posicionamento em grid não são exatamente iguais aos valores de porcentagem usados no CSS tradicional.

Caso queira saber mais, deixo como recomendação o seguinte Alura+:

Se precisar de ajuda fico à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!